http://mp.weixin.qq.com/s?__biz=MjM5OTM0MzIwMQ==&mid=210476487&idx=6&sn=6c5b81e27c496f133a674b8d672f1399&scene=0#rd
1.前言
近日一直在看KITTEN寫的《A GUIDE TO IOS ANIMATION》,此乃iOS動畫開發(fā)的圣經(jīng)友绝，簡直手不釋卷堤尾。其中有一個動畫是加載動畫，因為文中沒有給出實現(xiàn)的解析迁客，我在這里解析一下動畫的實現(xiàn)原理郭宝，和自己加入一些新的東西。Github地址
我們可以看到掷漱，圖中主要是3個球在做交換粘室，其中中間的球基本保持位置不變，其他兩個球繞著一定的軌跡做旋轉(zhuǎn)位移動畫卜范，接下來我們來看代碼的實現(xiàn)步驟衔统。
2.三個球旋轉(zhuǎn)動畫
a.創(chuàng)建三個半徑大小，顏色大小一樣的圓海雪。這里我們用到了layer的cornerRadius屬性锦爵，在正方形中，我們只要設(shè)置cornerRadius的值等于height/2奥裸，就能輕易的畫出一個圓形棉浸，代碼如下:
UIView *ball_1 = [[UIView alloc] initWithFrame:CGRectMake(centerPoint.x - BALL_RADIUS, centerPoint.y, BALL_RADIUS, BALL_RADIUS)];
ball_1.layer.cornerRadius = BALL_RADIUS / 2;// 成為圓形
ball_1.backgroundColor = self.ballColor;
b.我們根據(jù)圓的x值不同，創(chuàng)建三個并排放著刺彩，大小、形狀一致的圓形,接下來我們來分析一下三個圓各自的x值
c.在git圖中枝恋，我們可以看到圓是繞著一定的半徑创倔，做著一個旋轉(zhuǎn)的運動，在這里我們用貝塞爾曲線創(chuàng)作圓焚碌，在這里我們要從180度到360度畦攘，和0度到180畫兩端圓弧，組成一個圓形十电，讓球1跟著這個曲線做位移運動知押。
CGFloat centerPointY = HEIGHT / 2 - BALL_RADIUS * 0.5;
CGFloat centerPointX = WIDTH / 2;
CGPoint centerPoint = CGPointMake(centerPointX, centerPointY);
UIView *ball_1 = [[UIView alloc] initWithFrame:CGRectMake(centerPoint.x - BALL_RADIUS, centerPoint.y, BALL_RADIUS, BALL_RADIUS)];
ball_1.layer.cornerRadius = BALL_RADIUS / 2;// 成為圓形
ball_1.backgroundColor = self.ballColor;
[self addSubview:ball_1];
self.ball_1 = ball_1;
UIView *ball_2 = [[UIView alloc] initWithFrame:CGRectMake(centerPoint.x - BALL_RADIUS * 0.5, centerPoint.y, BALL_RADIUS, BALL_RADIUS)];
ball_2.layer.cornerRadius = BALL_RADIUS / 2;// 成為圓形
ball_2.backgroundColor = self.ballColor;
[self addSubview:ball_2];
self.ball_2 = ball_2;
UIView *ball_3 = [[UIView alloc] initWithFrame:CGRectMake(centerPoint.x + BALL_RADIUS * 0.5, centerPoint.y, BALL_RADIUS, BALL_RADIUS)];
ball_3.layer.cornerRadius = BALL_RADIUS / 2;// 成為圓形
ball_3.backgroundColor = self.ballColor;
[self addSubview:ball_3];
self.ball_3 = ball_3;
// 2.1 第一個圓的曲線
UIBezierPath *path_ball_1 = [UIBezierPath bezierPath];
[path_ball_1 moveToPoint:centerBall_1];
[path_ball_1 addArcWithCenter:centerPoint radius:BALL_RADIUS startAngle:M_PI endAngle:2*M_PI clockwise:NO];
UIBezierPath *path_ball_1_1 = [UIBezierPath bezierPath];
[path_ball_1_1 addArcWithCenter:centerPoint radius:BALL_RADIUS startAngle:0 endAngle:M_PI clockwise:NO];
[path_ball_1 appendPath:path_ball_1_1];// 把兩段圓弧組合起來
我們用核心動畫，讓球1繞著軌跡運動：
//2.2第一個圓的動畫
CAKeyframeAnimation*animation_ball_1=[CAKeyframeAnimationanimationWithKeyPath:@"position"];
animation_ball_1.path=path_ball_1.CGPath;
animation_ball_1.removedOnCompletion=NO;
animation_ball_1.fillMode=kCAFillModeForwards;
animation_ball_1.calculationMode=kCAAnimationCubic;
animation_ball_1.repeatCount=1;
animation_ball_1.duration=1.4;
animation_ball_1.delegate=self;
animation_ball_1.autoreverses=NO;
animation_ball_1.timingFunction=[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.ball_1.layeraddAnimation:animation_ball_1forKey:@"animation"];
這樣我們就完成了球1的動畫鹃骂，我們按著這個步驟完成球3的動畫台盯。
d.球3首先是從0度到180度、180度到360度兩段弧構(gòu)成畏线，在這里我們要注意一個點是在創(chuàng)建核心動畫的時候静盅，我們不用再成為球3的核心動畫的代理，因為我們在球1中已經(jīng)成為了動畫的代理寝殴，這里不做代理蒿叠，防止重復(fù)出現(xiàn)動畫代理事件的觸發(fā)明垢。
//2.3第3個圓的曲線
UIBezierPath*path_ball_3=[UIBezierPathbezierPath];
[path_ball_3moveToPoint:centerBall_2];
[path_ball_3addArcWithCenter:centerPointradius:BALL_RADIUSstartAngle:0endAngle:M_PIclockwise:NO];
UIBezierPath*path_ball_3_1=[UIBezierPathbezierPath];
[path_ball_3_1addArcWithCenter:centerPointradius:BALL_RADIUSstartAngle:M_PIendAngle:M_PI*2clockwise:NO];
[path_ball_3appendPath:path_ball_3_1];
//2.4第3個圓的動畫
CAKeyframeAnimation*animation_ball_3=[CAKeyframeAnimationanimationWithKeyPath:@"position"];
animation_ball_3.path=path_ball_3.CGPath;
animation_ball_3.removedOnCompletion=NO;
animation_ball_3.fillMode=kCAFillModeForwards;
animation_ball_3.calculationMode=kCAAnimationCubic;
animation_ball_3.repeatCount=1;
animation_ball_3.duration=1.4;
animation_ball_3.autoreverses=NO;
animation_ball_3.timingFunction=[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.ball_3.layeraddAnimation:animation_ball_3forKey:@"rotation"];
3.動畫的優(yōu)化
在這里我們實現(xiàn)了球1和球3繞著一個圓做旋轉(zhuǎn)位移運動，這里我們已經(jīng)完成了動畫的第一部分市咽，我們來看一下效果圖：
這里我門可以看到只是單純的實現(xiàn)了球的旋轉(zhuǎn)位移痊银，并不像一開始的git中的動畫一樣。讓我們一起來分析一下我們現(xiàn)在這個動畫距離第一個動畫還少了一些什么：
git中的動畫在旋轉(zhuǎn)的時候球1和球2分別向兩邊位移了一段距離
兩個球在向外位移的過程中還一邊縮小球的半徑
球在旋轉(zhuǎn)的過程中施绎，變回原來的位置溯革，一邊變回原來的大小
在這里我們要實現(xiàn)這3個動畫的補充，我們需要成為原來旋轉(zhuǎn)動畫的代理粘姜，也就是在球1的核心動畫設(shè)置delegate為self鬓照，監(jiān)聽動畫開始的事件 - (void)animationDidStart:(CAAnimation*)anim，我們需要在動畫開始的時候完成3件事情孤紧，我們來看一下分析圖：
a.動畫開始的時候球1和球3位移一定的距離染突，我們來看一下位移距離的量的計算圖：
self.ball_1.transform = CGAffineTransformMakeTranslation(-BALL_RADIUS, 0);
self.ball_3.transform = CGAffineTransformMakeTranslation(BALL_RADIUS, 0);
b.在位移的過程中，我們需要設(shè)置球1双霍、球2鹦倚、球3的大小，請看一下設(shè)置完位移和大小之后球1和球3的軌跡運動圖像押蚤。
self.ball_1.transform = CGAffineTransformScale(self.ball_1.transform, 0.7, 0.7);
self.ball_3.transform = CGAffineTransformScale(self.ball_3.transform, 0.7, 0.7);
self.ball_2.transform = CGAffineTransformScale(self.ball_2.transform, 0.7, 0.7);
c.在一段時間后蔑歌，把球1和球2的x值和size設(shè)為動畫前的大小，因此我們用UIView 的animation 動畫來完成這3個動畫
[UIView animateWithDuration:0.3 delay:0.1 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionBeginFromCurrentState animations:^{
self.ball_1.transform = CGAffineTransformMakeTranslation(-BALL_RADIUS, 0);
self.ball_1.transform = CGAffineTransformScale(self.ball_1.transform, 0.7, 0.7);
self.ball_3.transform = CGAffineTransformMakeTranslation(BALL_RADIUS, 0);
self.ball_3.transform = CGAffineTransformScale(self.ball_3.transform, 0.7, 0.7);
self.ball_2.transform = CGAffineTransformScale(self.ball_2.transform, 0.7, 0.7);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3 delay:0.1 options:UIViewAnimationOptionCurveEaseIn | UIViewAnimationOptionBeginFromCurrentState animations:^{
self.ball_1.transform = CGAffineTransformIdentity;
self.ball_3.transform = CGAffineTransformIdentity;
self.ball_2.transform = CGAffineTransformIdentity;
} completion:NULL];
}];
d.循環(huán)動畫：我們在動畫代理事件的- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag中調(diào)用動畫開始的函數(shù)揽碘，這樣在動畫結(jié)束的時候就會自動的調(diào)用動畫進(jìn)行循環(huán)播放次屠。
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
[self rotationAnimation];
}
4.毛玻璃效果的添加
利用系統(tǒng)自帶的UIVisualEffectView類來創(chuàng)建毛玻璃效果，并設(shè)置為self.bouns來覆蓋整個視圖雳刺，詳細(xì)關(guān)于UIVisualEffectView的介紹請看《最近開發(fā)遇到的一些UI問題》
UIVisualEffectView *bgView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
bgView.alpha = 0.9f;
bgView.frame = CGRectMake(0, 0, WIDTH, HEIGHT);
bgView.layer.cornerRadius = BALL_RADIUS / 2;
bgView.clipsToBounds = YES;
[self addSubview:bgView];
5.后記
最近在從OC轉(zhuǎn)為Swift劫灶，自己也遇到了一些基于Swift很不錯的動畫，希望在學(xué)完Swift后能轉(zhuǎn)為OC掖桦，并和大家分享這個過程本昏。學(xué)習(xí)動畫中遇到了很多問題，有幾何學(xué)上和物理上的問題枪汪，奈何高中數(shù)學(xué)老師死得早涌穆，幾何部分理解起來常常比較吃力，無奈自己愛折騰雀久，希望能有更大的突破宿稀。
