轮盘猜大小(仿淘宝彩票App)

字数 2334阅读 815

支持原创,原文地址:www.KentonYu.com

作品集,其实也谈不上作品吧。都是一些小 Demo 。我觉得有必要把一些觉得有意思的东西放在这里展示一下。让大家来吐槽一下。并不断的改进。但是有一个伤透脑经的问题,App 开发并不好展示,特别是 iOS,当然有值得展示的上架应用就会把 App Store link 放上来,那些小 Demo ,就只能先上录屏了。

录屏播放地址

主要知识点


贝塞尔曲线

给定n+1个数据点,p0(x0 , y0) ... pn(xn , yn),生成一条曲线,使得该曲线与这些点所连结的折线相近。在数学中,这属于逼近问题。在几何中,可以形象地理解为先用折线段连接这些数据点,勾勒出图形的大致轮廓,然后再用光滑的曲线去尽可能接近地拟合这条折线。摘录来自: “A GUIDE TO IOS ANIMATION”

UIBezierPath,是 UIKit 对 CoreGraphics 的 path (CGPathRef)的封装。通过 UIBezierPath 可以绘制直线、圆圈、多边形和贝塞尔曲线。
下面是对 UIBezierPath 的简单介绍

<pre>
// 以下是四个类方法,用来绘制闭合的特殊路径
// 矩形

  • (UIBezierPath *)bezierPathWithRect:(CGRect)rect

