第一篇：iOS動畫系列之一：通過實戰(zhàn)學習CALayer和透視的原理凯旭。做一個帶時分秒指針的時鐘動畫(上)
第二篇：iOS動畫系列之二：通過實戰(zhàn)學習CALayer和透視的原理萤厅。做一個帶時分秒指針的時鐘動畫入录。包含了OC和Swift兩種源代碼(下)
第三篇：iOS動畫系列之三：Core Animation来涨。介紹了Core Animation的常用屬性和方法塔橡。
第四篇：CABasic Animation梅割。iOS動畫系列之四：基礎動畫之平移篇
第五篇：CABasic Animation。iOS動畫系列之五：基礎動畫之縮放篇&旋轉篇
第六篇：iOS動畫系列之六：利用CABasic Animation完成帶動畫特效的登錄界面
第七篇：iOS動畫系列之七：實現類似Twitter的啟動動畫
第八篇：iOS動畫系列之八：使用CAShapeLayer繪畫動態(tài)流量圖
第九篇：iOS動畫系列之九：實現點贊的動畫及播放起伏指示器
第十篇：實戰(zhàn)系列:繪制過山車場景
就像咱們之前說的葛家，所有的動畫都是在CALayer上面的户辞。所以在做動畫之前我們就要先建立一個CALayer，然后把動畫作用在自己創(chuàng)建的這個CALayer上癞谒。如果不知道CALyer是啥底燎，可以看看前面的分享哈。傳輸門：第一篇：iOS動畫系列之一：通過實戰(zhàn)學習CALayer和透視的原理弹砚。做一個帶時分秒指針的時鐘動畫(上)
最終實現的效果：
1. 基礎版的平移
這里重點是為了演示fromValue／toValue 双仍、 設置layer的Position位置、實現代理方法里面設置position的區(qū)別桌吃。
最終實現的效果：
步驟如下：
1, 創(chuàng)建CALayer朱沃。
2, 設置CALayer的位置、大小、背景顏色逗物。
3, 將自定義的CALayer添加到主視圖的view上面搬卒。
4, 實例化一個CABasicAnimation對象。
5, 設置動畫屬性為平移翎卓。
6, 設置動畫的起始位置契邀，從哪里到哪里。
7莲祸，設置動畫的持續(xù)時間蹂安、填充模式、重復次數锐帜、設置代理。
8, 將動畫添加到需要作用的CALayer上面畜号。
9, 實現<CAAnimationDelegate>的代理方法：動畫開始時調用的方法缴阎、動畫結束時調用的方法。
//遵守動畫的代理協議
@interface STBasicPositionViewController ()<CAAnimationDelegate>
@property(weak,nonatomic)CALayer * redLayer;
@end
@implementation STBasicPositionViewController
- (void)viewDidLoad {
[super viewDidLoad];
//創(chuàng)建CALayer
CALayer *redLayer = [CALayer layer];
//設置位置和大小
redLayer.position = CGPointMake(200, 200);
redLayer.bounds = CGRectMake(0, 0, 100, 100);
//設置背景顏色
redLayer.backgroundColor = [UIColor redColor].CGColor;
//把layer添加到UIView的layer上
[self.view.layer addSublayer:redLayer];
self.redLayer = redLayer;
/*------------開始設置動畫------------------------*/
//創(chuàng)建動畫對象
CABasicAnimation *basicAni = [CABasicAnimation animation];
//設置動畫屬性
basicAni.keyPath = @"position";
//設置動畫的起始位置简软。也就是動畫從哪里到哪里
basicAni.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
//動畫結束后蛮拔，layer所在的位置
basicAni.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)];
//動畫持續(xù)時間
basicAni.duration = 2;
//動畫填充模式
basicAni.fillMode = kCAFillModeForwards;
//動畫完成不刪除
basicAni.removedOnCompletion = NO;
//xcode8.0之后需要遵守代理協議
basicAni.delegate = self;
//把動畫添加到要作用的Layer上面
[self.redLayer addAnimation:basicAni forKey:nil];
}
#pragma 實現代理協議的方法
//動畫開始的時候調用
- (void)animationDidStart:(CAAnimation *)anim{
self.redLayer.position = CGPointMake(300, 100);
}
//動畫結束的時候調用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
self.redLayer.position = CGPointMake(300, 400);
}
@end
2. 創(chuàng)建不同速度控制的動畫
上面代碼里面我們看到了有一些莫名其妙出來的字符串，例如在設置動畫屬性的時候出來的:
//設置動畫屬性
basicAni.keyPath = @"position";
//動畫填充模式
basicAni.fillMode = kCAFillModeForwards;
這些屬性痹升，在前一篇很枯燥的分享里面有提到建炫。有需要的童鞋可以點進去當作字典翻一下。也沒有啥記憶的必要性疼蛾，需要的時候查一下肛跌，需要的時候查一下就好了。傳輸門：第三篇：iOS動畫系列之三：Core Animation察郁。介紹了Core Animation的常用屬性和方法衍慎。
速度控制一共有四種模式：
kCAMediaTimingFunctionLinear（線性）：勻速，給你一個相對靜態(tài)的感覺
kCAMediaTimingFunctionEaseIn（漸進）：動畫緩慢進入皮钠，然后加速離開
kCAMediaTimingFunctionEaseOut（漸出）：動畫全速進入稳捆，然后減速的到達目的地
kCAMediaTimingFunctionEaseInEaseOut（漸進漸出）：動畫緩慢的進入，中間加速麦轰，然后減速的到達目的地乔夯。這個是默認的動畫行為。
2.1 抽取創(chuàng)建Layer及動畫的公共方法
為了能夠偷點懶款侵，所以抽取了公共的方法末荐。可以很方便的創(chuàng)建Layer以及動畫喳坠。哈哈鞠评，本宅胖要是不懶就不會這么胖了。
#pragma 抽取創(chuàng)建動畫及Layer的公共方法
//創(chuàng)建CALayer
- (CALayer *)createLayerWithPosition:(CGPoint)position backgroundColor:(UIColor *)backgroundColor{
//創(chuàng)建CALayer
CALayer *layer = [CALayer layer];
//設置位置和大小
layer.position = position;
layer.bounds = CGRectMake(0, 0, 100, 100);
//設置背景顏色
layer.backgroundColor = backgroundColor.CGColor;
//把layer添加到UIView的layer上
[self.view.layer addSublayer:layer];
return layer;
}
//創(chuàng)建動畫
- (CABasicAnimation *)createBasicAnimationWithFromValue:(CGPoint)fromValue toValue:(CGPoint)toValue timingFunction:(NSString *)timingFunction{
//創(chuàng)建動畫對象
CABasicAnimation *basicAni = [CABasicAnimation animation];
//設置動畫屬性
basicAni.keyPath = @"position";
//設置動畫的起始位置壕鹉。也就是動畫從哪里到哪里
basicAni.fromValue = [NSValue valueWithCGPoint:fromValue];
//動畫結束后剃幌，layer所在的位置
basicAni.toValue = [NSValue valueWithCGPoint:toValue];
//動畫持續(xù)時間
basicAni.duration = 2;
//動畫重復次數
basicAni.repeatCount = CGFLOAT_MAX;
//xcode8.0之后需要遵守代理協議
basicAni.delegate = self;
basicAni.timingFunction = [CAMediaTimingFunction functionWithName:timingFunction];
return basicAni;
}
2.2 創(chuàng)建Layer和動畫
這里我們只創(chuàng)建一個為例聋涨。
// 創(chuàng)建紅色線性運動的Layer
self.redLayer = [self createLayerWithPosition:CGPointMake(0, 150) backgroundColor:[UIColor redColor]];
[self.redLayer addAnimation:[self createBasicAnimationWithFromValue:CGPointMake(0, 150) toValue:CGPointMake(300, 150) timingFunction:kCAMediaTimingFunctionLinear] forKey:@"linear"];
有朋友可能發(fā)現了，為啥添加動畫的時候后面的forKey怎么不是之前的nil了呢负乡？
這里添加一個key值牍白，實際上是為這個動畫對象起了一個名字，通過key值抖棘，可以很方便的取到這個動畫對象
2.3 移除動畫
動畫播放完成之后茂腥，我們通過key值將這個動畫移除掉。
這個方法當然是在動畫結束的時候調用最合適切省，不然動畫還沒放完就移除了豈不是開天窗啦～
CAAnimationDelegate這個里面的代理方法終于起到作用了最岗。
//動畫結束的時候調用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
[self.redLayer removeAnimationForKey:@"linear"];
[self.blueLayer removeAnimationForKey:@"easeIn"];
[self.grayLayer removeAnimationForKey:@"easeOut"];
[self.greenLayer removeAnimationForKey:@"easeInAndEaseOut"];
}
3. Swift版本的部分差異
Swift版本幾乎和OC的一模一樣。略有不同的是朝捆，swift在加載layer的時候般渡，我們使用了懶加載的方式。也就是在使用的時候才去創(chuàng)建這個layer芙盘。
源代碼也放在了碼云上面驯用。
//MARK: - 懶加載
private lazy var redLayer: CALayer = {
let layer = self.createLayer(position: CGPoint(x: 0, y: 150), backgroundColor: UIColor.red)
return layer
}()
今天就到這里啦∪謇希看樣子宏圖偉業(yè)打算一篇寫完的CABasic Animation是沒戲啦蝴乔。下一篇文章寫縮放這些的吧。任性的技術宅驮樊。哈哈～
喜歡的話就點個贊唄薇正，或者賞俺點口糧。么么噠～愛你們～
OC和Swift的下載地址如下：
https://git.oschina.net/atypical/CABasic-Animation.git
