iOS - 基础动画&转场动画
2018-05-29 本文已影响24人
MichaelLedger
- 基础动画
1、基础动画的属性详解
注：Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程.
| 属性 | 解读 |
|---|---|
| Autoreverses | 设定这个属性为 YES 时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到开始的值，过渡平滑 |
| Duration | 设定开始值到结束值花费的时间。期间会被速度的属性所影响 |
| RemovedOnCompletion | 这个属性默认为 YES,在指定的时间段完成后,动画就自动的从层上移除了。 |
| FillMode | 这个属性一般和 RemovedOnCompletion 配合使用，保持动画状态。其中kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态.此时将RemovedOnCompletion设为NO |
| Speed | 默认的值为 1.0.如果你改变这个值为 2.0,动画会用 2 倍的速度播放。这样的影响就是使持续时间减半。如果你指定的持续时间为 6 秒,速度为 2.0,动画就会播放 3 秒钟即一半的持续时间。 |
| RepeatCount | 默认的是 0,动画只会播放一次。如果指定一个无限大的重复次数,使用 MAXFLOAT 。这个不应该和 repeatDration 属性一块使用 |
| RepeatDuration | 这个属性指定了动画应该被重复多久。动画会一直重复,直到设定的时间用完。同上它不应该和 repeatCount 一起使用 |
| FromValue | 设置动画的初始值 |
| ToValue | 设置动画的到达值 |
| TimingFunction | 控制动画运行的节奏. kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉 kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开 kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地 kCAMediaTimingFunctionEaseInEaseOut（渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。这个是默认的动画行为。 |
| BeginTime | 可以用来设置动画延迟执行时间，若想延迟1s，就设置为CACurrentMediaTime()+1，CACurrentMediaTime()为图层的当前时间 |
2、基础动画的keyPath
| keyPath | 解读 | 值类型 |
|---|---|---|
| transform.rotation | 默认围绕z轴 | M_PI*n |
| transform.rotation.x | 旋转动画(翻转，沿着X轴) | M_PI*n |
| transform.rotation.y | 旋转动画(翻转，沿着Y轴) | M_PI*n |
| transform.rotation.z | 旋转动画(翻转，沿着Z轴) | M_PI*n |
| transform.scale | 所有方向缩放 | 0~n |
| transform.scale.x | x方向缩放 | 0~n |
| transform.scale.y | y方向缩放 | 0~n |
| transform.scale.z | z方向缩放 | 0~n |
| transform.translation | 移动到指定位置 | 任意数值 |
| transform.translation.x | 横向移动（沿着X轴） | 任意数值 |
| transform.translation.y | 纵向移动（沿着Y轴） | 任意数值 |
| transform.translation.z | 竖直移动（沿着Z轴） | 任意数值 |
| opacity | 透明度 | Float [0,1] |
| backgroundColor | 背景颜色 | CGColor |
| cornerRadius | 渐变圆角 | 任意数值 |
| borderWidth | 边框宽度 | 任意数值 |
| bounds | 变大与位置 | CGRect |
| contents | 内容(图片) | CGImage |
| contentsRect | 可视内容 | CGRect : Defaults to the unit rectangle [0 0 1 1] |
| hidden | 是否隐藏 | BOOL |
| position | 移动位置 | CGPoint |
| shadowColor | 阴影颜色 | CGColor : Defaults to opaque black |
| shadowOffset | 阴影大小 | CGSize : Defaults to (0, -3) |
| shadowRadius | 阴影圆角 | CGFloat : Defaults to 3 |
| shadowOpacity | 阴影透明度 | Float [0,1] : Defaults to 0. |
3、CAShapeLayer的strokeStart和strokeEnd属性
-
keyPath = strokeStart 动画的fromValue = 0，toValue = 1
表示从路径的0位置画到1 怎么画是按照清除开始的位置也就是清除0 一直清除到1 效果就是一条路径慢慢的消失 -
keyPath = strokeStart 动画的fromValue = 1，toValue = 0
表示从路径的1位置画到0 怎么画是按照清除开始的位置也就是1 这样开始的路径是空的（即都被清除掉了）一直清除到0 效果就是一条路径被反方向画出来 -
keyPath = strokeEnd 动画的fromValue = 0，toValue = 1
表示 这里我们分3个点说明动画的顺序 strokeEnd从结尾开始清除 首先整条路径先清除后2/3，接着清除1/3 效果就是正方向画出路径 -
keyPath = strokeEnd 动画的fromValue = 1，toValue = 0
效果就是反方向路径慢慢消失
注释： 动画的0-1（fromValue = 0，toValue = 1） 或1-0 （fromValue = 1，toValue = 0） 表示执行的方向 和路径的范围。
- 转场动画
1、转场动画的type
| type | 解读 | 对应常量 |
|---|---|---|
| fade | 淡入淡出 | kCATransitionFade |
| push | 推挤 | kCATransitionPush |
| reveal | 揭开 | kCATransitionReveal |
| moveIn | 覆盖 | kCATransitionMoveIn |
| cube | 立方体 | 私有API |
| suckEffect | 吮吸 | 私有API |
| oglFlip | 翻转 | 私有API |
| rippleEffect | 波纹 | 私有API |
| pageCurl | 反翻页 | 私有API |
| cameraIrisHollowOpen | 开镜头 | 私有API |
| cameraIrisHollowClose | 关镜头 | 私有API |
2、转场动画的subType
| subtype | 解读 |
|---|---|
| kCATransitionFromRight | 从右转场 |
| kCATransitionFromLeft | 从左转场 |
| kCATransitionFromBottom | 从下转场 |
| kCATransitionFromTop | 从上转场 |
3、转场动画的timingFunction
| timingFunction | 解读 |
|---|---|
| kCAMediaTimingFunctionLinear | 线性,即匀速 |
| kCAMediaTimingFunctionEaseIn | 先慢后快 |
| kCAMediaTimingFunctionEaseOut | 先快后慢 |
| kCAMediaTimingFunctionEaseInEaseOut | 先慢后快再慢 |
| kCAMediaTimingFunctionDefault | 实际效果是动画中间比较快 |
参考：
iOS基础动画的KeyPath取值
IOS Animation-KeyPath值
CAShapeLayer的strokeStart和strokeEnd属性
