JWGiveLikeAnimation
描述：iOS 抖音點(diǎn)贊動(dòng)畫(huà) 收藏動(dòng)畫(huà)
git傳送門(mén)
點(diǎn)贊動(dòng)畫(huà)
前言
最近項(xiàng)目中需要模仿抖音的點(diǎn)贊動(dòng)畫(huà)來(lái)應(yīng)用到項(xiàng)目中，所以自己擼了一個(gè)動(dòng)畫(huà)礼预，給同行們分享下，不喜勿噴虏劲。歡迎隨時(shí)批評(píng)指正 QQ：38251725
實(shí)現(xiàn)思路
-
點(diǎn)贊動(dòng)畫(huà)
將點(diǎn)贊動(dòng)畫(huà)分解為4個(gè)部分
- 6個(gè)倒三角形從中心向外擴(kuò)散托酸，先縮放在放大
- 6個(gè)三角全部展開(kāi)之后由內(nèi)向外消失
- 心形點(diǎn)贊圖片 從小擴(kuò)大在收縮動(dòng)畫(huà)
- 波紋慢慢擴(kuò)大至心型圖片圓周，再慢慢消失
實(shí)現(xiàn)原理：
動(dòng)畫(huà)1柒巫、2：使用CAShapeLayer圖層励堡，UIBezierPath曲線繪制三角形。然后使用CAAnimationGroup來(lái)實(shí)現(xiàn)縮放和消失組合動(dòng)畫(huà)堡掏。
- (void)createTrigonsAnimtion { //三角形大小 for (int i = 0; i < 6; i++) { //繪制三角形的圖層 CAShapeLayer * shapeLayer = [[CAShapeLayer alloc]init]; shapeLayer.position = _giveLikeView.center; shapeLayer.fillColor = self.shapeFillColor.CGColor; //三角形 UIBezierPath * startPath = [UIBezierPath bezierPath]; [startPath moveToPoint:CGPointMake(-2, _length)]; [startPath addLineToPoint:CGPointMake(2, _length)]; [startPath addLineToPoint:CGPointMake(0, 0)]; shapeLayer.path = startPath.CGPath; //旋轉(zhuǎn)圖層应结，形成圓形 //因?yàn)橐还彩?個(gè)，均等應(yīng)該是反轉(zhuǎn)60度 所以是M_PI/3 ,圍繞Z軸旋轉(zhuǎn) shapeLayer.transform = CATransform3DMakeRotation(M_PI / 3 * i, 0, 0, 1); [self.layer addSublayer:shapeLayer]; //使用動(dòng)畫(huà)組來(lái)解決三角形 出現(xiàn)跟消失】 CAAnimationGroup * groupAnimation = [CAAnimationGroup animation]; groupAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; groupAnimation.duration = self.animationDurtion; groupAnimation.fillMode = kCAFillModeForwards; groupAnimation.removedOnCompletion = NO; CABasicAnimation * scaleAnimtion = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; //縮放時(shí)間占20% scaleAnimtion.duration = self.animationDurtion * 0.2; scaleAnimtion.fromValue = @(0); scaleAnimtion.toValue = @(1); //繪制三角形結(jié)束 一條直線 UIBezierPath * endPath = [UIBezierPath bezierPath]; [endPath moveToPoint:CGPointMake(-2, _length)]; [endPath addLineToPoint:CGPointMake(2, _length)]; [endPath addLineToPoint:CGPointMake(0, _length)]; CABasicAnimation * pathAnimtion = [CABasicAnimation animationWithKeyPath:@"path"]; pathAnimtion.beginTime = self.animationDurtion * 0.2; pathAnimtion.duration = self.animationDurtion * 0.8; pathAnimtion.fromValue = (__bridge id)startPath.CGPath; pathAnimtion.toValue = (__bridge id)endPath.CGPath; groupAnimation.animations = @[scaleAnimtion,pathAnimtion]; [shapeLayer addAnimation:groupAnimation forKey:nil]; } }動(dòng)畫(huà)3： 心形圖片放大縮小泉唁，使用UIView的幀動(dòng)畫(huà)鹅龄，來(lái)設(shè)置每幀的動(dòng)畫(huà)。分2部分亭畜，一部分是放大一部分是恢復(fù)
[UIView animateKeyframesWithDuration:self.animationDurtion delay:0.0 options:UIViewKeyframeAnimationOptionLayoutSubviews animations:^{ /*參數(shù)1:關(guān)鍵幀開(kāi)始時(shí)間 參數(shù)2:關(guān)鍵幀占用時(shí)間比例 參數(shù)3:到達(dá)該關(guān)鍵幀時(shí)的屬性值 */ [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 * self.animationDurtion animations:^{ self.giveLikeView.transform = CGAffineTransformMakeScale(1.5, 1.5);; }]; [UIView addKeyframeWithRelativeStartTime:0.5 * self.animationDurtion relativeDuration:0.5 * self.animationDurtion animations:^{ self.giveLikeView.transform = CGAffineTransformIdentity; }]; } completion:^(BOOL finished) { self.userInteractionEnabled = YES; }];動(dòng)畫(huà)4：波紋動(dòng)畫(huà)使用CAShapeLayer繪制一個(gè)圓圈扮休，CAAnimationGroup組合使用 縮小、寬度變寬拴鸵，再消失玷坠。
- (void)createCircleAnimation { //創(chuàng)建背景圓環(huán) CAShapeLayer *circleLayer = [[CAShapeLayer alloc]init]; circleLayer.frame = self.bounds; //清空填充色 circleLayer.fillColor = [UIColor clearColor].CGColor; //設(shè)置畫(huà)筆顏色 即圓環(huán)背景色 circleLayer.strokeColor = self.shapeFillColor.CGColor; circleLayer.lineWidth = 1; //設(shè)置畫(huà)筆路徑 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0) radius:_length startAngle:- M_PI_2 endAngle:-M_PI_2 + M_PI * 2 clockwise:YES]; //path 決定layer將被渲染成何種形狀 circleLayer.path = path.CGPath; [self.layer addSublayer:circleLayer]; //使用動(dòng)畫(huà)組來(lái)解決圓圈從小到大 -->消失 CAAnimationGroup * groupAnimation = [CAAnimationGroup animation]; groupAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; NSTimeInterval groupDurtion = self.animationDurtion * 0.8; groupAnimation.duration = groupDurtion; groupAnimation.fillMode = kCAFillModeForwards; groupAnimation.removedOnCompletion = NO; CABasicAnimation * scaleAnimtion = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; //放大時(shí)間占80% scaleAnimtion.duration = groupDurtion * 0.8; scaleAnimtion.fromValue = @(0); scaleAnimtion.toValue = @(1); CABasicAnimation * widthStartAnimtion = [CABasicAnimation animationWithKeyPath:@"lineWidth"]; widthStartAnimtion.beginTime = 0; widthStartAnimtion.duration = groupDurtion * 0.8; widthStartAnimtion.fromValue = @(1); widthStartAnimtion.toValue = @(3); CABasicAnimation * widthEndAnimtion = [CABasicAnimation animationWithKeyPath:@"lineWidth"]; widthEndAnimtion.beginTime = groupDurtion * 0.8; widthEndAnimtion.duration = groupDurtion * 0.2; widthEndAnimtion.fromValue = @(3); widthEndAnimtion.toValue = @(0); groupAnimation.animations = @[scaleAnimtion,widthStartAnimtion,widthEndAnimtion]; [circleLayer addAnimation:groupAnimation forKey:@"circleLayerAnimtion"]; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(groupDurtion * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ [circleLayer removeAnimationForKey:@"circleLayerAnimtion"]; [circleLayer removeFromSuperlayer]; }); } -
取消點(diǎn)贊動(dòng)畫(huà)
取消點(diǎn)贊動(dòng)畫(huà)分解,點(diǎn)贊圖片由外向內(nèi)慢慢消失。
[self bringSubviewToFront:_giveLikeView]; _giveLikeView.transform = CGAffineTransformMakeScale(1.1, 1.1); [UIView animateWithDuration:0.4 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{ self.giveLikeView.transform = CGAffineTransformMakeScale(0.1, 0.1); } completion:^(BOOL finished) { self.giveLikeView.hidden = YES; self.giveLikeView.transform = CGAffineTransformMakeScale(1, 1); self.userInteractionEnabled = YES; }];
總結(jié)
以上就是整個(gè)動(dòng)畫(huà)的分解原理劲藐。主要是使用的Shaperlayer圖層 貝塞爾繪制圖形八堡，使用動(dòng)畫(huà)組還合成動(dòng)畫(huà)的實(shí)現(xiàn)。
