iOS抖音点赞动画 iOS实现抖音点赞动画效果
Daniel_Coder 人气:01. 概述
最近看到抖音点赞爱心的动画效果比较好，出于好奇，自己也研究仿照动画效果写了一个，不喜欢的朋友可不要喷我噢！！！
话不多说，先来看一下执行效果。
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. 全部代码
代码中添加了很多的注释，方便理解。
import UIKit
public class LikeView: UIView {
// 红色爱心视图
fileprivate var likeImageView = UIImageView()
// 白色爱心视图
fileprivate var unLikeImageView = UIImageView()
// true: 点赞， false：取消点赞
fileprivate var isLike: Bool = false
// 动画时长，可设置
public var duration: CFTimeInterval = 0.5
override init(frame: CGRect) {
super.init(frame: frame)
setupUI()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setupUI()
}
fileprivate func setupUI() {
// 添加白色爱心视图
unLikeImageView.frame = CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height)
unLikeImageView.image = UIImage(named: "icon_like_before")
addSubview(unLikeImageView)
// 添加红色爱心视图，并设置不可看。切记红色爱心在在白色爱心的上面。
likeImageView.frame = CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height)
likeImageView.image = UIImage(named: "icon_like_after")
likeImageView.alpha = 0
addSubview(likeImageView)
// 添加单击手势
let tap = UITapGestureRecognizer(target: self, action: #selector(tapLikeAction))
self.addGestureRecognizer(tap)
}
// 点击事件
@objc fileprivate func tapLikeAction() {
// 点击的时候停止交互，以免反复点击。
self.isUserInteractionEnabled = false
isLike = !isLike
// 点赞
if isLike {
// 设置红色爱心不可见
likeImageView.alpha = 0
// 将红色爱心缩小至原来0.2倍。
self.likeImageView.transform = CGAffineTransform(scaleX: 0.2, y: 0.2)
/* 添加动画, 使白色爱心变小，红色爱心变大，此过程占用全部动画时长。*/
UIView.animate(withDuration: duration * 0.3, delay: 0, options: .curveEaseInOut) { [weak self] in
// 将白色爱心逐渐变小至0.2倍，
self?.unLikeImageView.transform = CGAffineTransform(scaleX: 0.2, y: 0.2)
} completion: { [weak self] (finished) in
// 设置红色爱心可见，此时是0.2倍大小。
self?.likeImageView.alpha = 1
let duration = self?.duration ?? 0.5
// 白色爱心变小后，继续操作红色爱心
UIView.animate(withDuration: duration * 0.7, delay: 0.1, usingSpringWithDamping: 0.6, initialSpringVelocity: 0.8, options: .curveEaseInOut) {
// 将红色爱心恢复原大小
self?.likeImageView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
} completion: { (finished) in
// 红色爱心变大后，恢复白色爱心的尺寸，开启用户交互。
self?.unLikeImageView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
self?.isUserInteractionEnabled = true
}
}
//***************** 以下是圆环动画，在红色爱心变大的时候执行。******************//
// 小圆环路径
let circleStartPath = UIBezierPath(arcCenter: likeImageView.layer.position, radius: self.bounds.size.width / 6, startAngle: 0, endAngle: CGFloat(2*Double.pi), clockwise: true)
// 大圆环路径
let radius = sqrt(powf(Float(self.bounds.size.width), 2) + powf(Float(self.bounds.size.height), 2))/2
let circleEndPath = UIBezierPath(arcCenter: likeImageView.layer.position, radius: CGFloat(radius), startAngle: 0, endAngle: CGFloat(2*Double.pi), clockwise: true)
// 创建圆环图层，用于显示圆环。
let circleLayer = CAShapeLayer()
circleLayer.strokeColor = UIColor.red.cgColor
circleLayer.fillColor = UIColor.clear.cgColor
self.layer.insertSublayer(circleLayer, below: self.likeImageView.layer)
// 计算圆环图层的偏移时间
var currentTimeInSuper = self.layer.convertTime(CACurrentMediaTime(), from: nil)
var currentTimeLocal = circleLayer.convertTime(currentTimeInSuper, from: self.layer)
// 设置圆环动画组执行时间
let circleGroupDuration = duration * 0.5
// 圆环动画组
let circleGroup = CAAnimationGroup()
circleGroup.duration = circleGroupDuration
// 圆环动画组开始时间，此开始时间正好是白色爱心变小后，红色爱心开始变大时。
circleGroup.beginTime = currentTimeLocal + duration * 0.3
// 设置圆环路径变化动画
let circlePathAnimation = CABasicAnimation(keyPath: "path")
circlePathAnimation.fromValue = circleStartPath.cgPath
circlePathAnimation.toValue = circleEndPath.cgPath
// 设置圆环宽度变化动画，先变大，再变小。
let circleLineWidthAnimation = CAKeyframeAnimation(keyPath: "lineWidth")
circleLineWidthAnimation.values = [1.0, 4.0, 0.3]
circleLineWidthAnimation.keyTimes = [0.0, 0.7, 0.9]
// 将圆环的两个动画添加到动画组。
circleGroup.animations = [circlePathAnimation, circleLineWidthAnimation]
// 将动画添加到圆环图层。
circleLayer.add(circleGroup, forKey: nil)
//**********************************************************************//
//***************** 以下是周围6个三角形放射动画，在红色爱心变大的时候执行。******************//
// 循环创建三角形图层，并添加动画效果
for i in 0..<6 {
// 三角形的高
let height = self.bounds.size.height / 2 + 12
// 三角形底边长
let width = self.bounds.size.width / 10
// 绘制一个起始三角形路径
let triangleStartPath = UIBezierPath()
triangleStartPath.move(to: .zero)
triangleStartPath.addLine(to: CGPoint(x: -1, y: -1))
triangleStartPath.addLine(to: CGPoint(x: 1, y: -1))
triangleStartPath.close()
// 绘制一个完全展开的三角形路径
let triangleMiddlePath = UIBezierPath()
triangleMiddlePath.move(to: .zero)
triangleMiddlePath.addLine(to: CGPoint(x: -width/2, y: -height))
triangleMiddlePath.addLine(to: CGPoint(x: width/2, y: -height))
triangleMiddlePath.close()
// 绘制一个终了三角形路径
let triangleEndPath = UIBezierPath()
triangleEndPath.move(to: CGPoint(x: 0, y: -height))
triangleEndPath.addLine(to: CGPoint(x: -width/2, y: -height))
triangleEndPath.addLine(to: CGPoint(x: width/2, y: -height))
triangleEndPath.close()
// 绘制三角形图层
let shapeLayer = CAShapeLayer()
// 设置图层中心位置，很重要。
shapeLayer.position = self.likeImageView.layer.position
shapeLayer.fillColor = UIColor.red.cgColor
// 将图层进行旋转。
shapeLayer.transform = CATransform3DMakeRotation(CGFloat(Double.pi/3) * CGFloat(i), 0, 0, 1)
self.layer.insertSublayer(shapeLayer, below: circleLayer)
// 计算三角形图层的偏移时间
currentTimeInSuper = self.layer.convertTime(CACurrentMediaTime(), from: nil)
currentTimeLocal = shapeLayer.convertTime(currentTimeInSuper, from: self.layer)
// 设置三角形的动画，由小变大再变小。
let trianglePathAnimation = CAKeyframeAnimation(keyPath: "path")
trianglePathAnimation.values = [triangleStartPath.cgPath, triangleMiddlePath.cgPath, triangleEndPath.cgPath]
trianglePathAnimation.keyTimes = [0.0, 0.3, 0.7]
trianglePathAnimation.duration = duration * 0.7
trianglePathAnimation.beginTime = currentTimeLocal + duration * 0.3
shapeLayer.add(trianglePathAnimation, forKey: nil)
}
//**********************************************************************//
}else {
// 取消点赞
// 1. 将红色爱心逐渐缩小至原来的0.1倍，然后设置为不可见并恢复原尺寸大小。
UIView.animate(withDuration: duration * 0.3, delay: 0, options: .curveEaseInOut) { [weak self] in
self?.likeImageView.transform = CGAffineTransform(scaleX: 0.1, y: 0.1)
} completion: { [weak self] (finished) in
self?.likeImageView.alpha = 0
self?.likeImageView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
self?.isUserInteractionEnabled = true
}
}
}
}
LikeView即是自定义的点赞视图，可纯代码创建，也可通过xib创建，同时支持设置动画执行时间duration。
调用的地方：
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.black
// 设置一个0.5秒的动画
let likeView1 = LikeView(frame: CGRect(x: 110, y: 300, width: 50, height: 50))
likeView1.duration = 0.5
self.view.addSubview(likeView1)
// 设置一个10秒的动画
let likeView2 = LikeView(frame: CGRect(x: 240, y: 300, width: 50, height: 50))
likeView2.duration = 10
self.view.addSubview(likeView2)
}
}
执行效果：
4. 结束语
代码中主要用到了：UIView基础动画、CGAffineTransform、CATransform3D、UIBezierPath、CAShapeLayer、CAKeyframeAnimation、CABasicAnimation、CAAnimationGroup，另外还有beginTime的计算，也算是个小重点了。
以上只是仿照抖音点赞动画实现的功能，代码不多，但也不少，不知道抖音是具体怎么实现的，如果有什么不对的地方，或者可优化的地方，还请路过的朋友多多指点。
加载全部内容