iOS 关键帧动画

栏目: IOS · 发布时间: 6年前

内容简介:级别:★★☆☆☆标签:「iOS CAKeyframeAnimation」「iOS 关键帧动画」「CAKeyframeAnimation values」「CAKeyframeAnimation path」作者: Xs·H

级别:★★☆☆☆

标签:「iOS CAKeyframeAnimation」「iOS 关键帧动画」「CAKeyframeAnimation values」「CAKeyframeAnimation path」

作者: Xs·H

审校:QiShare团队

最近的项目需求涉及到一些动画效果。对于基本的动画,可以使用QiShare之前分享过的CABasicAnimation实现,而和路径相关的动画(例如图1的折线动画)可以使用CAKeyframeAnimation实现。

iOS 关键帧动画

CAKeyframeAnimation和CABasicAnimation都是CAPropertyAnimation的子类。CABasicAnimation可以控制动画的起点( fromValue )和终点( toValue ),而CAKeyframeAnimation可以控制动画的全过程。所以,可以将CABasicAnimation理解成只关注起点和终点的CAKeyframeAnimation。

对比CABasicAnimation来说,CAKeyframeAnimation是通过控制动画的 关键帧步调 (关键帧执行的时间)来控制动画过程的。

1、CAKeyframeAnimation使用“values”或“path”属性来控制动画的关键帧

values:可选的NSArray对象,存放多个 value ,每个 value 就是一个 keyframe (关键帧)。在动画过程中,关键帧会依序显示出来。 path :可选的CGPathRef对象,指定动画的路径,可让CALayer的 anchorPointposition 按照路径变化。除了“moveTo”之外,路径中的每个点都是一个关键帧。如果需要沿路径匀速动画,需要将 calculationMode 属性设置为 paced 。当 pathnil 时, values 属性被覆盖。

2、CAKeyframeAnimation使用“keyTimes”属性来控制动画的步调

keyTimes: 可选的NSArray对象,存放多个 keyTime ,每个 keyTime 都是[0, 1]区间内的浮点数所对应的NSNumber,与 values 中的关键帧一一对应,控制关键帧发生的时间。 PS:当 valuespath 覆盖时, keyTimes 作用于 path 。( path 的优先级较高)

3、使用CAKeyframeAnimation实现图1的折线动画效果

为了辅助分析动画过程,我们为动画加上轨迹(后文只分析动画本身,不分析轨迹),如图2。

iOS 关键帧动画

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的 valuespath 属性具有强大的功能,尤其是 path ,可以方便的制定自定义动画路径,比如图3的椭圆动画效果。

iOS 关键帧动画

使用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(简书)

QiShare(掘金)

QiShare(知乎)

QiShare(GitHub)

QiShare(CocoaChina)

QiShare(StackOverflow)

QiShare(微信公众号)


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

恰如其分的软件架构

恰如其分的软件架构

George Fairbanks / 张逸、倪健、高翌翔 / 华中科技大学出版社 / 2013-9-1 / 88.00

本书描述了一种恰如其分的软件架构设计方法。作者建议根据项目面临的风险来调整架构设计的成本,并从多个视角阐述了软件架构的建模过程和方法,包括用例模型、概念模型、域模型、设计模型和代码模型等。本书不仅介绍方法,而且还对方法和概念进行了归类和阐述,将软件架构设计融入开发实践中,与 敏捷开发方法有机地结合在一起,适合普通程序员阅读。 . 这是一本超值的书,案例丰富有趣,言简意赅,阅读轻松。当年......一起来看看 《恰如其分的软件架构》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具