前言

今天給大家分享一下抖音的點贊動畫的實現, 廢話不多說上圖

本篇文章主要包含技術點:

• CAShapeLayer和貝賽爾曲線繪製三角形
• 組合動畫的時間技巧

實現原理

首先 我們來詳細分解一下這個動畫

請仔細觀察

我們來看單獨的一個動畫

請仔細觀看 我設定10秒的duration 以便於大家能看清楚

實現原理

從上述兩張圖中,我們可以看到 它是一個 三角形的貝塞爾曲線

這樣的動畫需要經過:

• 2π (360°)旋轉一週
• 圓一週一共有六個 三角形的貝賽爾曲線圖形形狀.
• 一個動畫組 內部包含縮放動畫 從0~1的放大 ,動畫如果執行10秒,那麼 scale縮放動畫執行 10*0.2 = 2秒, 動畫組中還包含另一個動畫是 從結束位置的動畫到結尾消失的位置大小變化直到動畫消失.
• 沿著圓形每 60°角度 建立一個上圖的三角形圖形.

說了這麼多 實際就是用CABasicAnimation的keypath是path和CABasicAnimation的keypath是transform.scale的動畫組合在一起作用於一個三角形上,並且一共建立6個三角形圖形.

結束的時候大概是這樣的

結束的時候實際上是一個從 上一次動畫執行完成的path向 一條線上三個點的path過渡的過程,直到最後隱藏消失.

好下面我們來實現一下這個動畫

注意: 背景的❤️紅心是 一張圖不在本篇講述範圍

程式碼實現

首先我們子類話一個ZanLikeView繼承自UIView並設定底部的圖片和點選變換的❤️圖片,就是兩張UIImageView加手勢,當點選的時候區分不同view的tag就知道哪個imageview點選,這樣就可以做兩張動畫不同的效果了,不過這些可以參考demo.

我主要介紹核心程式碼

建立 CAShapeLayer用於做形狀圖形相關的圖形動畫.

CAShapeLayer *layer = [[CAShapeLayer alloc]init];
layer.position = _likeBefore.center;
layer.fillColor = [UIColor redColor].CGColor;
 

顏色最終可對外暴露介面

for迴圈每 30°角建立一個上述的三角形.我們需要建立 6個 就迴圈6次

建立初始位置的貝塞爾path

CGFloat length = 30;
CGFloat duration = 0.5f;
for(int i = 0 ; i < 6; i++) {
	CAShapeLayer *layer = [[CAShapeLayer alloc]init];
	layer.position = _likeBefore.center;
	layer.fillColor = [[UIColor redColor].CGColor;
	
	//...  1
	//...  2
	//...  3
}

這裡我們一共建立6個shapeLayer的例項並填充成顏色,我們這裡填充的是紅色 其它的顏色可自行封裝.
_likeBefore 是我們看到白色的❤️背景檢視(UIImageView)

下面 在//... 1的地方加入如下程式碼

UIBezierPath *startPath = [UIBezierPath bezierPath];
[startPath moveToPoint:CGPointMake(-2, -length)];
[startPath addLineToPoint:CGPointMake(2, -length)];
[startPath addLineToPoint:CGPointMake(0, 0)];

這行程式碼加完就是這樣的圖形

然後建立完成我們需要把path給layer.path. 記得轉成CGPath

layer.path = startPath.CGPath;
layer.transform = CATransform3DMakeRotation(M_PI / 3.0f * i, 0.0, 0.0, 1.0);
[self.layer addSublayer:layer]

注: CATransform3DMakeRotation()函式 當x,y,z值為0時,代表在該軸方向上不進行旋轉,當值為-1時,代表在該軸方向上進行逆時針旋轉,當值為1時,代表在該軸方向上進行順時針旋轉
因為我們是需要60°建立一個layer所以需要順時針 M_PI / 3.0f = 60°. 每迴圈一次則建立第N個角度乘60°.

接著在//... 2新增如下程式碼

//動畫組
CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
group.removedOnCompletion = NO;
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
group.fillMode = kCAFillModeForwards;
group.duration = duration;
//縮放動畫
CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnim.fromValue = @(0.0);
scaleAnim.toValue = @(1.0);
scaleAnim.duration = duration * 0.2f; //注意這裡是在給定時長的地方前0.2f的時間裡執行縮放

這裡說下duration *0.2f. 比如我給定 10秒的duration,那麼 duration *0.2 = 2 秒執行縮放.

最後在//... 3的程式碼出加上如下程式碼

//結束點
UIBezierPath *endPath = [UIBezierPath bezierPath];
[endPath moveToPoint:CGPointMake(-2, -length)];
[endPath addLineToPoint:CGPointMake(2, -length)];
[endPath addLineToPoint:CGPointMake(0, -length)];
            
CABasicAnimation *pathAnim = [CABasicAnimation animationWithKeyPath:@"path"];
pathAnim.fromValue = (__bridge id)layer.path;
pathAnim.toValue = (__bridge id)endPath.CGPath;
pathAnim.beginTime = duration * 0.2f;
pathAnim.duration = duration * 0.8f;
    
[group setAnimations:@[scaleAnim, pathAnim]];
[layer addAnimation:group forKey:nil];

這幾行程式碼的意識是 從我們上一個layer的path位置開始向我們結束位置的path過渡,並且注意開始時間
pathAnim.beginTime是 duration *0.2也就是說 在上一個動畫結束的時間點才開始結束過渡,過渡的時長剩餘是duration *0.8.這樣兩個連貫在一起的動畫就執行完了,最後把動畫加到動畫組 天加給layer.

下圖是從開始到結束點過渡的動畫.

剩餘的工作就是做個普通的動畫的 基本沒什麼了.

[UIView animateWithDuration:0.35f
                      delay:0.0f
                    options:UIViewAnimationOptionCurveEaseIn
                 animations:^{
                     self.likeAfter.transform = CGAffineTransformScale(CGAffineTransformMakeRotation(-M_PI_4), 0.1f, 0.1f);
                 }
                 completion:^(BOOL finished) {
                     [self.likeAfter setHidden:YES];
                     self.likeBefore.userInteractionEnabled = YES;
                     self.likeAfter.userInteractionEnabled = YES;
                 }];

技巧

結束動畫的開始時間和結束時間控制,恰到好處.

總結

以上就是這篇文章的全部內容了，希望本文的內容對大傢俱有一定的參考學習價值，這是小編的iOS交流群：624212887，歡迎入駐交流，Demo可進群獲取——點選：加入