前言
hi 大家好 又跟大家見面了,今天給大家分享的是抖音的點贊動畫的實現, 廢話不多說上圖
本篇文章主要包含技術點:
CAShapeLayer和貝賽爾曲線繪制三角形
- 組合動畫的時間技巧
- 我習慣寫完文章的demo都附在文章底部,如果不想看原理的小伙伴可直接跳到底部找demo下載.
實現原理
首先 我們來詳細分解一下這個動畫
請仔細觀察
我們來看單獨的一個動畫
請仔細觀看 我設置10秒的duration 以便于大家能看清楚
實現原理
從上述兩張圖中,我們可以看到 它是一個 三角形的貝塞爾曲線
這樣的動畫需要經過:
- 2π (360°)旋轉一周
- 圓一周一共有六個 三角形的貝賽爾曲線圖形形狀.
- 一個動畫組 內部包含縮放動畫 從0~1的放大 ,動畫如果執(zhí)行10秒,那么 scale縮放動畫執(zhí)行 10*0.2 = 2秒, 動畫組中還包含另一個動畫是 從結束位置的動畫到結尾消失的位置大小變化直到動畫消失.
- 沿著圓形每 60°角度 創(chuàng)建一個上圖的三角形圖形.
說了這么多 實際就是用CABasicAnimation的keypath是path和CABasicAnimation的keypath是transform.scale的動畫組合在一起作用于一個三角形上,并且一共創(chuàng)建6個三角形圖形.
結束的時候大概是這樣的
結束的時候實際上是一個從 上一次動畫執(zhí)行完成的path向 一條線上三個點的path過渡的過程,直到最后隱藏消失.
好下面我們來實現一下這個動畫
注意: 背景的??紅心是 一張圖不在本篇講述范圍
代碼實現
首先我們子類話一個ZanLikeView繼承自UIView并設置底部的圖片和點擊變換的??圖片,就是兩張UIImageView加手勢,當點擊的時候區(qū)分不同view的tag就知道哪個imageview點擊,這樣就可以做兩張動畫不同的效果了,不過這些可以參考demo.
我主要介紹核心代碼
創(chuàng)建 CAShapeLayer用于做形狀圖形相關的圖形動畫.
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. 記得轉成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°創(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的代碼出加上如下代碼
//結束點
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.這樣兩個連貫在一起的動畫就執(zhí)行完了,最后把動畫加到動畫組 天加給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;
}];
技巧
結束動畫的開始時間和結束時間控制,恰到好處.
總結
動畫實現的細節(jié)需要研究和學習和實踐,在這里感謝開源作者的代碼給了思路, 我個人通過學習和模仿整理出原理寫出代碼校驗并增加相關對外接口.
收錄：原文地址
