動(dòng)畫學(xué)習(xí)
一库北、基礎(chǔ)知識(shí)
層次圖
CAAnimation是所有動(dòng)畫類的父類，它是一個(gè)抽象類载荔，不能夠直接使用應(yīng)該使用它的子類
動(dòng)畫類
類的說明
- 能用的動(dòng)畫類只有 4 個(gè)子類
CABasicAnimation
CAKeyframeAnimation
CATransition
-
CAAnimationGroup
①CABasicAnimation 通過設(shè)定起始點(diǎn)生闲，終點(diǎn)，時(shí)間洞渤，動(dòng)畫會(huì)沿著你這設(shè)定點(diǎn)進(jìn)行移動(dòng)∥钒穑可以看做特殊的CAKeyFrameAnimation ②CAKeyframeAnimation Keyframe顧名思義就是關(guān)鍵點(diǎn)的frame您宪，你可以通過設(shè)定CALayer的始點(diǎn)、中間關(guān)鍵點(diǎn)奠涌、終點(diǎn)的frame宪巨，時(shí)間，動(dòng)畫會(huì)沿你設(shè)定的軌跡進(jìn)行移動(dòng) ③CAAnimationGroup Group也就是組合的意思溜畅，就是把對(duì)這個(gè)Layer的所有動(dòng)畫都組合起來捏卓。 ④CATransition 這個(gè)就是蘋果幫開發(fā)者封裝好的一些動(dòng)畫
二、CABasicAnimation
-
常見屬性：
duration: 動(dòng)畫持續(xù)時(shí)間 repeatCount: 動(dòng)畫重復(fù)次數(shù) repeatDuration: 設(shè)置動(dòng)畫的時(shí)間慈格，在該段時(shí)間內(nèi)動(dòng)畫一直執(zhí)行怠晴，不記次數(shù) timingFunction: 動(dòng)畫的變化速度 fillMode: 動(dòng)畫在開始和結(jié)束時(shí)的動(dòng)作，默認(rèn)只是kCAFillModeRemoved beginTime: 設(shè)置動(dòng)畫開始執(zhí)行時(shí)間 autoreverses: 動(dòng)畫結(jié)束時(shí)是否執(zhí)行逆動(dòng)畫 fromValue: 所改變屬性的起始值 toValue: 所改變屬性的起始值
一些常用的aniamtionWithKeyPath的值
| 值 | 說明 | 使用形式 |
|---|---|---|
| transform.translation | 平移變換 | @(100) |
| transform.translation.x | 沿x軸平移 | @(100) |
| transform.translation.y | 沿y軸平移 | @(100) |
| transform.scale | 比例轉(zhuǎn)化 | @(0.8) |
| transform.scale.x | 寬的比例 | @(0.8) |
| transform.scale.y | 高的比例 | @(0.8) |
| transform.rotation.x | 圍繞x軸旋轉(zhuǎn) | @(M_PI) |
| transform.rotation.y | 圍繞y軸旋轉(zhuǎn) | @(M_PI) |
| transform.rotation.z | 圍繞z軸旋轉(zhuǎn) | @(M_PI) |
| position | 位置改變 | [NSValue valueWithCGPoint(100,100)] |
| opacity | 透明度 | @(0.7) |
| backgroundColor | 背景顏色的變化 | [UIColor redColor].CGColor |
| bounds | 大小的變化浴捆，中心點(diǎn)不變 | [NSValue valueWithCGSize:CGSizeMake(50, 50)] |
| contents | 內(nèi)容變化蒜田，比如UIImageView的圖片 | [UIImage imageNamed:@"123.png"].CGImage |
下面實(shí)現(xiàn)一個(gè)簡(jiǎn)單的位移動(dòng)畫
CABasicAnimation *positionAniamtion = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];//沿x軸位移
positionAniamtion.fromValue = @100;
positionAniamtion.toValue = @150;
positionAniamtion.duration = 2.0;
positionAniamtion.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
//動(dòng)畫完成后不刪除
positionAniamtion.removedOnCompletion = NO;
//保持最新的狀態(tài)
positionAniamtion.fillMode = kCAFillModeForwards;
[self.myView.layer addAnimation:positionAniamtion forKey:@"positionAniamtion"];
三、CAKeyframeAnimation
CAKeyframeAnimation是核心動(dòng)畫里面的幀動(dòng)畫,它提供了按照指定的一串值進(jìn)行動(dòng)畫,好像拍電影一樣的一幀一幀的效果
1选泻、屬性說明
values: 許多值組成的的數(shù)組用來進(jìn)行動(dòng)畫的冲粤，只有在path屬性值為nil的時(shí)候才有作用
path: 路徑，可以指定一個(gè)路徑页眯，讓動(dòng)畫沿著這個(gè)指定的路徑執(zhí)行
keyTimes：設(shè)置關(guān)鍵幀對(duì)應(yīng)的時(shí)間點(diǎn)梯捕，范圍：0-1。如果沒有設(shè)置該屬性窝撵，則每一幀的時(shí)間平分傀顾。
cacluationMode: 計(jì)算模式，主要針對(duì)的是每一幀的內(nèi)容為一個(gè)坐標(biāo)點(diǎn)的情況
rotationMode: 旋轉(zhuǎn)樣式
附上代碼：
CAKeyframeAnimation *ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, NULL, CGRectMake(130, 200, 100, 100));
ani.path = path;
CGPathRelease(path);
ani.duration = 2.0;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
ani.repeatCount = MAXFLOAT;
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
[self.myView.layer addAnimation:ani forKey:nil];
四碌奉、CATransition
主要用于轉(zhuǎn)場(chǎng)動(dòng)畫從一個(gè)場(chǎng)景以動(dòng)畫的形式過渡到另一個(gè)場(chǎng)景
1短曾、屬性說明
-
type: 轉(zhuǎn)場(chǎng)動(dòng)畫的類型寒砖，一個(gè)自定義的轉(zhuǎn)場(chǎng)動(dòng)畫中指定的過濾器屬性
type的enum值： kCATransitionFade 漸變 kCATransitonMoveIn 覆蓋 kCATransitionPush 推出 kCATransitionReveal 揭開
還有一些私有動(dòng)畫屬性，不推薦使用错英，私有動(dòng)畫類型的值有cube入撒、suckEffect隆豹、oglFlip椭岩、rippleEffect、pageCurl璃赡、pageUnCurl等等
附上代碼：
CATransition *ani = [CATransition animation];
ani.type = kCATransitionFade;//過渡動(dòng)畫的類型
ani.subtype = kCATransitionFromTop;//過渡動(dòng)畫的方向
ani.duration = 1.5;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
ani.repeatCount = MAXFLOAT;
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
self.myView.backgroundColor = [UIColor redColor];
[self.myView.layer addAnimation:ani forKey:nil];
-
subtype: 轉(zhuǎn)場(chǎng)動(dòng)畫將要去往的方向
subtype的enum值： kCATransitionFromRight 從右邊 kCATransitionFromLeft 從左邊 kCATransitionFromTop 從頂部 kCATransitionFromBottom 從底部 startProgress: 開始的位置進(jìn)度
endPrograss: 結(jié)束的位置進(jìn)度
| 系統(tǒng)API | 效果 | 是否支持方向 |
|---|---|---|
| KCATransitionFade | 淡出效果 | 是 |
| KCATransitionMoveIn | 淡出效果 | 是 |
| KCATransitionPush | 新視圖移動(dòng)到舊視圖上 | 是 |
| KCATransitionFade | 新視圖退出舊視圖 | 是 |
| KCATransitionReveal | 移開舊視圖顯示新視圖 | 是 |
| cube | 淡出效果 | 是 |
| suckEffect | 撕日歷的效果 | 是 |
| oglFlip | 翻轉(zhuǎn)180°效果 | 是 |
| rippleEffect | 漣漪效果 | 是 |
| pageCurl | 向外翻書效果 | 是 |
| pageUnCurl | 向內(nèi)翻書效果 | 是 |
Transform3D的一些方法
1.偏移量的設(shè)置
CATransform3DMakeTranslation(x,y,z)
2.縮放的設(shè)置
CATransform3DMakeScale(x,y,z)
3.旋轉(zhuǎn)設(shè)置
CATransform3DMakeRotation(angle,x,y,z)
4.疊加設(shè)置
CATransform3DMakeRotate(transform3D,angle,x,y,z)
transfrom3D 經(jīng)過變換之后的 上述幾個(gè)返回的都是transfrom3D類型的
