本文實(shí)例為大家分享了iOS實(shí)現(xiàn)點(diǎn)贊動(dòng)畫特效的具體代碼，供大家參考，具體內(nèi)容如下
動(dòng)畫的基本使用
動(dòng)畫的實(shí)現(xiàn)基本上是基于對View控件和View的layer屬性進(jìn)行操作，對視圖進(jìn)行移動(dòng)，尺寸變換，透明度變換，旋轉(zhuǎn)等一系列操作。
關(guān)鍵幀動(dòng)畫：
動(dòng)畫的實(shí)現(xiàn)可以分為兩個(gè)部分，一部分是規(guī)定動(dòng)畫的變化內(nèi)容，比如view需要把scale從0變化到1，這個(gè)數(shù)字是相對值，即從尺寸為0變化到正常尺寸。另一個(gè)部分是規(guī)定動(dòng)畫的漸變時(shí)間。這樣就實(shí)現(xiàn)了view在規(guī)定時(shí)間完成指定變化了，這個(gè)變化的過程也可以通過參數(shù)設(shè)置為非均勻變化的。上面的示例是關(guān)鍵幀動(dòng)畫的實(shí)現(xiàn)，實(shí)現(xiàn)的方式是把動(dòng)畫劃分為幾個(gè)部分，“第一幀”做一件事，“第二幀”再做另外一件事，這就使得變化連續(xù)且可控。Duration參數(shù)確定了時(shí)間，delay確定了延時(shí)多久執(zhí)行，options確定了關(guān)鍵幀動(dòng)畫布局子控件。completion的參數(shù)是一個(gè)block，其中的內(nèi)容是在內(nèi)容執(zhí)行結(jié)束后才調(diào)用。這里做了3幀，前兩幀做了尺寸變?yōu)?倍然后恢復(fù)，后一幀使得其隱藏。結(jié)束后會(huì)調(diào)用block使其移除。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
[UIView animateKeyframesWithDuration:self.animationDurtion * 4 delay:0.0 options:UIViewKeyframeAnimationOptionLayoutSubviews animations:^{ /*參數(shù)1:關(guān)鍵幀開始時(shí)間 參數(shù)2:關(guān)鍵幀占用時(shí)間比例 參數(shù)3:到達(dá)該關(guān)鍵幀時(shí)的屬性值 */ [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 * self.animationDurtion animations:^{ giveLikeView.transform = CGAffineTransformMakeScale(3, 3);; }]; [UIView addKeyframeWithRelativeStartTime:0.5 * self.animationDurtion relativeDuration:0.5 * self.animationDurtion animations:^{ giveLikeView.transform = CGAffineTransformIdentity; }]; [UIView addKeyframeWithRelativeStartTime:self.animationDurtion relativeDuration:self.animationDurtion * 3 animations:^{ giveLikeView.alpha = 0; }]; } completion:^(BOOL finished) { giveLikeView.hidden = YES; [giveLikeView removeFromSuperview]; }]; |
CAShapeLayer和UIBezierPath：
當(dāng)不滿足于view的變化，還需要在view的表面繪制一些圖案，就要對layer進(jìn)行操作，layer可以理解為是view的表面，每個(gè)view都有l(wèi)ayer參數(shù)。UIBezierPath是貝塞爾曲線，它用于設(shè)置繪圖的路徑，沒有了它，layer的繪制也是無效的，因?yàn)闆]有邊界呀。
如下代碼繪制了一個(gè)圓形的曲線，設(shè)置了它的中心，半徑，起始終止角這些屬性。
|
1
2
3
|
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(giveLikeView.bounds.size.width/2, giveLikeView.bounds.size.height/2) radius:giveLikeView.bounds.size.width startAngle:-1.57 endAngle:-1.57+3.14*2 clockwise:YES]; circleLayer.path = bezierPath.CGPath; [self.layer addSublayer:circleLayer]; |
在最后我們可以看到：circleLayer.path = bezierPath.CGPath; [self.layer addSublayer:circleLayer];
它的作用是設(shè)置layer的路徑，并把layer添加到view的表面。下面來看看layer的配置。
創(chuàng)建一個(gè)layer后設(shè)置它的frame和顏色以及邊界，線寬這些屬性。
|
1
2
3
4
5
|
CAShapeLayer *circleLayer = [[CAShapeLayer alloc] init];circleLayer.frame = giveLikeView.frame;circleLayer.fillColor = [UIColor clearColor].CGColor;circleLayer.strokeColor = [UIColor redColor].CGColor;circleLayer.lineWidth = 1; |
幾處聯(lián)系：把貝塞爾曲線和layer聯(lián)系起來，把layer和view的layer聯(lián)系起來。
為layer加動(dòng)畫（動(dòng)畫組）：
先創(chuàng)建動(dòng)畫組CAAnimationGroup，它可以容納若干動(dòng)畫，然后創(chuàng)建若干CABasicAnimation基礎(chǔ)動(dòng)畫。分別設(shè)置屬性，動(dòng)畫組需要涉及的屬性有時(shí)間功能，kCAMediaTimingFunctionEaseIn表示逐漸加快，另外還有設(shè)置持續(xù)時(shí)間，設(shè)置kCAFillModeForwards表示動(dòng)畫在結(jié)束后會(huì)保持，removedOnCompletion = NO表示最后不移除。在基礎(chǔ)動(dòng)畫的設(shè)置中，一般設(shè)置在動(dòng)畫組中的起始時(shí)間和持續(xù)時(shí)間，還有參數(shù)的變化。最后的 group.animations = @[scaleAnimtion,widthStartAnimtion,widthEndAnimtion];[circleLayer addAnimation:group forKey:nil];
兩句表示在動(dòng)畫組中添加動(dòng)畫然后為layer添加動(dòng)畫組，這樣layer就有動(dòng)畫特效了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
//動(dòng)畫CAAnimationGroup *group = [CAAnimationGroup animation]; group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; NSTimeInterval groupInterval = self.animationDurtion * 0.8; group.duration = groupInterval; group.fillMode = kCAFillModeForwards; group.removedOnCompletion = NO; CABasicAnimation * scaleAnimtion = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; scaleAnimtion.beginTime = 0; scaleAnimtion.duration = groupInterval * 0.8; scaleAnimtion.fromValue = @(0); scaleAnimtion.toValue = @(1); CABasicAnimation * widthStartAnimtion = [CABasicAnimation animationWithKeyPath:@"lineWidth"]; widthStartAnimtion.beginTime = 0; widthStartAnimtion.duration = groupInterval * 0.8; widthStartAnimtion.fromValue = @(1); widthStartAnimtion.toValue = @(2); CABasicAnimation * widthEndAnimtion = [CABasicAnimation animationWithKeyPath:@"lineWidth"]; widthEndAnimtion.beginTime = groupInterval * 0.8; widthEndAnimtion.duration = groupInterval * 0.2; widthEndAnimtion.fromValue = @(2); widthEndAnimtion.toValue = @(0); group.animations = @[scaleAnimtion,widthStartAnimtion,widthEndAnimtion]; [circleLayer addAnimation:group forKey:nil]; |
點(diǎn)贊動(dòng)畫的實(shí)現(xiàn)原理
下面來介紹demo的實(shí)現(xiàn)原理。
controller的尺寸設(shè)置為全屏，在其上方也覆蓋一個(gè)全屏的view，再在view上添加點(diǎn)擊事件（手勢）。
|
1
2
3
4
5
|
- (void)addGesture{ UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(creatOneHeart:)]; [self addGestureRecognizer:tap]; } |
下面看看點(diǎn)擊后調(diào)用的方法：
這里每次點(diǎn)擊都會(huì)獲取點(diǎn)擊的位置然后去初始化一個(gè)愛心，這是異步任務(wù)，放在主隊(duì)列中執(zhí)行。
|
1
2
3
4
5
6
7
|
- (void)creatOneHeart:(UITapGestureRecognizer *)sender{ CGPoint point = [sender locationInView:self]; dispatch_async(dispatch_get_main_queue(),^{ [self initOneNewHeart:point]; });} |
這段代碼創(chuàng)建了視圖對象，這里自然用到了事先創(chuàng)建好的心形圖片。這里把創(chuàng)建的imageview存到隊(duì)列，顯示到view上，最后調(diào)用likeAction:方法執(zhí)行動(dòng)畫。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
- (UIImageView *)createGiveLikeView{ UIImageView *giveLikeView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)]; giveLikeView.backgroundColor = [UIColor clearColor]; UIImage *image = [UIImage imageNamed:@"icon_home_like_after"]; giveLikeView.userInteractionEnabled = YES; giveLikeView.tag = GiveType; giveLikeView.image = image; giveLikeView.hidden = NO; _giveLikeView = giveLikeView; return _giveLikeView;}- (void)initOneNewHeart:(CGPoint)point{ UIImageView *giveLikeView = [self createGiveLikeView]; giveLikeView.center = point; [self.array addObject:giveLikeView]; [self addSubview:giveLikeView]; [self likeAction:giveLikeView];} |
我們看看giveLikeAction：這個(gè)方法，它包括執(zhí)行心形的變化動(dòng)畫和繪制六個(gè)輻射的三角形動(dòng)畫，還有輻散的圓的動(dòng)畫。
|
1
2
3
4
5
6
7
8
9
10
|
- (void)likeAction:(UIImageView *)giveLikeView{ [self giveLikeAction:giveLikeView];}- (void)giveLikeAction:(UIImageView *)giveLikeView{ [self animtionChangeLikeType:giveLikeView]; [self createTrigonsAnimtion:giveLikeView]; [self createCircleAnimation:giveLikeView];} |
接下來直接看看輻散的三角形的動(dòng)畫（愛心的變化動(dòng)畫在上面已經(jīng)涉及到了）：
這段代碼跑了6個(gè)循環(huán)，做了6個(gè)三角形，它們分別有動(dòng)畫效果。
shape.transform = CATransform3DMakeRotation(3.14 / 3 * i, 0, 0, 1);實(shí)現(xiàn)了旋轉(zhuǎn)。
[giveLikeView.layer addSublayer:shape];執(zhí)行l(wèi)ayer的添加。
因?yàn)樵谘h(huán)中，每個(gè)layer都有獨(dú)立的動(dòng)畫，動(dòng)畫組實(shí)現(xiàn)的效果是三角形從小變大，最后變成一條直線并消失。
下面的兩行代碼用到了__bridge，它的作用是實(shí)現(xiàn)類型的轉(zhuǎn)換，這里把CGPathRef類型“橋接”轉(zhuǎn)化為了id類型，如果沒有它，會(huì)報(bào)錯(cuò)。
pathAnimation.fromValue = (__bridge id)startPath.CGPath;
pathAnimation.toValue = (__bridge id)endPath.CGPath;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
- (void)createTrigonsAnimtion:(UIImageView *)giveLikeView{ for(int i=0;i<6;i++) { //創(chuàng)建一個(gè)layer并設(shè)置位置和填充色 CAShapeLayer *shape = [[CAShapeLayer alloc] init]; shape.position = CGPointMake(giveLikeView.bounds.size.width/2, giveLikeView.bounds.size.height/2); shape.fillColor = [UIColor redColor].CGColor; //設(shè)置貝塞爾曲線，執(zhí)行路徑 UIBezierPath *startPath = [[UIBezierPath alloc] init]; [startPath moveToPoint:CGPointMake(-2, 30)]; [startPath addLineToPoint:CGPointMake(2, 30)]; [startPath addLineToPoint:CGPointMake(0, 0)]; [startPath addLineToPoint:CGPointMake(-2, 30)]; shape.path = startPath.CGPath; //旋轉(zhuǎn) shape.transform = CATransform3DMakeRotation(3.14 / 3 * i, 0, 0, 1); [giveLikeView.layer addSublayer:shape]; //動(dòng)畫組 CAAnimationGroup *groupAnimation = [CAAnimationGroup animation]; groupAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; groupAnimation.duration = self.animationDurtion; groupAnimation.fillMode = kCAFillModeForwards; groupAnimation.removedOnCompletion = NO; //基礎(chǔ)動(dòng)畫1 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, 30)]; [endPath addLineToPoint:CGPointMake(2, 30)]; [endPath addLineToPoint:CGPointMake(0, 30)]; //基礎(chǔ)動(dòng)畫2 CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; pathAnimation.beginTime = self.animationDurtion * 0.2; pathAnimation.duration = self.animationDurtion * 0.8; pathAnimation.fromValue = (__bridge id)startPath.CGPath; pathAnimation.toValue = (__bridge id)endPath.CGPath; groupAnimation.animations = @[scaleAnimtion,pathAnimation]; [shape addAnimation:groupAnimation forKey:nil]; }} |
demo實(shí)現(xiàn)的動(dòng)畫效果
demo的GitHub鏈接
最后附上demo鏈接：MYFGiveLikeAnimationDemo
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/mayifan_blog/article/details/89266383
