从易到难分为三个方面CABasicAnimation,UIBezierPath,CAShapeLayer
从CABasicAnimation开始
这个部分也有三个概念CALayer、CAAnimation、CAAnimationGroup
CALayer
在最开始学习iOS开发很长的一段时间都只在与view对碰,只会在很少的角落里看到layer
的字眼,所以对于layer的首要问题是,他和view有什么关系
来自苹果官方文档
Layers provide infrastructure for your views. Specifically, layers make it easier and more efficient to draw and animate the contents of views and maintain high frame rates while doing so. However, there are many things that layers do not do. Layers do not handle events, draw content, participate in the responder chain, or do many other things
- layer给view提供了基础设施,使得绘制内容和呈现更高效动画更容易、更低耗
- layer不参与view的事件处理、不参与响应链
我们在学习view的时候知道,view的作用就是接受用户点击和呈现内容。那么layer就是负责了内容呈现部分的工作,但是不参与用户点击事件处理的工作。
实际上UIView是对CALayer封装,在CALayer的基础上再添加交互功能。UIView的显示必须依赖于CALayer。我们同样可以跟新建view一样新建一个layer,然后添加到某个已有的layer上,同样可以对layer调整大小、位置、透
明度等。
一般来说,layer可以有两种用途。一是对view相关属性的设置,包括圆角、阴影、边框等参数。二是实现对view的动画操控。因为对一个view进行动画,本质上是对该view的.layer进行操纵。
CAAnimation(继承于NSObject类,可以说是所有动画类的根类)
CAAnimation可以分为一下几类:
CABasicAnimation基础动画,通过设定起始点,终点,时间,动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation
CAKeyframeAnimation关键帧动画
CAAnimationGroup组动画,支持多个CABasicAnimation或者CAKeyframeAnimation动画同时执行
对CABasicAnimation进行实例化
// 使用方法animationWithKeyPath" 对CABasicAnimation 进行实例化注册,并指定layer的属性作为关键路径注册
CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
常用关键路径总结
transform.scale 比例转化 @(0.8)
transform.scale.x 宽的比例 @(0.8)
transform.scale.y 高的比例 @(0.8)
transform.rotation.x 围绕x轴旋转 @(M_PI)
transform.rotation.y 围绕y轴旋转 @(M_PI)
transform.rotation.z 围绕z轴旋转 @(M_PI)
cornerRadius 圆角的设置 @(50)
backgroundColor 背景颜色的变化 (id)[UIColor purpleColor].CGColor
bounds 大小,中心不变 [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
position 位置(中心点的改变) [NSValue valueWithCGPoint:CGPointMake(300, 300)];
contents 内容,比如UIImageView的图片 imageAnima.toValue = (id)[UIImage imageNamed:@"to"].CGImage;
opacity 透明度 @(0.7)
contentsRect.size.width 横向拉伸缩放 @(0.4)最好是0~1之间的
//折线图 会用到 strokeStart strokeEnd
strokeStart 动画的fromValue = 0,toValue = 1
表示从路径的0位置画到1 怎么画是按照清除开始的位置也就是清除0 一直清除到1 效果就是一条路径慢慢的消失
trokeStart 动画的fro