仿抖音點贊按鈕

每乙個圖形，都是通過一點點拼接到一起的，而每乙個動畫亦然，只需要將動畫和圖形進行拆解，就不難了。

模仿下抖音點贊按鈕的動畫效果。

拆解一下動畫效果。

1、通過uibezierpath實現愛心的上半部分。

let rect = cgrect(x: 10, y: 10, width: frame.width - 20, height: frame.height - 20)

//距離左右兩邊的距離
let padding: cgfloat = 4
let radius = (rect.size.width - 2 * padding) / 2.0 / (cos(cgfloat.pi / 4) + 1)
let heartpath = uibezierpath()
//左圓的圓心
let leftcurvecenter = cgpoint(x: padding + radius, y: rect.size.height / 2.8)
//畫左圓
heartpath.addarc(withcenter: leftcurvecenter, radius: radius,
startangle: cgfloat.pi, endangle: cgfloat.pi * -0.25,
clockwise: true)
//右圓圓心
let rightcurvecenter = cgpoint(x: rect.width - padding - radius, y: leftcurvecenter.y)
//畫右圓
heartpath.addarc(withcenter: rightcurvecenter, radius: radius,
startangle: cgfloat.pi * -0.75, endangle: 0,
clockwise: true)
let shapelayer = cashapelayer()
shapelayer.path = heartpath.cgpath
shapelayer.frame = rect
複製**

愛心的上半部分是由兩個3/4圓， 圓半徑的計算公式：(width - padding * 2) / 2 = radius + radius * cos45°，可得出radius = (width - padding * 2) / 2 / (cos45° + 1)，此公式是根據兩個半圓交點的切線呈90°。

2、通過uibezierpath完成愛心的下半部分。其中愛心尖的位置，為整個uibutton的底部中心點

//愛心尖的座標點

let apexpoint = cgpoint(x: rect.width / 2, y: rect.height - padding)
//畫右半邊曲線
heartpath.addquadcurve(to: apexpoint,
controlpoint: cgpoint(x: heartpath.currentpoint.x,
y: radius + rect.size.height / 2.8))
//畫左半邊曲線
heartpath.addquadcurve(to: cgpoint(x: padding, y: leftcurvecenter.y),
controlpoint: cgpoint(x: padding,
y: radius + rect.size.height / 2.8))
複製**

3、此處採用兩個layer層，乙個為白色的愛心，乙個為紅色的愛心。通過白色愛心隱藏，紅色愛心逐漸變大，並伴隨左右旋轉。放大的動畫執行完，旋轉的動畫還未執行完，所以放大的動畫時間相對短一些

//放大動畫

let animation = cabasicanimation.init(keypath: "transform.scale")
animation.duration = 1 * 0.8
animation.fromvalue = 0.1
animation.tovalue = 1
//旋轉動畫
let keyanimation = cakeyframeanimation.init(keypath: "transform.rotation.z")
keyanimation.values = [cgfloat.pi * -0.25, 0, cgfloat.pi * 0.1, cgfloat.pi * -0.05, 0]
keyanimation.timingfunction = camediatimingfunction(name: camediatimingfunctionname.easeout)
keyanimation.duration = 1
//合成動畫組
let groupanimation = caanimationgroup()
groupanimation.duration = 1
groupanimation.delegate = self
groupanimation.animations = [keyanimation, animation]
redheartlayer.ishidden = false
hollowheartlayer.ishidden = true
redheartlayer.add(groupanimation, forkey: nil)
複製**

4、顯示白色的愛心，紅色愛心向左旋轉45°，並且伴隨著縮小，其中旋轉動畫的時間比縮小動畫的時間短

//縮小動畫

let animation = cabasicanimation(keypath: "transform.scale")
animation.duration = 1
animation.fromvalue = 1
animation.tovalue = 0
//旋轉動畫
let keyanimation = cakeyframeanimation.init(keypath: "transform.rotation.z")
keyanimation.values = [0, cgfloat.pi * -0.25]
keyanimation.fillmode = .forwards
keyanimation.duration = 1 * 0.4
let groupanimation = caanimationgroup()
//合成動畫組
groupanimation.duration = 1
groupanimation.delegate = self
groupanimation.animations = [keyanimation, animation]
groupanimation.fillmode = .forwards
groupanimation.isremovedoncompletion = false
hollowheartlayer.ishidden = false
redheartlayer.add(groupanimation, forkey: nil)
複製**

4、六條扇形

let fancenter = cgpoint(x: frame.width / 2, y: frame.height / 2)

for i in 0..<6 
複製**

5、扇形擴散動畫通過中心點位置位移到扇形圓弧位置，以達到擴散的效果

let fananimation = cabasicanimation(keypath: "position")

fananimation.duration = animationduration
fananimation.fromvalue = cgpoint(x: frame.width / 2, y: frame.height / 2)
fananimation.tovalue = path.currentpoint
fananimation.isremovedoncompletion = false
fananimation.delegate = self
fananimation.fillmode = .both
fanlayer.add(lineanimation, forkey: nil)
複製**

6、看著效果有問題，需要給uibutton加上蒙層，以達到扇形圖層逐漸消失的感覺，並且在動畫結束的時候將扇形圖層移除

//移除扇形圖層

func animationdidstop(_ anim: caanimation, finished flag: bool) 
animationlayers.removeall() } 
//新增蒙層
fileprivate func configurationmasklayer
() 複製**

7、將愛心動畫和扇形動畫合在一起

下面附上 完整demo

如果有更好的方法歡迎討論。

仿抖音點贊效果

玩過抖音的人應該都知道抖音的點讚效果挺酷炫的，而作為碼農我們一定想知道它是怎麼實現的。先上效果圖 實現原理非常的簡單，直接上 created by csc on 2018 6 11.information 仿抖音點贊功能 class love context context relativelayo...

React Native 仿抖音點贊特效

前言 任何一款應用無疑都或多或少的使用到動畫效果，它對於提公升使用者體驗有著無比重要的作用。react native同樣提供了豐富的動畫api供開發者呼叫，而對於此部分知識的掌握無疑是rn高階的必經之路，本文通過案例帶大家實踐掌握animated art等動畫及繪圖知識。animatedart手勢系...

雙擊飛小心心 仿抖音點贊

自定義手勢識別 class myongesturelistener extends gesturedetector.ongesturelistener else else y1 int y if mlove null mlove.addloveview x1,y1 new乙個gesturedetec...