import UIKit
 
public class LikeView: UIView {
 
 // 紅色愛(ài)心視圖
 fileprivate var likeImageView = UIImageView()
 // 白色愛(ài)心視圖
 fileprivate var unLikeImageView = UIImageView()
 // true: 點(diǎn)贊， false：取消點(diǎn)贊
 fileprivate var isLike: Bool = false
 // 動(dòng)畫(huà)時(shí)長(zhǎng)，可設(shè)置
 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() {
 // 添加白色愛(ài)心視圖
 unLikeImageView.frame = CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height)
 unLikeImageView.image = UIImage(named: "icon_like_before")
 addSubview(unLikeImageView)
 
 // 添加紅色愛(ài)心視圖，并設(shè)置不可看。切記紅色愛(ài)心在在白色愛(ài)心的上面。
 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)
 
 // 添加單擊手勢(shì)
 let tap = UITapGestureRecognizer(target: self, action: #selector(tapLikeAction))
 self.addGestureRecognizer(tap)
 }
 
 // 點(diǎn)擊事件
 @objc fileprivate func tapLikeAction() {
 // 點(diǎn)擊的時(shí)候停止交互，以免反復(fù)點(diǎn)擊。
 self.isUserInteractionEnabled = false
 isLike = !isLike
 
 // 點(diǎn)贊
 if isLike {
 // 設(shè)置紅色愛(ài)心不可見(jiàn)
 likeImageView.alpha = 0
 
 // 將紅色愛(ài)心縮小至原來(lái)0.2倍。
 self.likeImageView.transform = CGAffineTransform(scaleX: 0.2, y: 0.2)
 
 /* 添加動(dòng)畫(huà), 使白色愛(ài)心變小，紅色愛(ài)心變大，此過(guò)程占用全部動(dòng)畫(huà)時(shí)長(zhǎng)。*/
 
 UIView.animate(withDuration: duration * 0.3, delay: 0, options: .curveEaseInOut) { [weak self] in
 // 將白色愛(ài)心逐漸變小至0.2倍，
 self?.unLikeImageView.transform = CGAffineTransform(scaleX: 0.2, y: 0.2)
 } completion: { [weak self] (finished) in
 // 設(shè)置紅色愛(ài)心可見(jiàn)，此時(shí)是0.2倍大小。
 self?.likeImageView.alpha = 1
 let duration = self?.duration ?? 0.5
 // 白色愛(ài)心變小后，繼續(xù)操作紅色愛(ài)心
 UIView.animate(withDuration: duration * 0.7, delay: 0.1, usingSpringWithDamping: 0.6, initialSpringVelocity: 0.8, options: .curveEaseInOut) {
  // 將紅色愛(ài)心恢復(fù)原大小
  self?.likeImageView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
 } completion: { (finished) in
  // 紅色愛(ài)心變大后，恢復(fù)白色愛(ài)心的尺寸，開(kāi)啟用戶交互。
  self?.unLikeImageView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
  self?.isUserInteractionEnabled = true
 }
 }
 
 //***************** 以下是圓環(huán)動(dòng)畫(huà)，在紅色愛(ài)心變大的時(shí)候執(zhí)行。******************//
 
 // 小圓環(huán)路徑
 let circleStartPath = UIBezierPath(arcCenter: likeImageView.layer.position, radius: self.bounds.size.width / 6, startAngle: 0, endAngle: CGFloat(2*Double.pi), clockwise: true)
 
 // 大圓環(huán)路徑
 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)
 
 // 創(chuàng)建圓環(huán)圖層，用于顯示圓環(huán)。
 let circleLayer = CAShapeLayer()
 circleLayer.strokeColor = UIColor.red.cgColor
 circleLayer.fillColor = UIColor.clear.cgColor
 self.layer.insertSublayer(circleLayer, below: self.likeImageView.layer)
 
 // 計(jì)算圓環(huán)圖層的偏移時(shí)間
 var currentTimeInSuper = self.layer.convertTime(CACurrentMediaTime(), from: nil)
 var currentTimeLocal = circleLayer.convertTime(currentTimeInSuper, from: self.layer)
 
 // 設(shè)置圓環(huán)動(dòng)畫(huà)組執(zhí)行時(shí)間
 let circleGroupDuration = duration * 0.5
 
 // 圓環(huán)動(dòng)畫(huà)組
 let circleGroup = CAAnimationGroup()
 circleGroup.duration = circleGroupDuration
 // 圓環(huán)動(dòng)畫(huà)組開(kāi)始時(shí)間，此開(kāi)始時(shí)間正好是白色愛(ài)心變小后，紅色愛(ài)心開(kāi)始變大時(shí)。
 circleGroup.beginTime = currentTimeLocal + duration * 0.3
 
 // 設(shè)置圓環(huán)路徑變化動(dòng)畫(huà)
 let circlePathAnimation = CABasicAnimation(keyPath: "path")
 circlePathAnimation.fromValue = circleStartPath.cgPath
 circlePathAnimation.toValue = circleEndPath.cgPath
 
 // 設(shè)置圓環(huán)寬度變化動(dòng)畫(huà)，先變大，再變小。
 let circleLineWidthAnimation = CAKeyframeAnimation(keyPath: "lineWidth")
 circleLineWidthAnimation.values = [1.0, 4.0, 0.3]
 circleLineWidthAnimation.keyTimes = [0.0, 0.7, 0.9]
 
 // 將圓環(huán)的兩個(gè)動(dòng)畫(huà)添加到動(dòng)畫(huà)組。
 circleGroup.animations = [circlePathAnimation, circleLineWidthAnimation]
 
 // 將動(dòng)畫(huà)添加到圓環(huán)圖層。
 circleLayer.add(circleGroup, forKey: nil)
 //**********************************************************************//
 
 //***************** 以下是周圍6個(gè)三角形放射動(dòng)畫(huà)，在紅色愛(ài)心變大的時(shí)候執(zhí)行。******************//
 // 循環(huán)創(chuàng)建三角形圖層，并添加動(dòng)畫(huà)效果
 for i in 0..<6 {
 // 三角形的高
 let height = self.bounds.size.height / 2 + 12
 // 三角形底邊長(zhǎng)
 let width = self.bounds.size.width / 10
 
 // 繪制一個(gè)起始三角形路徑
 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()
 
 // 繪制一個(gè)完全展開(kāi)的三角形路徑
 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()
 
 // 繪制一個(gè)終了三角形路徑
 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()
 // 設(shè)置圖層中心位置，很重要。
 shapeLayer.position = self.likeImageView.layer.position
 shapeLayer.fillColor = UIColor.red.cgColor
 // 將圖層進(jìn)行旋轉(zhuǎn)。
 shapeLayer.transform = CATransform3DMakeRotation(CGFloat(Double.pi/3) * CGFloat(i), 0, 0, 1)
 
 self.layer.insertSublayer(shapeLayer, below: circleLayer)
 
 // 計(jì)算三角形圖層的偏移時(shí)間
 currentTimeInSuper = self.layer.convertTime(CACurrentMediaTime(), from: nil)
 currentTimeLocal = shapeLayer.convertTime(currentTimeInSuper, from: self.layer)
 
 // 設(shè)置三角形的動(dòng)畫(huà)，由小變大再變小。
 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 {
 // 取消點(diǎn)贊
 // 1. 將紅色愛(ài)心逐漸縮小至原來(lái)的0.1倍，然后設(shè)置為不可見(jiàn)并恢復(fù)原尺寸大小。
 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
 }
 }
 }
}

class ViewController: UIViewController {
 
 override func viewDidLoad() {
 super.viewDidLoad()
 view.backgroundColor = UIColor.black
 // 設(shè)置一個(gè)0.5秒的動(dòng)畫(huà)
 let likeView1 = LikeView(frame: CGRect(x: 110, y: 300, width: 50, height: 50))
 likeView1.duration = 0.5
 self.view.addSubview(likeView1)
 
 // 設(shè)置一個(gè)10秒的動(dòng)畫(huà)
 let likeView2 = LikeView(frame: CGRect(x: 240, y: 300, width: 50, height: 50))
 likeView2.duration = 10
 self.view.addSubview(likeView2)
 }
 
}