6> CoreAnimation
- Core Animation是直接作用在CALayer上的,并非UIView。
Core Animation,中文翻譯為核心動畫,它是一組非常強大的動畫處理API,使用它能做出非常炫麗的動畫效果,而且往往是事半功倍。也就是說,使用少量的代碼就可以實現非常強大的功能。
Core Animation可以用在Mac OS X和iOS平臺。
Core Animation的動畫執行過程都是在后臺操作的,不會阻塞主線程。
要注意的是,Core Animation是直接作用在CALayer上的,并非UIView。 - Core Animation結構
- Core Animation 使用步驟
如果不是xcode5之后的版本,使用它需要先添加QuartzCore.framework和引入對應的框架<QuartzCore/QuartzCore.h>
開發步驟:
1.首先得有CALayer
2.初始化一個CAAnimation對象,并設置一些動畫相關屬性
3.通過調用CALayer的addAnimation:forKey:方法,增加CAAnimation對象到CALayer中,這樣就能開始執行動畫了
4.通過調用CALayer的removeAnimationForKey:方法可以停止CALayer中的動畫 - 創建CALayer
- touchBegin,點擊屏幕,做動畫
- 創建動畫,添加動畫到CALayer
- 怎樣執行動畫?執行動畫的本質是改變圖層的屬性。
- 告訴動畫執行怎樣的動畫?設置動畫屬性(position)
- 告訴動畫屬性怎么改變?設置動畫屬性值改變 toValue fromValue
- duration:動畫時長
- 動畫有反彈?取消反彈
1> 執行動畫完畢不要移除
2> 設置動畫填充模式,保持最新的位置。 - rotation:
三維旋轉:transform
二維旋轉:transform.rotation - scale
- 設置圖層內容(心)
- tovalue:@0.5
//創建動畫對象
CABasicAnimation *anim = [CABasicAnimation animation];
//設置屬性值.
anim.keyPath = @"transform.rotation";
anim.toValue = @(M_PI);
//動畫完成時會自動的刪除動畫.
//動畫完成時要不要刪除動畫
anim.removedOnCompletion = NO;
//讓動畫始終保存最前面的效果.
anim.fillMode = @"forwards"
//添加動畫
[self.redView.layer addAnimation:anim forKey:nil];
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
//添加動畫
CABasicAnimation *anim = [CABasicAnimation animation];
//設置屬性值.
anim.keyPath = @"transform.scale";
anim.toValue = @0;
//想要動畫執行多次
anim.repeatCount = MAXFLOAT;
//設置動畫的執行時長
anim.duration = 0.5;
//反轉,怎么去的,怎么樣回來.
anim.autoreverses = YES;
//添加動畫
[self.imageV.layer addAnimation:anim forKey:nil];
}
//創建動畫對象
CABasicAnimation *anim = [CABasicAnimation animation];
//設置屬性值.
anim.keyPath = @"transform.rotation";
anim.toValue = @(M_PI);
//動畫完成時會自動的刪除動畫.
//動畫完成時要不要刪除動畫
anim.removedOnCompletion = NO;
//讓動畫始終保存最前面的效果.
anim.fillMode = @"forwards";
//添加動畫
[self.redView.layer addAnimation:anim forKey:nil];
* 總結CABasicAnimation只能在兩個值之間做動畫,怎么多個值做動畫,用CAKeyframeAnimation
7> CAKeyframeAnimation
- 面向view開發,拖一個view
- values:能多個值之間做動畫,按照順序做。
//添加抖動的動畫.
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
//設置屬性值.
anim.keyPath = @"transform.rotation";
anim.values = @[@(angle2Rad(-5)),@(angle2Rad(5))];
anim.autoreverses = YES;
//動畫一直重復執行.
anim.repeatCount = MAXFLOAT;
anim.duration = 0.5;
//添加動畫
[self.iconView.layer addAnimation:anim forKey:nil];
- path
//添加抖動的動畫.
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
//設置屬性值.
anim.keyPath = @"position";
//根據路徑做動畫
// UIBezierPath *path = [UIBezierPath bezierPath];
// [path moveToPoint:CGPointMake(50, 50)];
// [path addLineToPoint:CGPointMake(200, 400)];
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 300, 300)];
anim.path = path.CGPath;
// anim.autoreverses = YES;
//動畫一直重復執行.
anim.repeatCount = MAXFLOAT;
anim.duration = 0.5;
//添加動畫
[self.iconView.layer addAnimation:anim forKey:nil];
- 動畫節奏(timingFunction)
8> * 圖標抖動
- PPT分析,左邊旋轉右邊旋轉 -> keyPath(transform.rotation) -> values -> 有點瘸 -> PPT分析 -> values添加一個值
9> * CATransition
過度動畫又叫轉場動畫 -> type(轉場類型) -> subtype(方向) -> 動畫進度
注意:轉場動畫必須和過度代碼放在一塊,否則沒有效果
static int _i = 1;
//轉場代碼必須得要和轉場動畫在同一個方法當中.,并沒有要求他們的上下順序.
//轉場代碼.
_i++;
if (_i > 3) {
_i = 1;
}
NSString *imageName = [NSString stringWithFormat:@"%d",_i];
self.imageV.image = [UIImage imageNamed:imageName];
//添加轉場動畫
CATransition *anim = [CATransition animation];
anim.duration = 1;
//動畫從哪個點開始.
anim.startProgress = 0.3;
//動畫從哪個點結束.
anim.endProgress = 0.5;
//轉場類型.
anim.type = @"pageCurl";
[self.imageV.layer addAnimation:anim forKey:nil];
10> * CAAnimationGroup
同時進行多種動畫 -> 平移,旋轉,縮放 -> 取消反彈
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
CAAnimationGroup *animGroup = [CAAnimationGroup animation];
//animations數組當中存入的都是animation對象
//平移
CABasicAnimation *anim = [CABasicAnimation animation];
anim.keyPath = @"position.y";
anim.toValue = @(400);
//縮放
CABasicAnimation *anim2 = [CABasicAnimation animation];
anim2.keyPath = @"transform.scale";
anim2.toValue = @(0.5);
//會自動執行數組當中所有的動畫對象.
animGroup.animations = @[anim,anim2];
//動畫完成不要刪除動畫
animGroup.removedOnCompletion = NO;
//始終保持最前面的效果
animGroup.fillMode = kCAFillModeForwards;
[self.redView.layer addAnimation:animGroup forKey:nil];
}
11> * UIView封裝的動畫
單視圖
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion;
參數說明:
duration:動畫的持續時間
view:需要進行轉場動畫的視圖
options:轉場動畫的類型
animations:將改變視圖屬性的代碼放在這個block中
completion:動畫結束后,會自動調用這個block
雙視圖
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion;
參數說明:
duration:動畫的持續時間
options:轉場動畫的類型
animations:將改變視圖屬性的代碼放在這個block中
completion:動畫結束后,會自動調用這個block
* 什么時候用核心動畫,什么時候用UIView動畫
* 核心動畫的缺點:都是假象,不能真正改變圖層屬性的值
* 展示和真實的位置不同
* 如果改變位置就用UIView的動畫
* 轉場動畫就用核心動畫
* 為什么轉場用核心動畫?因為UIView的轉場動畫太少。
* 演示UIView的轉場動畫
* touchBegin,切換圖片