前段时间有部分朋友一致咨询关于QQ空间页面点赞动画的实现,最近难得的空闲时间将iOS的动画整理了下,简单实现了点赞的发散动画,在这里稍作总结.
一、首先展示效果图片
1
2
3
4
代码实现
4>其他属性:设置时长,延迟,曲线,重复次数,单独监听动画开始和结束的方法
5>特点:可以实现翻转,旋转,偏移,翻页,缩放,转场等高级动画效果,但是操作稍微麻烦!
Block动画
1>鉴于首尾式动画的操作稍复杂,block将动画的设置属性和操作过程一步封装回调操作简便
2>block动画的操作步骤 直接调用[UIView animationwith…..] 方法即可
3>简单实现分大概4个方法参数由少到多;演示参数较多的方法
代码演示
参数介绍: duration：动画的持续时间
delay：动画延迟delay秒后开始
dampingRatio:动画的振幅 取值范围0-1
velocity:动画的速度
options：动画的节奏控制选项
animations：将动画代码放在这个block中
completion：监听动画结束后block
通过振幅可以实现水滴滴答的动画和点赞动画中图案放大原理都是一样的.
1>转场动画
代码演示
参数介绍: duration：动画的持续时间
delay：动画延迟delay秒后开始
options：转场动画的样式
animations：切换图片的代码放在这个block中
completion：监听动画结束后block
相对核心动画的转场动画来说系统的转场样式比较少,不够丰富
核心动画 Core Animation
谈到核心动画CAAnimation第一点必须明确的是CAAnimtion是直接作用于UIView的内部CALayer上的, Core Animation负责所有的平移、旋转,缩放以及所有的iOS动画效果,操作简单,节省CPU,原因是所有的动画执行都是放在后台操作的不会阻塞主线程;从图形处理方面的动画来看,drawRect的多次重绘会占用主线程资源,消耗更多的CPU,不及CAAnimation的处理效果
CAAnimation的动画分类
分类示意图
从图中可以看出在CAAnimation的抽象类的下面由各个不同功能的子类来实现不同的动画效果,当然CAPropertyAnimation也是个抽象类. 主要分为:基本动画CABasicAnimation,关键帧动画CAKeyframeAnimation,组动画CAAnimationGroup,转场动画CATransition,
CAAnimation的操作步骤:
1>创建动画对象
2>设置动画相关属性
3>添加动画对象到对应的layer上
4>想删除已经播放的动画可以使用:removeAnimationForKey:
代码 演示
CAAnimation的动画特点:
1>动画改变的不是控件的真实位置, 如果动画结束需要真实位置发生改变需要手动实现
2>动画播放轨迹每次都会自动返回
a)组织动画返回的方法
ban.removedOnCompletion = NO;
ban.fillMode = kCAFillModeForwards
CAAnimation四个子动画的特点:
1>基本动画CABasicAnimation:只能实现旋转,缩放,平移动画,2D,3D均可;缺点每次只能执行一个动画,不能多个同时,或者一次性实现多个动画轨迹.
2>关键帧动画CAKeyframeAnimation:通过values,path两个属性可以一次性实现多帧动画,这样指定特定的形状, 贝塞尔曲线动画实现特别方便.
3>组动画CAAnimationGroup:可以同时将多个动画组合同时播放.
4>转场动画CATransition:相对于UIView的转场 样式丰富.
QQ点赞动画的实现原理:
我们通过对系统动画的剖析,接下来分析点赞动画的实现过程:
1>首先从动画的复杂度来看 UView的动画实现困难,CAAnimation中关键帧动画CAKeyframeAnimation
2>接下来针对环状绘制动画来说,规则不固定 需要结合UIBezierPath和CALayer的子类CAShapeLayer结合实现;因为CALayer默认是方形的
a)图片本身的缩放动画原理改变关键帧动画的values的取值,一大一小就可以实现
b)
代码演示
c)圆环的变化原理将一个圆环shapeLayer的path属性的半径从1到对应的比例变化,放到关键帧动画中实现播放
d)
代码示意
3>再次周围扩散动画,小圆点由大变小在到无,也是需要CAShapeLayer加核心动画来播放,根据需求的圆点个数使用循环添加shapelayer,根据个数计算出每个圆点的动画和角度位置实现动画效果
a)
代码示意
4>最后的闪烁动画,需要使用定时器和核心动画实现
a)获取每个小圆点
b)创建CADisplayLink
c)设置link的刷帧频率来改变圆点的色彩变化实现闪烁
5>每个动画阶段执行结束需要移除动画,避免多个核心动画的干扰
6>link在不使用的时候需要考虑CPU消耗问题,需要销毁
,
