Write in the first
iOS 动画主要是指 Core Animation 框架
。官方使用文档地址为: Core Animation Guide。
Core Animation 是iOS和macOS平台上负责图形渲染与动画的基础框架。Core Animation 可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作。你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用 Core Animation 的动画效果。
Core Animation 将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加速图形渲染的速度。|
这种自动化的图形加速技术让动画拥有更高的帧率并且显示效果更加平滑,不会加重CPU的负担而影响程序的运行速度。
本篇文章主要从【iOS动画 Core Animation】学习总结。
在「时间 & 知识 」有限内,总结的文章难免有「未全、不足 」的地方,还望各位好友指出,以提高文章质量。
目录:
- 系统自带的 animationImages
- UIView代码块加Block
- UIView [begin commit]模式
- 使用CoreAnimation中的类
1.CATransition 转场动画
1.CATransaction动画事务
2.CABasicAnimation 基础动画
2.CASpringAnimation 弹簧动画
3.CAKeyframeAnimation 关键帧动画
4.CAAnimationGroup 动画组
5.AnimationWithKeyPath的值- 物理动效(重力、碰撞、吸附、推力、关联)
1.UICollisionBehavior碰撞
2.UISnapBehavior吸附
3.UIPushBehavior推力
4.UIAttachmentBehavior关联- 粒子系统
- facebook pop动画
iOS动画调用方式
1.系统自带的 animationImages
|
|
2.UIView代码块加Block
|
|
3.UIView [begin commit]模式
|
|
4.使用CoreAnimation中的类
1.CATransition 转场动画
CATransition属性 | 描述 |
---|---|
type | 过渡的类型 |
subType | 过渡的方向 |
startProgress | 动画起点(在整体动画的百分比) |
endProgress | 动画终点(在整体动画的百分比) |
addAnimation: forKey: | 把转场动画添加到layer上 |
创建步骤
1.创建动画对象
2.设置转场类型
3.给图层添加动画
示例代码:
效果:
2.CATransition转场动画过渡类型
在这里我就不用图片了,我就劳动一下吧(图片的不好复制不是吗),奉上转场效果 api
类型字符串 | 效果说明 | 关键字 | 方向 |
---|---|---|---|
fade | 交叉淡化过渡 | YES | |
push | 新视图把旧视图推出去 | YES | |
moveIn | 新视图移到旧视图上面 | YES | |
reveal | 将旧视图移开,显示下面的新视图 | YES | |
cube | 立方体翻滚效果 | ||
oglFlip | 上下左右翻滚效果 | ||
suckEffect | 收缩效果,如一块布被抽走 | NO | |
rippleEffect | 水滴效果 | NO | |
pageCurl | 向上翻页效果 | ||
pageUnCurl | 向下翻页效果 | ||
cameraIrisHollowOpen | 相机镜头打开效果 | NO | |
cameraIrisHollowClose | 相机镜头关闭效果 | NO |
动画常用属性 | 描述 |
---|---|
rotation.x | 设置为一个NSNumber对象的值是旋转,弧度,x轴。 |
duration | 动画的持续时间 |
beginTime | 动画的开始时间 |
repeatCount | 动画的重复次数 |
autoreverses | 执行的动画按照原动画返回执行 |
timingFunction | 控制动画的显示节奏 |
Linear 匀速,EaseIn 先慢后快,EaseOut 先快后慢,EaseInEaseOut 先慢后快再慢,Default 默认中间比较快 |
3.CATransaction动画事务
事务(CATransaction
)负责协调多个动画原子更新的显示操作,是动画里面的一个基本单元,动画的产生必然伴随着layer的Animatable属性的变化,而layer属性的变化必须属于某一个事务。
因此 ,核心动画依赖于事务。
可以通过事物关闭隐式动画:
4.CABasicAnimation 基础动画
CABasicAnimation重要属性 | 描述 |
---|---|
fromValue | keyPath对应的初始值 |
toValue | keyPath对应的结束值 |
removedOnCompletion | 动画完成时,是否删除动画 |
fillMode | 设置让动画效果最后执行状态 |
基础动画创建步骤
1、初始化动画并设置动画属性
2、设置动画属性初始值(可以省略)、结束值以及其他动画属性
3、给图层添加动画
我们先看下面这个移动动画实例:
效果:
CASpringAnimation 弹簧动画
属性 | 描述 |
---|---|
mass | 质量,影响图层运动时的弹簧惯性,质量越大,弹簧拉伸和压缩的幅度越大 |
stiffnes | 刚度系数(劲度系数/弹性系数),刚度系数越大,形变产生的力就越大,运动越快 |
damping | 阻尼系数,阻止弹簧伸缩的系数,阻尼系数越大,停止越快 |
initivelocity | 初始速率,动画视图的初始速度大小;速率为正数时,速度方向与运动方向一致,速率为负数时,速度方向与运动方向相反 |
settingDuration | 结算时间(根据动画相关参数估算弹簧开始运动到停止的时间,动画设置的时间最好根据此时间来设置) |
CASpringAnimation
和UIView的SpringAnimation
对比:
CASpringAnimation 可以设置更多弹簧动画效果的属性,可以实现更复杂的弹簧效果,可以和其他动画组合
UIView的SpringAnimation实际上就是通过CASpringAnimation来实现的。
代码示例:
效果:
3.CAKeyframeAnimation 关键帧动画
可以让我们在更细的粒度上控制动画的行为,关键帧动画需要指定几个关键的点,从而让动画沿着这些点运动,这几个点就称之为 关键帧
CAKeyframeAnimation属性 | 描述 |
---|---|
values | 指定关键点的值 |
path | 可以设置一个CGPathRef / CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略. |
keyTimes | 是走到某一个关键点花费的时间百分比(0~1),keyTimes中的每一个时间值都对应values中的每一帧(两个数组的个数必须一致),当keyTimes没有设置的时候,各个关键帧的时间是平分的。 |
通过 设置不同的属性值values 动画 | 关键帧动画创建第一种方式 |
通过 绘制路径path 动画 | 关键帧动画创建第二种方式 |
代码示例:
代码示例:
效果:
4.CAAnimationGroup 动画组
CAAnimationGroup属性 | 描述 |
---|---|
animations | 用来保存一组动画对象的NSArray |
CFTimeInterval | 时间间隔 |
代码示例:
效果:
5.AnimationWithKeyPath的值
在这里我就不用图片了,我就劳动一下吧(图片的不好复制不是吗),福利奉上转场效果 key paths
Transform field value key paths
Field Key Path | Description |
---|---|
rotation.x | 设置为一个NSNumber对象的值是旋转,弧度,x轴。 |
rotation.y | 设置为一个NSNumber对象的值是旋转,弧度,y轴。 |
rotation.z | 设置为一个NSNumber对象的值是旋转,弧度,z轴。 |
rotation | 设置为一个NSNumber对象的值是旋转,弧度,z轴。这个字段是一样设置旋转。z域。 |
scale.x | 设置为一个NSNumber对象的值是x轴的比例因子。 |
scale.y | 设置为一个NSNumber对象的值是y轴的比例因子。 |
scale.z | 设置为一个NSNumber对象的值是z轴的比例因子。 |
scale | 设置为一个NSNumber对象的值是所有三个规模因素的平均值。 |
translation.x | 设置为一个NSNumber对象的值是沿着x轴。 |
translation.y | 设置为一个NSNumber对象的值沿y轴。 |
translation.z | 设置为一个NSNumber对象的值沿z轴。 |
translation | 设置为一个NSValue对象包含一个NSSize或CGSize数据类型。数据类型表示将在x和y轴。 |
核心动画综合案例
5.物理动效(重力、碰撞、吸附、推力、关联)
|
|
以下示例,我们就直接来代码,看效果了,中间会有部分解释;
1.UICollisionBehavior碰撞,示例:模仿重力 + 碰撞 的行为
|
|
效果:
2.UISnapBehavior吸附,示例:模仿吸附 + 重力 的行为
|
|
效果:
3.UIPushBehavior推力,示例:模仿推力 + 碰撞 的行为
|
|
效果:
4.UIAttachmentBehavior关联,示例:模仿推力 + 碰撞 的行为
|
|
效果:
6.粒子系统
|
|
7.facebook pop动画
|
|
pop使用:
期待
- 如果在阅读过程中遇到 error || new ideas,希望你能 messages 我,我会及时改正谢谢。
- 点击右上角的 喜欢 和 订阅Rss 按钮,可以收藏本仓库,并在 Demo 更新时收到邮件通知。