前一段时间帮朋友写的一个这样的动画。大概效果如图所示,一个类似心电图的动画。该动画是是在以前图表动画的基础上做了适当的修改。先上代码传送门github。我以前的同事已经把大部分的代码发布到他的github,下面附上他的传送门。
github
简书
接下来开始逐步讲解实现的步骤。
1.获取绘制上下文,先预设一个参考点为坐标原点
- 先选取一个点为参考点,获取当前点的坐标,用来接下来计算 X 轴和 Y 轴上刻度的坐标(此处选区的上图的(0,1)作为坐标参考点,获取该点在当前绘制上下文的坐标,然后就可以愉快的计算出每一个刻度的坐标了)。
2.绘制 X 轴和 Y 轴线段以及平行 X 轴的引导虚线。
3.转值数组为点坐标数组
- 由于我们的数据源全是值,并不能直接应用到视图中,所以我们就需要根据对应的x、y轴去计算,转化为点坐标数组,就又可以去愉快的去绘制路径了。
4.执行绘制动画
- UIBezierPath 绘制线段
- UIBezierPath 和 CAShapeLayer 关联
- 把 CAShapeLayer 和 CABasicAnimation 关联 组成动画
注意事项
由于动画的实现过程是动画的重复创建与销毁,我们需要把 shapeLayer 存放到一个数组里面,在下次创建的时候,释放这些绘制的 shapeLayer。防止造成内存泄漏。
如需查看实现代码,请点击这里,本文不再粘贴代码了,我在代码里面加了详细的注释。