// 圆角矩形

  • (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius

// 矩形内切圆

  • (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect

// 弧形(clockwise 是否顺时针绘制)

  • (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
    </pre>
    <pre>
    // 实例方法,可以绘制各种自定义的形状
    // 直线
  • (void)addLineToPoint:(CGPoint)point

// 弧形线段

  • (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise

// 二阶贝塞尔曲线

  • (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint

// 三阶贝塞尔曲线

  • (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
    </pre>

通过贝塞尔曲线可以绘制任何你想要画的形状。我还没用过三阶贝塞尔。这个<a href='http://cubic-bezier.com' target="_blank" style='color:#00d6cf'>网站</a>可以体验下贝塞尔曲线。


CALayer

CALayer 类在概念上和 UIView 类似,同样也是一些被层级关系树管理的矩形块,同样也可以包含一些内容(图片,文本或者背景色),管理子图层的位置。它们有一些方法和属性用来做动画和变换。和 UIView 最大的不同是 CALayer 不处理用户的交互( UIView 继承 UIResponder,CALayer 继承 NSObject )。


CALayer 和 UIView 主要区别:

  • 处理触摸事件
  • 阴影、圆角、带颜色的边框
  • 3D 变换
  • 非矩形范围
  • 透明遮罩
  • 多级非线性动画
  • .....


CALayer 的子类简单介绍:

  • CAShapeLayer:用来绘制各种形状
  • CATextLayer:用来绘制文字
  • CATransformLayer:用来构造一个层级的3D结构
  • CAGradientLayer:用来生成两种或更多颜色平滑渐变
  • CAReplicatorLayer:用来高效地生成许多相似的图层
  • CAScrollLayer:用来实现图层滑动
  • CATiledLayer:为载入大图造成的性能问题提供一个解决方案,将大图分解成小片然后将它们单独按需载入
  • CAEmitterLayer:高性能的粒子引擎,被用来创建实时粒子动画(烟、火、雨等)
  • CAEAGLLayer:The CAEAGLLayer class supports drawing OpenGL content in iPhone applications
  • AVPlayerLayer:用来在iOS上播放视频的,是 MPMoivePlayer 的底层实现,由 AVFoundation 提供

<b>关于这一部分的具体实践,后续会补上。</b>


我们什么时候需要使用 CALayer:

  • 开发同时可以运行在 MAC OS 上的跨平台应用
  • 使用多种 CALayer 的子类
  • 做一些对性能要求很高的工作


drawRect && drawLayer

CALayer 有一个寄宿图,可以通过 contents 属性来赋值:
<pre>
layer.contents = (__bridge id)image.CGImage;
</pre>

当用代码的方式来处理寄宿图的时候,一定要记住要手动的设置图层的contentsScale属性,否则,你的图片在Retina设备上就显示得不正确啦。代码如下:
<pre>
layer.contentsScale = [UIScreen mainScreen].scale;
</pre>

以上是对寄宿图的简单介绍,下面就介绍主题 <code>- drawRect:</code>。
给 contents 赋值(CGImage)并不是唯一设置寄宿图的方法,我们也可以通过用 Core Graphics 直接绘制寄宿图,能够通过继承 UIView 并实现<code>- drawRect:</code>来自定义绘制。

<code>- drawRect:</code> 方法没有默认实现,因为对 UIView 来说,寄宿图并不是必须的。如果 UIView 检测到 <code>- drawRect:</code> 方法被调用了,它就会为视图分配一个寄宿图,这个寄宿图的大小的尺寸等于视图大小乘以 contentScale 的积。

<b>所以在不需要使用寄宿图的时候,就不要创建<code>- drawRect:</code>方法,会导致 CPU 和内存资源的浪费,因此在没有自定义绘制任务的 UIView 子类中不要写一个空的<code>- drawRect:</code>方法</b>

在视图显示到屏幕上时,<code>- drawRect:</code>会被自动调用,并且当一些表现效果的属性值被修改时,一些视图类型也会被重绘(如 bounds 属性)。虽然<code>- drawRect:</code>是 UIView 的方法,但是还是底层的 CALayer 进行了重绘的操作并保存了产生的寄宿图。

CALayer 中设置寄宿图的过程:首先 CALayer 会请求它的 CALayerDelegate 代理给它一个寄宿图来显示。它通过下面这个方法来实现获取。
<pre>

  • (void)displayLayer:(CALayerCALayer *)layer;
    </pre>

如果代理不实现这个方法, CALayer 会转而尝试调用下面这个方法:
<pre>

  • (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx;
    </pre>

在调用这个方法之前,CALayer 创建了一个合适尺寸的空寄宿图(尺寸由 bounds 和 contentsScale 决定)和一个 CoreGraphics 的绘制上下文环境,为绘制寄宿图做准备,他作为 ctx 参数传入。

但是在使用这个方法时,不同于 UIView ,CALayer 不会自动重绘它的内容,需要手动调用 <code>- display</code>。

总的来说,当使用寄宿了视图的图层的时候,不必实现<code>- displayLayer:</code>和<code>- drawLayer: inContext:</code>方法来绘制寄宿图。通常做法是实现 UIView 的<code>- drawRect:</code>方法,UIView 会做完剩下的工作,包括在需要重绘的时候调用<code>- display</code>方法。

这是一篇关于 drawRect 的博文《内存恶鬼 drawRect》 ,看完可以学到更多关于 drawRect 的知识。

NSTimer && CADisplayLink

NSTimer 是如何工作的?

当设置一个 NSTimer 时,NSTimer 会被插入到当前的 NSRunloop 中,然后直到指定的时间过去之后才会被执行。但是什么时候启动定时器并没有上限,而且只有当 NSRunloop 的上一个任务结束之后才会被执行,因此通常会导致不定时的延迟。 NSRunloop 主要争对主线程,其中包含的任务有如下几项:

  • 处理触摸事件
  • 发送和接受网络数据包
  • 执行使用 GCD 的代码
  • 处理计时器的行为
  • 屏幕重绘

因此屏幕重绘的频率是60次/秒,但是和定时器一样,如果上一次重绘执行很长的时间,那么也会导致延迟。就不能保证定时器精准的每一秒执行60次。

对于动画的实现可以通过以下这些途径进行优化:

  • 可以用 CADisplayLink 让更新频率严格控制在每次屏幕刷新之后
  • 基于真实帧的持续时间而不是假设的更新频率来做动画
  • 调整动画计时器的 RunLoop 模式,这样就不会被别的事件干扰

用 CADisplayLink 而不是 NSTimer,会保证帧率足够连续,使得动画看起来更加平滑,但即使 CADisplayLink 也不能保证每一帧都按计划执行,一些失去控制的离散的任务或者事件(例如资源紧张的后台程序)可能会导致动画偶尔地丢帧。

无论是使用 NSTimer 还是 CADisplayLink,我们仍然需要处理一帧的时间超出了预期的1/60秒。由于我们不能够计算出一帧真实的持续时间,所以需要手动测量。我们可以在每帧开始刷新的时候用 CACurrentMediaTime() 记录当前时间,然后和上一帧记录的时间去比较。


总结

在这个 Demo 里主要涉及了以上几个知识点,通过 CAShapeLayer 来绘制整个台子,然后通过实现 <code>- drawLayer: inContext:</code> 实现椭圆进度条的效果(在淘宝彩排H5里有个颜色渐变的过程,我没有实现)。通过这个小 Demo,巩固了之前 iOS 动画学习的知识,感觉写动画是一个很有趣的事情。当然不得不说,这个看似简单的小游戏,实际做起来逻辑还是有点复杂的~

相关资料

推荐阅读更多精彩内容