CADisplayLink学习

在网上看到了关于CADisplayLink果冻动画效果的文章,觉得很有意思,之前也写过CAEmitterLayer的文章讲了怎么使用有趣的粒子效果,所以这里再记录一下CADisplayLink是怎么玩儿的

我们先让一个简单的View移动,并带着果冻一样的弹性效果,UIView动画usingSpringWithDamping是一个很好的选择,但是这个方式只是能让UIView做一些简单的动画反弹,比如位移后弹来弹去,UIView本身在移动过程中如果边缘也可以很自然的变形(像迎风的果冻一样),那一定很Cool

第一步Storyboard放一个JellyView,一个按钮,点击按钮让JellyView网上移动并带个简单的弹性

这没什么说的,下面开始利用CADisplayLink强化这个动画效果,实际上CADisplayLink使用起来非常像Timer,但是它常用于渲染每一帧动画的时候调用,确保动画很流畅

我们先把它当做一个Timer,什么都不干,修改添加下面代码,更新如下:

再次运行,其实没什么变化,只不过在动画的每一帧,都会调用tick方法,这个tick方法是根据动画的每一帧调用的,直观感觉就是比timer更精确

那么和Timer比有什么区别呢,看起来除了不是自己设定间隔时间,结束也调用invalidate呀,就是这个间隔时间就是不同之处。CADisplayLink的调用适合屏幕刷新率一样的,这也是产生无缝动画的关键,当然也必须加入到指定的Runloop中去NSDefaultRunLoopMode。相比于Timer,CADisplayLink更精确,因为随着屏幕刷新率是固定的,Timer会弱一个档次,如果runloop在忙别的事,timer就会推迟到下一个runloop周期,所以NSTimer会有个tolerance属性,用于用户设定容忍触发时间

实际上,除了界面的不停重绘,是不需要CADisplayLink的

 

下面给tick方法添加内容,让jellyView本身有果冻动画的效果,改造jellyView,让他继承UIView,然后再drawRect方法里做事,tick方法调用setNeedsDisplay来实现动画

drawRect方法干的事情就是随着jellyView的移动的center.y值,动态的在jellyView上面画贝塞尔曲线,因为每一帧都会有轻微的变化所以看起来就会像果冻一样

实际上我是照着一个教程实现的效果,具体画了什么线我还没来得及细看,但这不是重点,重点是CADisplayLink的使用,让动画在每一帧瞬间做出相应,根据贝塞尔曲线某一个动点画图,实现了平滑的动画。

关于动画的FPS

既然CADisplayLink和屏幕刷新率一样,60HZ,那也就是每秒钟刷新60次。如果这时候让CADisplayLink的调用间隔增大,每秒调用次数减少,那应该会看到动画的卡顿,这里就用到frameInterval属性,默认是1,如果>1那就会降低帧率,比如设为2就变成了30fps,设为3就变成了20fps,再运行动画就会很明显的丢帧卡顿感觉了。

 

 

 

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注