QuartzCode介绍

QuartzCode一款快速，轻量，强大的动画工具，可快速得到原生的ObjC/Siwft代码。�

这是QuartzCode实现的动画效果：

软件布局，如下图：

QuartzCode

更多介绍可以到官网查阅：QuartzCode

QuartzCode实践

这是本次教程要实现的动画效果，这个图是在Google上扒的，已无法知道出处。

解析动画

下载.gif,用预览打开，找出动画的关键帧。这个比较简单就没什么好讲的。贴几张关键帧的照片就可以了。

第一帧

动画开始的第一帧
，由一个背景圆和中间的icon组成。

这一帧进度条开始运动，进度条运动的时候并带旋转。同时进度条背景开始显现。

进度条显示完之后，进度条背景和进度条逐渐消失。中间的iCon消失，勾开始显现，圆的背景色逐渐改变为橙色。

最后一帧效果

开始动手

创建视图，如下：

• progress_background对应进度条背景
• background对应中间的大圆
• progress_line对应滚动的进度条
• left_path对应勾的左边
• right_path对应勾的右边
• cloud_icon对应云图标

这几个视图很好创建，无非就是调位置和颜色。

需要的注意的progress_background和progress_line的默认透明度设置为0，在动画中添加透明度，达到渐显的效果。

将left_path和right_path和progress_line的start和end属性设置为1,1的stroke属性中的start和end属性设置为0,0或1,1，以保证勾并没有绘制，后面添加动画的时候再绘制。

添加动画

所有的动画和时间轴预览

Progress_background动画设置

为Progress_background动画配置添加Opacity属性。

如图所示有1，2，3，4四个节点。1节点的value值设置为0，2节点的value值设置为1。这样渐显的效果就有了。3节点设置为1保持不变，4节点设置为0，以达到渐隐的效果。

progress_line动画设置

这个动画只有进度条稍微复杂一点。进度条所有动画预览，下图：

第一步设置Stroke start属性，From Value为第一个节点，To Value为第二个节点。时间可以自己调整。这样进度条顺时针旋转的动画就完成了。

第二步设置Transform的To value节点，设置旋转360度旋转。

其它的动画属性，原理类似，就不一一列举了。最后导出代码，在模拟器的运行，不知道为什么在100%尺寸的模拟器上会有卡顿现象，但是我用真机和50%尺寸的模拟器就不会卡顿，如有知道原因的小伙伴，请留言。最后效果图如下：

我已经把QuartzCode的源文件和导出的代码放到了Github上，如果这篇教程对你有帮助，就麻烦赏颗星吧！！！ -_^