iOS实现抖音点赞动画效果

本文实例为大家分享了ios实现抖音点赞动画的具体代码，供大家参考，具体内容如下

1. 概述

最近看到抖音点赞爱心的动画效果比较好，出于好奇，自己也研究仿照动画效果写了一个，不喜欢的朋友可不要喷我噢！！！

话不多说，先来看一下执行效果。

2. 动画分析

上面的示例效果有点快，现在来看一个慢的，然后在分析动画组成。

这回看清楚了吧，哈哈。

2.1 动画过程分析

咱们就以10秒的点赞动画来分析一下：

点赞的时候：

1、点击的时候，白色爱心逐渐变小到一定程度，然后变成红色爱心。（3秒）
2、红色爱心慢慢变大，最终有个缓冲动画，然后恢复原尺寸。（7秒）
3、在红色爱心变大的时候，有一个红色的圆环逐渐变大，圆环宽度由小变大，再变小消失。（5秒）
4、在红色爱心变大的时候，还有6个环绕爱心的三角形，三角形由小变大，再变小消失。（7秒）
5、注意，2、3、4的动画是在1动画结束后同时执行的，即延迟3秒再执行。

取消点赞的时候：

1、点击后红色爱心逐渐变小。
2、变小后，设置不可见，并恢复原尺寸。

2.2 代码实现原理分析

1、自定义一个uiview，并添加两个uiimageview，分别显示红色爱心和白色爱心，红色爱心在白色爱心上面，并设置红色爱心不可见。
2、给uiview添加单击手势。
3、点击时判断是点赞还是取消点赞，如果是点赞：
4、用两个uiview自带的动画，将白色imageview的transform变小，变小后不可见，然后设置红色imageview的transform变大，变大后白色imageview的transform变回原尺寸。
5、通过贝塞尔曲线和cashapelayer绘制圆环，并给圆环添加动画组caanimationgroup，动画组中添加了一个基础动画cabasicanimation（将圆环从小变大）和一个关键帧动画cakeyframeanimation（将圆环宽度由小变大再变小消失）
6、通过贝塞尔曲线和cashapelayer循环绘制6个三角形，并通过catransform3dmakerotation旋转6个三角形，使其环绕爱心一周。
7、给每个三角形添加一个关键帧动画cakeyframeanimation（将三角形由小变大再变小消失）
8、如果是取消点赞，比较简单，逐渐将红色爱心变小，然后设置不可见，白色爱心自然就显示出来了。
9、在动画执行过程中，关闭用户交互，待动画结束，再打开用户交互。

分析的有些简单，只是提供一种思路，没有什么比看代码更直接的了，来吧！

3. 全部代码

代码中添加了很多的注释，方便理解。

likeview即是自定义的点赞视图，可纯代码创建，也可通过xib创建，同时支持设置动画执行时间duration。

调用的地方：

执行效果：

4. 结束语

代码中主要用到了：uiview基础动画、cgaffinetransform、catransform3d、uibezierpath、cashapelayer、cakeyframeanimation、cabasicanimation、caanimationgroup，另外还有begintime的计算，也算是个小重点了。

以上只是仿照抖音点赞动画实现的功能，代码不多，但也不少，不知道抖音是具体怎么实现的，如果有什么不对的地方，或者可优化的地方，还请路过的朋友多多指点。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。