基于CABasicAnimation的完美跑马灯效果

本文介绍了如何使用CABasicAnimation而非UIView动画实现跑马灯效果,以解决界面切换或APP切后台时动画停止的问题。通过设置removedOnCompletion属性为NO保持动画执行,将动画分为两段,利用CAAnimationGroup分时执行,确保文字从左侧开始,右侧结束,形成连续循环。详细代码展示了解决方案。
摘要由CSDN通过智能技术生成

在网上看了几个网友写的跑马灯效果,实现方式大同小异,都是使用UIView动画,在动画完成时再调用动画本身,无限的递归调用。这种方式有一个缺点,就是当界面切换或者APP切到后台的时候,动画会被系统强行停掉,然后再切回来的时候重新开始新的动画。另外我们希望滚动的文字动画是从最左侧开始,然后文字从右侧出来,这样重复循环,UIView动画也无法很好的支持。

于是我使用CABasicAnimation进行实践,CABasicAnimation支持这样的一个属性removedOnCompletion。这个属性默认是YES,当我们将他置为NO之后,切换界面或者APP切后台的时候,动画就不会被强行停止,还会继续执行。这样就解决了第一个问题。解决第二个问题的方式是将动画分为两段执行,第一个段动画将文字Layer从左侧屏幕边缘开始,一直移出屏幕,然后第二段动画文字layer从屏幕右侧边缘开始,一直移动到屏幕右侧边缘(只移动了一个屏幕的距离),然后接下来再次执行动画一,这样就实现了我要的效果。之前的实现方式是在第一段动画结束的时候,然后执行无限次执行第二次动画,但是这种方式当切换界面的会导致- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;被调用,动画就被停止了。于是只好利用CAAnimationGroup进行分段执行。

CAAnimationGroup是组合动画,我们可以给一个layer同时设置不同的动画一起执行,为了使动画一动画二能够分时执行,我们通过设置CABasicAnimation的beginTime来实现。例如第一段动画执行的时间为5s,第二段为3s,那么动画一的beginTime就设置为0,动画二的beginTime设

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值