iOS动画详解
Created: Mar 17, 2019 5:46 PM
今天聊一下iOS常用的四种动画CABasicAnimation，CAKeyframeAnimation，CATransition，以及UIView的animate。
CABasicAnimation，CAKeyframeAnimation，CATransition这三个动画的基类其实都是CAAnimation，这种动画有个最大的特点是，执行完动画，属性不会发生变化，比如一个View从A点移动到B点，其实坐标还是A点。
下面做一下详细的介绍：
CAAnimation
CAAnimation在设置动画的时候有以下通用属性：
- fromValue: 动画的开始值
- toValue: 动画的结束值
- beginTime: 动画的开始时间
- duration : 动画的持续时间
- repeatCount : 动画的重复次数
- fillMode: 动画的运行场景
- isRemovedOnCompletion: 完成后是否删除动画
- autoreverses: 执行的动画按照原动画返回执行
CABasicAnimation（基础动画）
基础动画主要提供了对于CALayer对象中的可变属性进行简单动画的操作。比如：位移、旋转、缩放、透明度、背景色等。
基础动画根据 keyPath 来区分不同的动画。keyPath可以是：
- transform.scale (比例转换)
- transform.scale.x
- transform.scale.y、
- transform.rotation(旋转)
- transform.rotation.x(绕x轴旋转)
- transform.rotation.y(绕y轴旋转)
- transform.rotation.z(绕z轴旋转)、
- opacity (透明度)
- margin
- backgroundColor(背景色)
- cornerRadius(圆角)
- borderWidth(边框宽）
- bounds
- contents
- contentsRect
- cornerRadius
- frame
- hidden
- mask
- masksToBounds
- shadowColor(阴影色)
- shadowOffset
- shadowOpacity
代码示例：
CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"position"];
animation.fromValue = [NSValue valueWithCGPoint:self.aView.center];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(self.aView.center.x+100, self.aView.center.y)];
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.delegate = self;
animation.duration = 3.0;
[animation setRepeatDuration:20];
animation.repeatCount = 3;
[self.aView.layer addAnimation:animation forKey:@"click1"];
以上代码可以实现将view沿x轴移动100
CAKeyframeAnimation（关键帧动画）
关键帧动画，顾名思义，我们只需要设定一个关键点，然后view便可以将几个关键点形成自然的过度。
关键帧动画，有些特殊的属性：
- path：关键帧动画中的执行路径
- values: 关键帧动画中的关键点数组
示例代码：
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)];
NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)];
NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 300)];
NSValue *value6=[NSValue valueWithCGPoint:CGPointMake(200, 400)];
animation.values=@[value1,value2,value3,value4,value5,value6];
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.delegate = self;
animation.duration = 3.0;
[animation setRepeatDuration:20];
animation.repeatCount = 3;
[self.aView.layer addAnimation:animation forKey:@"click2"];
CATransition(过渡动画)
CATransition 用于做过渡动画或者转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。
所以这里要注意的是它的特殊应用场景，CATransition是为了实现一个view移入或移除屏幕而设计的。可以将其想象成ppt的动画效果。
他也有一些特殊属性：
- type： 过渡动画的动画类型，系统提供了多种过渡动画（官方提供了四种
fade, moveIn, push and reveal. Defaults to fade.） - subtype : 过渡动画的动画方向,（系统提供了四种：fromLeft(从左侧)fromRight (从右侧)fromTop (有上面）fromBottom (从下面））
代码示例：
CATransition * animation = [CATransition animation];
animation.type = @"pageCurl";
animation.subtype = kCATransitionFromLeft;
animation.duration = 3;
[self.aView.layer addAnimation:animation forKey:@"click3"];
UIView
UIView的动画是可以改变View组件的属性的，它支持对一下属性进行更改：
- frame
- bounds
- center
- transform
- alpha
- backgroundColor
- contentStretch
如：
- (void)clicked4:(id)sender{
[UIView animateWithDuration:3 animations:^{
self.aView.frame = CGRectMake(80, 80, 80, 80);
} completion:^(BOOL finished) {
NSLog(@"aaaaaa 结束");
}];
}
UIView动画有以下几个参数：
- animateWithDuration执行时间
- animations 动画的类型，其实是一个回调，可以在这个回调中设置aView最终的属性，然后根据现在的属性到这个最终属性，实现一个动画
- completion执行完毕的回调
- delay等待时间
- options 一个设置数组，可以设置动画的执行状态，如重复，加速度方式等等
本文是来自我公号的文章，欢迎大家关注我的公众号，更快的更新更友爱的微信群更全的源码示例。
image