今天在精選 20 個優(yōu)質的加載動畫中發(fā)現(xiàn)了一個蠻有意思的加載動畫：
正好最近原來的加載動畫用的膩了??
所以決定用OC實現(xiàn)一下這個動畫來用看看辛辨。
那么我們開始
首先十饥，分析一下這個動畫：
1.元素分析
從gif上看丧蘸，主體由一個盒子（三角形的洞）和一些飄落的元素組成（下方的字表示??）漂洋。
2.動畫分析
我們看到飄落的字從紅框的位置隨機出現(xiàn)，然后落向黃線的隨機位置消失力喷，同時透明度也從0開始變成1刽漂。
動畫過程中，伴隨著不同的角速度進行旋轉弟孟，下落的速度也各不相同贝咙。
因此我們需要準備以下幾個方法來實現(xiàn)動畫效果：
1.產生隨機的起點坐標
2.產生隨機的終點坐標
3.產生隨機的速度、角速度
4.實現(xiàn)位移拂募、旋轉庭猩、透明度改變的動畫
從上面的分析來看窟她，要實現(xiàn)這個效果并不是很困難??。
So,Les's do it.
3.需要用到的知識儲備
Core Animation
然后...嗯...貌似就夠了...
4.代碼實現(xiàn)
1.隨機產生起點和終點坐標
//獲取起點坐標
- (CGPoint)randomBeginPoint{
return [self getRandomFrameInRect:CGRectMake(0, 0, self.frame.size.width, 10)];
}
//獲取終點坐標
- (CGPoint)randomEndPoint{
return [self getRandomFrameInRect:CGRectMake(0, self.frame.size.height - 20, self.frame.size.width, 10)];
}
//方形區(qū)域內產生隨機點
- (CGPoint)getRandomFrameInRect:(CGRect)rect{
CGFloat minX = rect.origin.x;
CGFloat width = rect.size.width;
CGFloat minY = rect.origin.y;
CGFloat height = rect.size.height;
//產生隨機數
CGFloat randomX = minX + (float)(arc4random() % (int)width);
CGFloat randomY = minY + (float)(arc4random() % (int)height);
return CGPointMake(randomX, randomY);
}
2.產生隨機的角速度與下落速度
下落速度：通過下落到終點所需時間（即動畫時間）設定
角速度：下落到終點時旋轉的角度 和 動畫時間 共同決定旋轉的角速度
//獲取隨機的動畫時間
- (CGFloat)getRandomDuration{
//產生隨機數（這里我們定義的動畫時間為0.5s～1.0s）
int time = arc4random()%50 + 50;
CGFloat duration = time/100;
return duration;
}
//獲取隨機的角度
- (CGFloat)getRandomRotation{
//產生隨機數（這里我們定義的旋轉角度范圍為 -180度～180度）
int angle = arc4random()%360 - 180;
CGFloat rotation = angle*180/M_PI;
return rotation;
}
3.產生動畫的方法
- (void)addAnimationToLayer:(CALayer*)layer{
//獲取隨機參數
CGFloat duration = [self getRandomDuration];
CGFloat rotation = [self getRandomRotation];
CGPoint beginPoint = [self getRandomBeginPoint];
CGPoint endPoint = [self getRandomEndPoint];
//平移
CABasicAnimation *positionAnim = [CABasicAnimation animationWithKeyPath:@"position"];
positionAnim.duration = duration;
positionAnim.fromValue = [NSValue valueWithCGPoint:beginPoint];
positionAnim.toValue = [NSValue valueWithCGPoint:endPoint];
positionAnim.fillMode = kCAFillModeForwards;
//旋轉
CABasicAnimation *transformAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
transformAnim.duration = duration;
// 繞著(0, 0, 1)這個向量軸順時針旋轉rotation
transformAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(rotation, 0, 0, 1)];
//透明度
CABasicAnimation *opacityAnimation =[CABasicAnimation animationWithKeyPath:@"opacity"];
opacityAnimation.fromValue = @0.f;
opacityAnimation.toValue = @1.f;
opacityAnimation.duration = duration;
opacityAnimation.fillMode = kCAFillModeForwards;
[layer addAnimation:positionAnim forKey:@"lposition"];
[layer addAnimation:transformAnim forKey:@"ltransform"];
[layer addAnimation:opacityAnimation forKey:@"lopacity"];
layer.opacity = 0;
//循環(huán)動畫
if (animation) {
[self performSelector:@selector(addAnimationToLayer:) withObject:layer afterDelay:duration];
}
}
4.測試一下動畫的效果
UILabel *label = [[UILabel alloc]init];
label.text = @"0";
label.font = [UIFont systemFontOfSize:20];
label.textColor = [UIColor whiteColor];
[label sizeToFit];
[self addSubview:label];
[self addAnimationToLayer:label.layer];
5.循環(huán)動畫
增加一個屬性animation來判斷是否循環(huán)執(zhí)行動畫（這樣如果要停止循環(huán)只要把它設置為NO就好了）眯娱，然后在addAnimationToLayer:添加循環(huán)調用的方法：
//循環(huán)動畫
if (_animation) {
[self performSelector:@selector(addAnimationToLayer:) withObject:layer afterDelay:duration];
}
6.添加細節(jié)
經過上面的過程礁苗，動畫的效果已經解決了。
接下來就是產生4個元素徙缴，再加上下面終點的圖片试伙，基本上就可以達到想要的效果了。
上圖：
好了 今天先實現(xiàn)到這里于样，后續(xù)有空到話再繼續(xù)優(yōu)化疏叨，代碼已經上傳到GZCLoding，如果有什么建議穿剖，歡迎留言告訴我哦蚤蔓。
