1. iOS动画原理
- 本质:动画对象(这里是
UIView
)的状态,基于时间变化的反应 - 分类:可以分为显式动画(关键帧动画和逐帧动画)和隐式动画
- 关键帧和逐帧总结:关键帧动画的实现方式,只需要修改某个属性值就可以了,简单方便,但涉及的深层次内容较多,需要更多的理解和练习。采用逐帧动画的实现方式,实现原理简单,但绘制动画的过程要复杂。如果动画过程处理的事情较多,也会带来较大的开销,就有可能造成动画帧数的下降,出现卡顿的现象,因此需要较多的测试和调试。
1.1 显式动画(逐帧动画和关键帧动画)
显式动画本质是我们显式地给
CALayer
添加一个动画
- 逐帧动画
- 用户需要
周期性
的调用绘制
方法,绘制每帧的动画对象,系统操作方法简单,但用户操作的工作量就会大一些 周期性
这边指的是定时器CADisplayLink
,其基于屏幕刷效率的,即屏幕每次刷新时就会触发调用(iPhone为60FPS)。绘制
指的是对UIView
背后对应的主CALayer
进行的修改,这边的修改包括- drawRect:
方法和UIView
的属性渐变(改变颜色尺寸等)。- 注意1:因为有些时候绘制过程相对复杂,所以一般采用每隔一帧进行绘制,相当于30FPS的刷新率。另外著名的pop动画框架,就是用
CADisplayLink
进行的逐帧动画。 - 注意2:如果在逐帧绘制的方法中修改了一个自建的
CALayer
,这个CALayer
不是对应某个UIView
的,需注意系统的隐式动画
的影响,后面会提到这点。
- 用户需要
- 关键帧动画
- 主要是使用两个关键帧---起始帧和结束帧,再配合别的关键信息(如动画时间和运动类型等)
- 每个
CALayer
都有一个属性来表示成坐标,我们可以修改模型层modelLayer
来改变展现层presentationLayer
来形成动画效果。 - 整个动画过程,通过坐标层次来看如下所示:
- 动画前,显示模型层的当前值;
- 动画开始,切换显示展现层的值;
- 动画过程中,展现层的值根据时间变化,我们看到的实际是展现层的值在变化;
- 动画结束,切换回显示模型层的值,此时模型层的值应被修改为动画结束时的值。
代码注释如下:
``` UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; view.backgroundColor = [UIColor redColor]; [self.view addSubview:view];// CABasicAnimation指定一个keyPath,详见官方API
// 常见keyPath:transform.scale/transform.translation.x/position.x(非3D平移) CABasicAnimation animation = [CABasicAnimation animationWithKeyPath:@"position.x"]; // 开始帧 animationWithKeyPath.fromValue = @(100); // 结束帧 animationWithKeyPath.fromValue = @(200); // 动画时间 animation.duration = 2.0; // 永久重复动画 animation.repeatCount = HUGE; // 代理方法: // - (void)animationDidStart:(CAAnimation )anim; // - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag; animation.delegate = self; // fillMode:决定当前对象在非active时间段的行为.比如动画开始之前,动画结束之后 animation.fillMode = kCAFillModeForwards; // removedOnCompletion:默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillMode为kCAFillModeForwards animation.removedOnCompletion = NO; // autoreverses:动画结束时是否执行逆动画 animation.autoreverses = NO; // timingFunction:动画类型,设定动画的速度变化 animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; // 给CALayer添加一个动画,该动画为CAAnimation类型,其子类有CABasicAnimation/CAKeyframeAnimation/CAAnimationGroup/CATransition(图层过度动画,有filter属性) [view.layer addAnimation:animation forKey:nil]; ```
1.2 隐式动画
当前
UIView
的主CALayer
称为根层,自动另外创建的CALayer
为非根层,对非根层的部分可动画属性修改时,就是隐式动画。
- 直接对
UIView
或其CALayer
设置一个可动画的属性值时,会出发系统的隐式动画,可动画的属性值,可以在UIView
或其CALayer
的文档中找到,属性标有Animatable
- 注意:
- 因为主
CALayer
,系统默认关闭了隐式动画,所以当我们直接修改这些可动画属性值时,变化时直接生效的,没有动画效果。 - 如果修改的是一个自建的单独
CALayer
时,帧与帧之间的变化还是会触发系统的默认隐式动画,这个时候就需要我们来手动关闭隐式动画 - 隐式动画所做的事情和显示动画是一样的,我们设置的属性值都是模型层的数值,而系统会自动添加属性对应的
CAAnimation
动画到CALayer
上。 UIView
有一系列的animateWithDuration
动画方法,在这些方法中UIView
会恢复隐式动画,所以在动画的block
中修改属性时,又会触发隐式动画。
- 因为主