就2小时教会你抽丝剥茧CAAnimation核心动画之精美的下载动画

闲来无事,狂进了materialup网站,不经意间瞅见一个下载的小动画,觉得很是有趣.于是,我就它给实现一下~

11download_icon

设计灵感

设计此效果的作者 Nick;
12download

开始之前你需要了解的

先上一张CAAnimation层次图:
13caanimation

图上只是一些类的常用属性,后边更多代码会讲到.

怎样分解动画

关于分解gif,其实用mac 预览 开发gif文件,就可以看到所有帧的图片.
14fenjie_download

选取其中几张动画节点的图片存好备用.比如:
15download1
16download2
17download3
18download4
19download5

考虑到适配问题service类里已经提取好了.

怎样连贯动画

连贯动画是展示你做的效果流畅不流畅,看着舒服不舒服的能力.其实我是也是尝试很多遍,让很多人看了这个效果,有说别扭的咱就改,咋顺咋来.所以让动画连贯起来尤为重要.

第一,就是要动画节点要选准确,定位好动画与动画的衔接处.
第二,让动画结束时,恢复自然状态,而不是默认状态.尽量不要有太大的差异和不规整的地方
第三,使用组合动画,掐好时间节点.

简单的就说就说这么多,下面我们开始演练代码~~

代码实现

基本实现想法

1.自定义UIControl类,因为它本身就是UIView子类,做点击事件的View再好不过.(另一种方式用block点击回调)
2.点击区域是否在圆内判断
3.两个CAShapeLayer圆环+(一个CAShapeLayer箭头和CAShapeLayer竖线)组合成箭头+label
4.一个service类管理创建所用到的path和animation

service 类

service属性

service方法

service key

service 比例系数

download 类

属性

所有方法预览

20download_all

方法比较多,在这不一一展示了,有感兴趣的童鞋可以直接去github下载,记得点个星星哦~~~😜

调用

添加事件

或者block回调

这里模拟网络请求数据

最终效果

现实与理想还是有些差距,希望不是很大,在此分享一下自己研究的经验,有任何问题都可以Issues我,

21download_animation

1 3 收藏 评论

关于作者:乔同X

http://qiaotongxin.cc 个人主页 · 我的文章 · 1

可能感兴趣的话题



直接登录
跳到底部
返回顶部