前言
今天給大家分享一下抖音的點贊動畫的實現(xiàn), 廢話不多說上圖
本篇文章主要包含技術(shù)點:
- CAShapeLayer和貝賽爾曲線繪制三角形
- 組合動畫的時間技巧
實現(xiàn)原理
首先 我們來詳細分解一下這個動畫
請仔細觀察
我們來看單獨的一個動畫
請仔細觀看 我設(shè)置10秒的duration 以便于大家能看清楚
實現(xiàn)原理
從上述兩張圖中,我們可以看到 它是一個 三角形的貝塞爾曲線
這樣的動畫需要經(jīng)過:
- 2π (360°)旋轉(zhuǎn)一周
- 圓一周一共有六個 三角形的貝賽爾曲線圖形形狀.
- 一個動畫組 內(nèi)部包含縮放動畫 從0~1的放大 ,動畫如果執(zhí)行10秒,那么 scale縮放動畫執(zhí)行 10*0.2 = 2秒, 動畫組中還包含另一個動畫是 從結(jié)束位置的動畫到結(jié)尾消失的位置大小變化直到動畫消失.
- 沿著圓形每 60°角度 創(chuàng)建一個上圖的三角形圖形.
說了這么多 實際就是用CABasicAnimation的keypath是path和CABasicAnimation的keypath是transform.scale的動畫組合在一起作用于一個三角形上,并且一共創(chuàng)建6個三角形圖形.
結(jié)束的時候大概是這樣的
結(jié)束的時候?qū)嶋H上是一個從 上一次動畫執(zhí)行完成的path向 一條線上三個點的path過渡的過程,直到最后隱藏消失.
好下面我們來實現(xiàn)一下這個動畫
注意: 背景的??紅心是 一張圖不在本篇講述范圍
代碼實現(xiàn)
首先我們子類話一個ZanLikeView繼承自UIView并設(shè)置底部的圖片和點擊變換的??圖片,就是兩張UIImageView加手勢,當(dāng)點擊的時候區(qū)分不同view的tag就知道哪個imageview點擊,這樣就可以做兩張動畫不同的效果了,不過這些可以參考demo.
我主要介紹核心代碼
創(chuàng)建 CAShapeLayer用于做形狀圖形相關(guān)的圖形動畫.
CAShapeLayer *layer = [[CAShapeLayer alloc]init];
layer.position = _likeBefore.center;
layer.fillColor = [UIColor redColor].CGColor;
顏色最終可對外暴露接口
for循環(huán)每 30°角創(chuàng)建一個上述的三角形.我們需要創(chuàng)建 6個 就循環(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個shapeLayer的實例并填充成顏色,我們這里填充的是紅色 其它的顏色可自行封裝.
_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時,代表在該軸方向上不進行旋轉(zhuǎn),當(dāng)值為-1時,代表在該軸方向上進行逆時針旋轉(zhuǎn),當(dāng)值為1時,代表在該軸方向上進行順時針旋轉(zhuǎn)
因為我們是需要60°創(chuàng)建一個layer所以需要順時針 M_PI / 3.0f = 60°. 每循環(huán)一次則創(chuàng)建第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的時間里執(zhí)行縮放
這里說下duration *0.2f. 比如我給定 10秒的duration,那么 duration *0.2 = 2 秒執(zhí)行縮放.
最后在//... 3的代碼出加上如下代碼
//結(jié)束點
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位置開始向我們結(jié)束位置的path過渡,并且注意開始時間
pathAnim.beginTime是 duration *0.2也就是說 在上一個動畫結(jié)束的時間點才開始結(jié)束過渡,過渡的時長剩余是duration *0.8.這樣兩個連貫在一起的動畫就執(zhí)行完了,最后把動畫加到動畫組 天加給layer.
下圖是從開始到結(jié)束點過渡的動畫.
剩余的工作就是做個普通的動畫的 基本沒什么了.
[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é)束動畫的開始時間和結(jié)束時間控制,恰到好處.
總結(jié)
以上是抖音點贊動畫實現(xiàn),如果需要抖音點贊動畫實現(xiàn)Demo，可以加iOS高級技術(shù)交流群：937194184，獲取Demo,以及更多iOS學(xué)習(xí)資料
轉(zhuǎn)載：原文地址
