本文主要从CoreAnimation的Layer角度来讲解动画,我想从 CALayer的角度更好理解,后续还会有第二篇从UIKIt的UIView角度来讲解动画,第三篇讲解UIDynamicAnimation,第三篇我 会讲到UIViewController切换时候的动画。
本文主要涵盖四个部分
1.基础动画-会讲到时间函数和一些关键的属性
2.基于关键帧的动画-讲到沿着指定路径运行的动画
3.动画组-多个动画组合到一起形成复杂的动画
4.简单讲一下讲一下有关动画的代理
(一)为什么要设计动画?
动画提供了一个渐变的方式来表达变化,使用动画可以避免各种界面突变,造成用户困惑。
IOS中,使用CoreAnimation只要指定始末状态或者关键帧的状态,CoreAnimation会高效的为我们创建补间动画。
(二)从CALayer的角度来看的三种动画
首先不熟悉CALayer的同学看看前两篇的CALayer的内容,这是CoreAnimation的基础。这里我重复的介绍两种CALayer的Tree。
Presentation Tree-对应在动画的过程中,CALayer的属性
Model Tree-对应CALayer的实际属性。
通过使用 -[CALayer presentationLayer] 和 -[CALayer modelLayer]可以访问两种Tree
动画的过程实际上是修改Presentation Tree
2.1 基础的动画
第一个简单的动画,我希望imageview向右移动100的距离,移动方式easeInOut(加速开始,减速结束)。
效果如图:
代码如下,通常有两种方式来影响动画
- <pre name="code" class="objc"> CABasicAnimation * animation = [CABasicAnimation animation];
- animation.keyPath = @"position.x";//KVC的方式来访问属性
- animation.fromValue = @(self.imageview.layer.position.x);//该属性开始的值
- animation.toValue = @(self.imageview.layer.position.x + 100);//结束的值
- animation.duration = 1;//持续时间
- animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];//结束函数
- [self.imageview.layer addAnimation:animation forKey:@"basic"];//添加动画
通过fromValue和toValue是一种方式,当然也可以通过byValue的方式,byValue在初值上加上byValue的变化,通过以下代码也可以实现上述动画
- CABasicAnimation * animation = [CABasicAnimation animation];
- animation.keyPath = @"position.x";
- animation.byValue = @(100);
- animation.duration = 1;
- animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
- [self.imageview.layer addAnimation:animation forKey:@"basic"];
但是,结束后会发现,imageview又恢复到原处。这是因为在动画的过程中,我们修改的是Presentation Tree,并没有实际修改CALayer的属性。想要让动画停在结束的位置,通常有两种方式,
(1)修改属性
代码如下
- CABasicAnimation * animation = [CABasicAnimation animation];
- animation.keyPath = @"position.x";
- animation.fromValue = @(self.imageview.layer.position.x);
- animation.toValue = @(self.imageview.layer.position.x + 100);
- animation.duration = 1;
- animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
- [self.imageview.layer addAnimation:animation forKey:@"basic"];
- self.imageview.layer.position = CGPointMake(self.imageview.layer.position.x+100, self.imageview.layer.position.y);
(2)设置让动画停在结束的位置"code" class="objc"> CABasicAnimation * animation = [CABasicAnimation animation];
- animation.keyPath = @"position.x";
- animation.fromValue = @(self.imageview.layer.position.x);
- animation.toValue = @(self.imageview.layer.position.x + 100);
- animation.duration = 1;
- animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
- animation.removedOnCompletion = NO;//动画结束了禁止删除
- animation.fillMode = kCAFillModeForwards;//停在动画结束处
- [self.imageview.layer addAnimation:animation forKey:@"basic"];
一般采用前者,因为动画往往的结束是实际的属性的改变。
这里再讲解下时间函数
时间函数决定了动画如何执行,时间函数决定了动画的数学模型,比如速度速度最好不要有突变, 系统提供的时间函数有以下几种
NSString *constkCAMediaTimingFunctionLinear;线性
NSString *constkCAMediaTimingFunctionEaseIn;加速进入
NSString *constkCAMediaTimingFunctionEaseOut;减速停止
NSString*constkCAMediaTimingFunctionEaseInEaseOut;加速进入减速停止,这个是常用的
NSString *constkCAMediaTimingFunctionDefault;默认
当然,时间函数支持自定义,用如下函数
functionWithControlPoints::::
这个函数的4个点决定了一个三维的贝塞尔曲线来决定时间函数。这里不深入讲解了。
最后,这一点尤为重要,就是在传递CAAnimation的对象或者子类给Layer的时候,传递的是copy
2.2 基于关键帧的动画
以下是一个基于关键帧创建的抖动的动画,采用在时间点对应的位置来创建动画
- CAKeyframeAnimation * animation = [CAKeyframeAnimation animation];
- animation.keyPath = @"position.x";
- NSInteger initalPositionX = self.imageview.layer.position.x;
- animation.values = @[@(initalPositionX),
- @(initalPositionX + 10),
- @(initalPositionX - 10),
- @(initalPositionX + 10),
- @(initalPositionX)];
- animation.keyTimes = @[
- @(0),
- @(1/6.0),
- @(3/6.0),
- @(5/6.0),
- @(1)];
- [self.imageview.layer addAnimation:animation forKey:@"keyFrame"];
当然,基于关键帧的动画支持沿着路径运动,可以设置时间函数来决定运动的方式
例如以下创建一个比较复杂的运动,首先移动到(200,200),然后沿着以该点为圆心,逆时针旋转半圈,最后停在结束的位置。
动画的过程中,imageview沿着路径转动
- CAKeyframeAnimation * animation = [CAKeyframeAnimation animation];
- animation.keyPath = @"position";
- //Create Path
- CGMutablePathRef mutablepath = CGPathCreateMutable();
- CGPathMoveToPoint(mutablepath, nil,self.imageview.layer.position.x, self.imageview.layer.position.y);
- CGPathAddLineToPoint(mutablepath,nil,200,200);
- CGPathAddArc(mutablepath, nil,200,200,100,0,M_PI,YES);
- //set path
- animation.path = mutablepath;
- animation.duration = 4.0;
- animation.rotationMode = kCAAnimationRotateAuto;
- animation.removedOnCompletion = NO;//动画结束了禁止删除
- animation.fillMode = kCAFillModeForwards;//停在动画结束处
- [self.imageview.layer addAnimation:animation forKey:@"PathAnimation"];
2.3 动画组
所谓,动画组就是把几个动画组合到一起,然后一起执行,通常复杂的动画都是由动画组来实现的。
举个例子:沿着上个例子的路径运动,运动的同时透明度渐变。
- CAKeyframeAnimation * pathAnimation = [CAKeyframeAnimation animation];
- pathAnimation.keyPath = @"position";
- //Create Path
- CGMutablePathRef mutablepath = CGPathCreateMutable();
- CGPathMoveToPoint(mutablepath, nil,self.imageview.layer.position.x, self.imageview.layer.position.y);
- CGPathAddLineToPoint(mutablepath,nil,200,200);
- CGPathAddArc(mutablepath, nil,200,200,100,0,M_PI,YES);
- //set path
- pathAnimation.path = mutablepath;
- pathAnimation.rotationMode = kCAAnimationRotateAuto;
- [self.imageview.layer addAnimation:pathAnimation forKey:@"PathAnimation"];
- //透明度变化
- CAKeyframeAnimation * opacityAnimation = [CAKeyframeAnimation animation];
- opacityAnimation.keyPath = @"opacity";
- opacityAnimation.values = @[@(1.0),
- @(0.5),
- @(0.0),
- @(0.5),
- @(1.0)];
- opacityAnimation.calculationMode = kCAAnimationPaced;
- [self.imageview.layer addAnimation:opacityAnimation forKey:@"OpacityAnination"];
- //配置动画组
- CAAnimationGroup * animationGroup = [[CAAnimationGroup alloc] init];
- animationGroup.animations = @[pathAnimation,opacityAnimation];
- animationGroup.duration = 4.0;
- animationGroup.removedOnCompletion = NO;
- animationGroup.fillMode = kCAFillModeBackwards;
- [self.imageview.layer addAnimation:animationGroup forKey:@"GroupAnimation"];