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. 全部代码

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