内容简介:级别:★★☆☆☆标签:「iOS CAKeyframeAnimation」「iOS 关键帧动画」「CAKeyframeAnimation values」「CAKeyframeAnimation path」作者: Xs·H
级别:★★☆☆☆
标签:「iOS CAKeyframeAnimation」「iOS 关键帧动画」「CAKeyframeAnimation values」「CAKeyframeAnimation path」
作者: Xs·H
审校:QiShare团队
最近的项目需求涉及到一些动画效果。对于基本的动画,可以使用QiShare之前分享过的CABasicAnimation实现,而和路径相关的动画(例如图1的折线动画)可以使用CAKeyframeAnimation实现。
CAKeyframeAnimation和CABasicAnimation都是CAPropertyAnimation的子类。CABasicAnimation可以控制动画的起点( fromValue
)和终点( toValue
),而CAKeyframeAnimation可以控制动画的全过程。所以,可以将CABasicAnimation理解成只关注起点和终点的CAKeyframeAnimation。
对比CABasicAnimation来说,CAKeyframeAnimation是通过控制动画的 关键帧 和 步调 (关键帧执行的时间)来控制动画过程的。
1、CAKeyframeAnimation使用“values”或“path”属性来控制动画的关键帧
values:可选的NSArray对象,存放多个 value
,每个 value
就是一个 keyframe
(关键帧)。在动画过程中,关键帧会依序显示出来。 path :可选的CGPathRef对象,指定动画的路径,可让CALayer的 anchorPoint
和 position
按照路径变化。除了“moveTo”之外,路径中的每个点都是一个关键帧。如果需要沿路径匀速动画,需要将 calculationMode
属性设置为 paced
。当 path
非 nil
时, values
属性被覆盖。
2、CAKeyframeAnimation使用“keyTimes”属性来控制动画的步调
keyTimes: 可选的NSArray对象,存放多个 keyTime
,每个 keyTime
都是[0, 1]区间内的浮点数所对应的NSNumber,与 values
中的关键帧一一对应,控制关键帧发生的时间。 PS:当 values
被 path
覆盖时, keyTimes
作用于 path
。( path
的优先级较高)
3、使用CAKeyframeAnimation实现图1的折线动画效果
为了辅助分析动画过程,我们为动画加上轨迹(后文只分析动画本身,不分析轨迹),如图2。
1) 像使用CABasicAnimation一样初始化CAKeyframeAnimation的对象
// 初始化动画 self.animation = [CAKeyframeAnimation animation]; self.animation.keyPath = @"position"; self.animation.delegate = self; self.animation.duration = 5.0; self.animation.repeatCount = 1.0; self.animation.removedOnCompletion = NO; self.animation.fillMode = kCAFillModeForwards; self.animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; 复制代码
2) 使用“values”和“keyTimes”属性设置动画的关键帧和步调
// 设置动画的关键帧数组 self.animation.values = @[[NSValue valueWithCGPoint:self.imageView.center],// 不能省略起点(1, 1) [NSValue valueWithCGPoint:(CGPoint){self.squareSide * 2, self.squareSide * 1}],// 右移1格 [NSValue valueWithCGPoint:(CGPoint){self.squareSide * 2, self.squareSide * 5}],// 下移4格 [NSValue valueWithCGPoint:(CGPoint){self.squareSide * 5, self.squareSide * 5}],// 右移3格 [NSValue valueWithCGPoint:(CGPoint){self.squareSide * 5, self.squareSide * 7}]// 下移2格 ]; // 设置动画的步调 self.animation.keyTimes = @[@.0, @.1, @.5, @.8, @1.0]; // self.animation.calculationMode = kCAAnimationPaced;// 可以替代上面的keyTimes实现匀速效果 复制代码
PS: 上述代码中的 keyTimes
是根据 values
的值进行设定的,以达到动画匀速的效果。若不设置 keyTimes
,动画时长( duration
)将被平均分配给4段动画。
3) 像使用CABasicAnimation一样为layer添加动画和移除动画
if (start) { [self.imageView.layer addAnimation:_animation forKey:@"animation"];// 执行动画 } else { [self.imageView.layer removeAnimationForKey:@"animation"];// 移除动画 } 复制代码
上面有介绍到, path
属性同样可以设置动画的关键帧,并且当 path
不为 nil
时会覆盖 values
。 所以,**步骤2)**可以替换为 “path”
和 “keyTimes”
的方式。
CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path, NULL, self.imageView.center.x, self.imageView.center.y); CGPathAddLineToPoint(path, NULL, self.squareSide * 2, self.squareSide * 1);// 右移1格 CGPathAddLineToPoint(path, NULL, self.squareSide * 2, self.squareSide * 5);// 下移4格 CGPathAddLineToPoint(path, NULL, self.squareSide * 5, self.squareSide * 5);// 右移3格 CGPathAddLineToPoint(path, NULL, self.squareSide * 5, self.squareSide * 7);// 下移2格 self.animation.keyTimes = @[@.0, @.1, @.5, @.8, @1.0]; // self.animation.calculationMode = kCAAnimationPaced;// 可以替代上面的keyTimes实现匀速效果 self.animation.path = path; CGPathRelease(path); 复制代码
4、使用CAKeyframeAnimation实现曲线动画
CAKeyframeAnimation的 values
和 path
属性具有强大的功能,尤其是 path
,可以方便的制定自定义动画路径,比如图3的椭圆动画效果。
使用path制定上述椭圆路径的代码如下:
CGRect drawRect = (CGRect){self.squareSide, self.squareSide, self.squareSide * 8, self.squareSide * 6}; CGMutablePathRef path = CGPathCreateMutable(); CGPathAddEllipseInRect(path, NULL, drawRect); self.animation.keyTimes = @[@.0, @.25, @0.5, @0.75, @1.0]; // self.animation.calculationMode = kCAAnimationPaced; self.animation.path = path; 复制代码
示例源码 可从GitHub的 QiShare开源库 中获取。
关注我们的途径有:
QiShare(微信公众号)
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- CSS动画属性关键帧keyframes全解析
- 【Android 动画】动画详解之属性动画(三)
- 【Android 动画】动画详解之属性动画(五)
- Flutter 动画全解析(动画四要素、动画组件、隐式动画组件原理等)
- 【Android 动画】动画详解之补间动画(一)
- 乐高的关键在于底盘,DevOps成功的关键在于基础设施
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
大规模Web服务开发技术
伊藤直也、田中慎司 / 李剑 / 电子工业出版社 / 2011-7 / 59.00元
Hatena是日本最大的Web服务提供商之一,它提供的服务包括关键字(类似于维基百科)、博客、相册等。《大规模Web服务开发技术》由伊藤直也、田中慎司所著,内容主要来自Hatena为学生们举行的暑期实习的课程,内容涵盖广泛,介绍了性能优化、分布式、算法、系统架构等各个方面,甚至还介绍了硬件的经济成本,是运维工程师们必不可少的参考书。书中还包括几个算法实习课题,介绍了压缩算法、全文搜索等算法的实现方......一起来看看 《大规模Web服务开发技术》 这本书的介绍吧!
HTML 编码/解码
HTML 编码/解码
Markdown 在线编辑器
Markdown 在线编辑器