CADisplayLink 动画
2015-04-24 17:43
288 查看
CADisplayLink结合UIBezierPath的神奇妙用
做过iOS动画的朋友都知道,动画中一大头疼之处就是弹性、形变之类扭曲的效果。iOS7开始,我们开始可以直接使用UiView的渲染动画API实现简单的弹性效果。
velocity是初速度。
除此之外,iOS7又出现了一个重量级的家伙:UIKit Dynamics ,可以用很简单的代码实现非常逼真的物理效果。
当然,更强大的是Facebook开源的Pop这个介于CAAnimation 和 UIDynamics之间的动画引擎,使用习惯和CAAnimation基本别无二致,很方便上手,而且动画效果非常出色,帧频非常高,所以看上去的动画会很连贯顺滑。
但是以上要实现那种很Q弹、形变的效果还是有点困难。知道我同时遇到了CADisplayLink和贝塞尔曲线UIBezierPath。下面就是一些结合CADisplayLink和UIBezierPath 的案例,并附上了源代码地址。
Github地址
Github地址
Github地址
1、什么是CADisplayLink
简单地说,它就是一个定时器,每隔几毫秒刷新一次屏幕。
CADisplayLink是一个能让我们以和屏幕刷新率相同的频率将内容画到屏幕上的定时器。我们在应用中创建一个新的 CADisplayLink 对象,把它添加到一个runloop中,并给它提供一个 target 和 selector 在屏幕刷新的时候调用。
一 但 CADisplayLink 以特定的模式注册到runloop之后,每当屏幕需要刷新的时候,runloop就会调用CADisplayLink绑定的target上的 selector,这时target可以读到 CADisplayLink 的每次调用的时间戳,用来准备下一帧显示需要的数据。例如一个视频应用使用时间戳来计算下一帧要显示的视频数据。在UI做动画的过程中,需要通过时间戳来 计算UI对象在动画的下一帧要更新的大小等等。
在添加进runloop的时候我们应该选用高一些的优先级,来保证动画的平滑。可以设想一 下,我们在动画的过
20000
程中,runloop被添加进来了一个高优先级的任务,那么,下一次的调用就会被暂停转而先去执行高优先级的任务,然后在接着执行 CADisplayLink的调用,从而造成动画过程的卡顿,使动画不流畅。
duration属性:提供了每帧之间的时间,也就是屏幕每次 刷新之间的的时间。我们可以使用这个时间来计算出下一帧要显示的UI的数值。但是 duration只是个大概的时间,如果CPU忙于其它计算,就没法保证以相同的频率执行屏幕的绘制操作,这样会跳过几次调用回调方法的机会。
frameInterval 属性:是可读可写的NSInteger型值,标识间隔多少帧调用一次selector 方法,默认值是1,即每帧都调用一次。如果每帧都调用一次的话,对于iOS设备来说那刷新频率就是60HZ也就是每秒60次,如果将 frameInterval 设为2 那么就会两帧调用一次,也就是变成了每秒刷新30次。
pause属性:控制CADisplayLink的运行。当我们想结束一个CADisplayLink的时候,应该调用-(void)invalidate从runloop中删除并删除之前绑定的 target 跟 selector
另外 CADisplayLink 不能被继承。
CADisplayLink 与 NSTimer 有什么不同?
iOS设备的屏幕刷新频率是固定的,CADisplayLink在正常情况下会在每次刷新结束都被调用,精确度相当高。
NSTimer的精确度就显得低了点,比如NSTimer的触发时间到的时候,runloop如果在阻塞状态,触发时间就会推迟到下一个runloop周期。并且 NSTimer新增了tolerance属性,让用户可以设置可以容忍的触发的时间的延迟范围。
CADisplayLink使用场合相对专一,适合做UI的不停重绘,比如自定义动画引擎或者视频播放的渲染。
NSTimer的使用范围要广泛的多,各种需要单次或者循环定时处理的任务都可以使用。
CADisplayLink使用的例子
我 们知道动画效果就是一个属性的线性变化,比如 UIView 动画的 EasyIn EasyOut 。通过数值按照不同速率的变化我们能生成更接近真实世界的动画效果。我们也可以利用这个特性来使一些其他属性按照我们期望的曲线变化。比如当播放视频时关 掉视频的声音我可以通过 CADisplayLink 来实现一个 EasyOut 的渐出效果:先快速的降低音量,在慢慢的渐变到静音。
注意
通 常来讲:iOS设备的刷新频率事60HZ也就是每秒60次。那么每一次刷新的时间就是1/60秒 大概16.7毫秒。当我们的frameInterval 值为1的时候我们需要保证的是 CADisplayLink调用的target的函数计算时间不应该大于 16.7否则就会出现严重的丢帧现象。 在mac应用中我们使用的不是CADisplayLink而是 CVDisplayLink它是基于C接口的用起来配置有些麻烦但是用起来还是很简单的。
2、Demo
实现这个形变效果的基本思路就是三句话:用CADisplayLink以其自身毫秒级刷新屏幕的特点去不断调用一个方法,这个方法里面画一条贝塞尔曲线,并且贝塞尔曲线的控制点是个动点。
第一个gif的实现思路:
首先我们需要两个辅助视图,并使用UIView的弹性动画usingSpringWithDamping 实现类似下面的效果:
新建 @interface JellyView : UIView
JellyView.m:
+ self.sideToCenterDelta决定的。yOffset是固定的值。self.sideToCenterDelta等于两个辅助视图的高度 差。最后通过 CADisplayLink 的实时绘制,我们可以就可以看到屏幕上出现的形变效果了。
ViewController.m:
先创建一个实例 displayLink.
!!最后千万别忘了调用 [self.jellyView setNeedsDisplay]; ,否则- (void)drawRect:(CGRect)rect不会called.
第二个gif的实现思路:
接下来的思路完全大同小异,只不过实时刷新的定时器从CADisplayLink换成了同样具有实时调用功能的手势:UIGestureRecognizerStateChanged。
新建 @interface BounceView : UIView
BounceView.m:
先准备好一个CAShapeLayer,并且填充颜色用来显示形变的图形。
3、总结
归 根结底,要实现这个形变的Q弹效果无非就是一个实时调用一个绘制贝塞尔曲线的方法,并且这个贝塞尔曲线的控制点是一个动点。那个实时调用就有很多实现的办 法了。各种原生的代理方法,当然还包括文中提到了毫秒级刷新器CADisplayLink。期待你能做出更加动感的动画:)
资料参考:
CADisplayLink http://www.jianshu.com/p/c35a81c3b9eb
来源:Kitten's 时间胶囊
原文地址:http://kittenyang.com/cadisplaylinkanduibezierpath/
相关文章推荐
- 使用CADisplayLink实现果冻效果动画
- 动画黄金搭档:CADisplayLink & CAShapeLayer
- 核心动画(6)之CADisplayLink
- [转]动画黄金搭档:CADisplayLink & CAShapeLayer
- 156 UIImageView 和 CADisplayLink 实现 Tom 汤姆猫动画效果的区别(扩展知识:分组(黄色文件夹)和文件夹引用(蓝色文件夹)区别)
- IOS -刷帧动画(CADisplayLink)
- 利用CADisplayLink来实现一些碉堡的动画
- 动画黄金搭档:CADisplayLink & CAShapeLayer
- 动画黄金搭档:CADisplayLink&CAShapeLayer
- 动画黄金搭档:CADisplayLink & CAShapeLayer
- 动画黄金搭档:CADisplayLink & CAShapeLayer
- iOS 动画篇 (三) CADisplayLink与CoreGraphics实现动画
- CADisplayLink及定时器的使用
- iOS开发--计时器-NSTimer与CADisplayLink
- iOS开发中深入理解CADisplayLink和NSTimer
- Core Animation系列之CADisplayLink
- Swift3 CADisplayLink简单用法
- NSTimer和CADisplayLink的基本用法
- IOS学习之—— 定时器 NSTimer 和 CADisplayLink 类的使用
- Core Animation系列之CADisplayLink