前言

hi 大家好 又跟大家見(jiàn)面了,今天給大家分享的是抖音的點(diǎn)贊動(dòng)畫(huà)的實(shí)現(xiàn), 廢話不多說(shuō)上圖

本篇文章主要包含技術(shù)點(diǎn):

CAShapeLayer和貝賽爾曲線繪制三角形

• 組合動(dòng)畫(huà)的時(shí)間技巧
• 我習(xí)慣寫(xiě)完文章的demo都附在文章底部,如果不想看原理的小伙伴可直接跳到底部找demo下載.

實(shí)現(xiàn)原理
首先 我們來(lái)詳細(xì)分解一下這個(gè)動(dòng)畫(huà)

請(qǐng)仔細(xì)觀察

我們來(lái)看單獨(dú)的一個(gè)動(dòng)畫(huà)

請(qǐng)仔細(xì)觀看 我設(shè)置10秒的duration 以便于大家能看清楚

實(shí)現(xiàn)原理

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

這樣的動(dòng)畫(huà)需要經(jīng)過(guò):

• 2π (360°)旋轉(zhuǎn)一周
• 圓一周一共有六個(gè) 三角形的貝賽爾曲線圖形形狀.
• 一個(gè)動(dòng)畫(huà)組 內(nèi)部包含縮放動(dòng)畫(huà) 從0~1的放大 ,動(dòng)畫(huà)如果執(zhí)行10秒,那么 scale縮放動(dòng)畫(huà)執(zhí)行 10*0.2 = 2秒, 動(dòng)畫(huà)組中還包含另一個(gè)動(dòng)畫(huà)是 從結(jié)束位置的動(dòng)畫(huà)到結(jié)尾消失的位置大小變化直到動(dòng)畫(huà)消失.
• 沿著圓形每 60°角度 創(chuàng)建一個(gè)上圖的三角形圖形.

說(shuō)了這么多 實(shí)際就是用CABasicAnimation的keypath是path和CABasicAnimation的keypath是transform.scale的動(dòng)畫(huà)組合在一起作用于一個(gè)三角形上,并且一共創(chuàng)建6個(gè)三角形圖形.

結(jié)束的時(shí)候大概是這樣的

結(jié)束的時(shí)候?qū)嶋H上是一個(gè)從 上一次動(dòng)畫(huà)執(zhí)行完成的path向 一條線上三個(gè)點(diǎn)的path過(guò)渡的過(guò)程,直到最后隱藏消失.

好下面我們來(lái)實(shí)現(xiàn)一下這個(gè)動(dòng)畫(huà)

注意: 背景的??紅心是 一張圖不在本篇講述范圍

代碼實(shí)現(xiàn)
首先我們子類(lèi)話一個(gè)ZanLikeView繼承自UIView并設(shè)置底部的圖片和點(diǎn)擊變換的??圖片,就是兩張UIImageView加手勢(shì),當(dāng)點(diǎn)擊的時(shí)候區(qū)分不同view的tag就知道哪個(gè)imageview點(diǎn)擊,這樣就可以做兩張動(dòng)畫(huà)不同的效果了,不過(guò)這些可以參考demo.

我主要介紹核心代碼

創(chuàng)建 CAShapeLayer用于做形狀圖形相關(guān)的圖形動(dòng)畫(huà).

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

顏色最終可對(duì)外暴露接口

for循環(huán)每 30°角創(chuàng)建一個(gè)上述的三角形.我們需要?jiǎng)?chuàng)建 6個(gè) 就循環(huán)6次

創(chuàng)建初始位置的貝塞爾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
}

這里我們一共創(chuàng)建6個(gè)shapeLayer的實(shí)例并填充成顏色,我們這里填充的是紅色 其它的顏色可自行封裝. _likeBefore 是我們看到白色的??背景視圖(UIImageView)

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

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

這行代碼加完就是這樣的圖形

然后創(chuàng)建完成我們需要把path給layer.path. 記得轉(zhuǎn)成CGPath

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

注: CATransform3DMakeRotation()函數(shù) 當(dāng)x,y,z值為0時(shí),代表在該軸方向上不進(jìn)行旋轉(zhuǎn),當(dāng)值為-1時(shí),代表在該軸方向上進(jìn)行逆時(shí)針旋轉(zhuǎn),當(dāng)值為1時(shí),代表在該軸方向上進(jìn)行順時(shí)針旋轉(zhuǎn)
因?yàn)槲覀兪切枰?0°創(chuàng)建一個(gè)layer所以需要順時(shí)針 M_PI / 3.0f = 60°. 每循環(huán)一次則創(chuàng)建第N個(gè)角度乘60°.

接著在//... 2添加如下代碼

//動(dòng)畫(huà)組
CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
group.removedOnCompletion = NO;
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
group.fillMode = kCAFillModeForwards;
group.duration = duration;

//縮放動(dòng)畫(huà)
CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnim.fromValue = @(0.0);
scaleAnim.toValue = @(1.0);
scaleAnim.duration = duration * 0.2f; //注意這里是在給定時(shí)長(zhǎng)的地方前0.2f的時(shí)間里執(zhí)行縮放

這里說(shuō)下duration * 0.2f. 比如我給定 10秒的duration,那么 duration * 0.2 = 2 秒執(zhí)行縮放.

最后在//... 3的代碼出加上如下代碼

//結(jié)束點(diǎn)
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];

這幾行代碼的意識(shí)是 從我們上一個(gè)layer的path位置開(kāi)始向我們結(jié)束位置的path過(guò)渡,并且注意開(kāi)始時(shí)間
pathAnim.beginTime是duration * 0.2也就是說(shuō) 在上一個(gè)動(dòng)畫(huà)結(jié)束的時(shí)間點(diǎn)才開(kāi)始結(jié)束過(guò)渡,過(guò)渡的時(shí)長(zhǎng)剩余是duration * 0.8.這樣兩個(gè)連貫在一起的動(dòng)畫(huà)就執(zhí)行完了,最后把動(dòng)畫(huà)加到動(dòng)畫(huà)組 天加給layer.

下圖是從開(kāi)始到結(jié)束點(diǎn)過(guò)渡的動(dòng)畫(huà).

剩余的工作就是做個(gè)普通的動(dòng)畫(huà)的 基本沒(méi)什么了.

[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;
                 }];

技巧

結(jié)束動(dòng)畫(huà)的開(kāi)始時(shí)間和結(jié)束時(shí)間控制,恰到好處.

總結(jié)

動(dòng)畫(huà)實(shí)現(xiàn)的細(xì)節(jié)需要研究和學(xué)習(xí)和實(shí)踐,在這里感謝開(kāi)源作者的代碼給了思路, 我個(gè)人通過(guò)學(xué)習(xí)和模仿整理出原理寫(xiě)出代碼校驗(yàn)并增加相關(guān)對(duì)外接口.

收錄：原文地址