Layer上KeyFrame Animation的总结

看到这个我们很自然的就会想到我们之间在UIKit方式实现的keyframe,看这里,但是这两种方式还是有一定的区别的。
使用UIKit的方法animateKeyframesWithDuration: delay: options: animations: completion:来实现动画,我们可以同时对不同Layer的不同属性进行修改,而且时间上也是可以存在重叠和空隙的。但是使用CAKeyframeAnimation是不可以这样的。

CAKeyframeAnimation

CAKeyframeAnimation是使用一个叫values的数组来替代 fromValuetoValue。数组values中间的值就是动画的关键节点。
实现一个简单的例子来说明用法
代码如下:

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
animation.duration = 0.25;
animation.repeatCount = 4;
animation.values = @[@0.0,@(-M_PI_4/4),@0.0,@(M_PI_4/4),@0.0];
animation.keyTimes = @[@0.0,@0.25,@0.5,@0.75,@1.0];
[_headingLabel.layer addAnimation:animation forKey:@"AnimationKey"];

实现效果如下:

结构体数据类型的处理

因为在数组中是不可以直接存储结构体类型的,所以我们要使用NSValue来将结构转换为对象进行处理。
还是举个简单的例子来理解一下使用方式
实现代码:

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.duration = 12.0f;
animation.values = @[
                     [NSValue valueWithCGPoint:CGPointMake(-50, 0)],
                     [NSValue valueWithCGPoint:CGPointMake(self.view.frame.size.width+50, 160)],
                     [NSValue valueWithCGPoint:CGPointMake(-50, 300)],
                     ];
animation.keyTimes = @[@0.0,@0.5,@1.0];
[_ballon addAnimation:animation forKey:@"AnimationPositionKey"];

最终效果:

这里需要注意的是我们没有将ballon设置为UIImageView类型,而是将其设置为CALayer类型,并且且image作为其content来展现。所以,在我们仅仅只是需要在屏幕展现一个图片,而且不需要给他添加约束条件,手势事件等的时候,我们可以将UIImageView换为CALayer。

项目地址github中的KeyframeLayer项目为该效果源码。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容