IOS-簡單動畫

標籤：

iOS那些簡單的動畫（不定期更新）字數669 閱讀1118 評論16 喜歡59關於 Core Animation

Core Animation是一組非常強大的動畫處理API,使用它能做出很多優雅的動畫效果。能用的動畫類有4個子類：CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup

開發步驟:

1. 初始化一個動畫對象(CAAnimation)並設定一些動畫相關屬性.

2. 添加動畫對象到層(CALayer)中,開始執行動畫.

CALayer中很多屬性都可以通過CAAnimation實現動畫效果, 包括opacity, position, transform, bounds, contents等，具體可以在API文檔中尋找

通過調用CALayer的addAnimation:forKey:增加動畫到層(CALayer)中,這樣就能觸發動畫了.通過調用removeAnimationForKey:可以停止層中的動畫.

註：Core Animation的動畫執行過程都是在後台操作的,不會阻塞主線程.

建立動畫時你可能用到的屬性

屬性	解讀
Autoreverses	設定這個屬性為 YES 時,在它到達目的地之後,動畫的返回到開始的值,代替了直接跳轉到開始的值，過渡平滑
Duration	設定開始值到結束值花費的時間。期間會被速度的屬性所影響
RemovedOnCompletion	這個屬性預設為 YES,在指定的時間段完成後,動畫就自動的從層上移除了。
FillMode	這個屬性一般和 RemovedOnCompletion 配合使用，保持動畫狀態。其中kCAFillModeForwards 當動畫結束後,layer會一直保持著動畫最後的狀態.此時將RemovedOnCompletion設為NO
Speed	預設的值為 1.0.如果你改變這個值為 2.0,動畫會用 2 倍的速度播放。這樣的影響就是使期間減半。如果你指定的期間為 6 秒,速度為 2.0,動畫就會播放 3 秒鐘即一半的期間。
RepeatCount	預設的是 0,動畫只會播放一次。如果指定一個無限大的重複次數,使用 MAXFLOAT 。這個不應該和 repeatDration 屬性一塊使用
RepeatDuration	這個屬性指定了動畫應該被重複多久。動畫會一直重複,直到設定的時間用完。同上它不應該和 repeatCount 一起使用
FromValue	設定動畫的初始值
ToValue	設定動畫的到達值
TimingFunction	控制動畫啟動並執行節奏. kCAMediaTimingFunctionLinear（線性）：勻速，給你一個相對靜態感覺 kCAMediaTimingFunctionEaseIn（漸進）：動畫緩慢進入，然後加速離開 kCAMediaTimingFunctionEaseOut（漸出）：動畫全速進入，然後減速的到達目的地 kCAMediaTimingFunctionEaseInEaseOut（漸進漸出）：動畫緩慢的進入，中間加速，然後減速的到達目的地。這個是預設的動畫行為。
BeginTime	可以用來設定動畫順延強制時間，若想延遲1s，就設定為CACurrentMediaTime()+1，CACurrentMediaTime()為圖層的目前時間

巧妙的運用這些可以屬性實現很棒的動畫效果，比如下面：用CABasicAnimation實現的動畫

CABasicAnimation動畫

簡單的呼吸和搖擺動畫

animation.gif

簡單的代碼

 1.呼吸動畫    CABasicAnimation *animation =[CABasicAnimation animationWithKeyPath:@"opacity"];    animation.fromValue = [NSNumber numberWithFloat:1.0f];    animation.toValue = [NSNumber numberWithFloat:0.0f];    animation.autoreverses = YES;    //回退動畫（動畫可逆，即迴圈）    animation.duration = 1.0f;    animation.repeatCount = MAXFLOAT;    animation.removedOnCompletion = NO;    animation.fillMode = kCAFillModeForwards;//removedOnCompletion,fillMode配合使用保持動畫完成效果    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];    [self.alphaTagButton.layer addAnimation:animation forKey:@"aAlpha"];  2.搖擺動畫    //設定旋轉原點    self.sharkTagButton.layer.anchorPoint = CGPointMake(0.5, 0);    CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];    //角度轉弧度（這裡用1，-1簡單處理一下）    rotationAnimation.toValue = [NSNumber numberWithFloat:1];    rotationAnimation.fromValue = [NSNumber numberWithFloat:-1];    rotationAnimation.duration = 1.0f;    rotationAnimation.repeatCount = MAXFLOAT;    rotationAnimation.removedOnCompletion = NO;    rotationAnimation.autoreverses = YES;    rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];    rotationAnimation.fillMode = kCAFillModeForwards;    [self.sharkTagButton.layer addAnimation:rotationAnimation forKey:@"revItUpAnimation"];

陀螺儀&加速儀的動畫

ps:好吧 這個屬於亂入，和上面的搖擺動畫差不多的效果，只是這個是手動的 哈哈

3、陀螺儀&加速儀的動畫    self.motionManager = [[CMMotionManager alloc] init];    self.motionManager.deviceMotionUpdateInterval = 1.0f/100.0f; //1秒100次    self.sharkTagButton.layer.anchorPoint = CGPointMake(0.5, 0);    [self.motionManager startDeviceMotionUpdatesToQueue:[NSOperationQueue currentQueue] withHandler:^(CMDeviceMotion *motion, NSError *error) {        if(fabs(motion.attitude.roll)<1.0f)        {            [UIView animateWithDuration:0.6 animations:^{                self.sharkTagButton.layer.transform = CATransform3DMakeRotation(-(motion.attitude.roll), 0, 0, 1);            }];        }else if (fabs(motion.attitude.roll)<1.5f)        {            [UIView animateWithDuration:0.6 animations:^{                int s;                if (motion.attitude.roll>0)                {                    s=-1;                }else                {                    s = 1;                }                self.sharkTagButton.layer.transform = CATransform3DMakeRotation(s*M_PI_2, 0, 0, 1);            }];        }        if ((motion.attitude.pitch)<0)        {            [UIView animateWithDuration:0.6 animations:^{                self.sharkTagButton.layer.transform = CATransform3DMakeRotation(M_PI, 0, 0, 1);            }];        }    }];

Demo地址：
https://github.com/yongliangP/CABasicAnimationDemo

CATransition之簡單的轉場動畫

CAAnimation的子類，用於做轉場動畫，能夠為層提供移出螢幕和移入螢幕的動畫效果。

屬性	解讀
type	動畫過渡類型
subtype	動畫過渡方向

• 常用動畫類型:

type的值	解讀	對應常量
fade	淡入淡出	kCATransitionFade
push	推擠	kCATransitionPush
reveal	揭開	kCATransitionReveal
moveIn	覆蓋	kCATransitionMoveIn
cube	立方體	私人API
suckEffect	吮吸	私人API
oglFlip	翻轉	私人API
rippleEffect	波紋	私人API
pageCurl	反翻頁	私人API
cameraIrisHollowOpen	開鏡頭	私人API
cameraIrisHollowClose	關鏡頭	私人API

註：私人API只能通過字串使用哈

• 過渡方向參數:

subtype的值	解讀
kCATransitionFromRight	從右轉場
kCATransitionFromLeft	從左轉場
kCATransitionFromBottom	從下轉場
kCATransitionFromTop	從上轉場

簡單的CATransition動畫

CATransitionDemo2.gif

-(void)animationWithType:(NSString*)type{    //- 建立一個轉場動畫:    CATransition *transition = [CATransition animation];    transition.repeatCount = 5;    //    - 確定動畫類型:    transition.type = type;    //    - 確定子類型(方向等)    transition.subtype = kCATransitionFromLeft;    //    - 確定動畫時間    transition.duration = 1;    //    - 添加動畫    [self.imageView.layer addAnimation:transition forKey:nil];}

使用時只用傳你的想要的動畫類型就好，私人API只能通過字串使用哈。

[self animationWithType:self.dataArray[indexPath.row]];

DEMO地址：https://github.com/yongliangP/CATransitionDemo

---20160908更新CAKeyframeAnimation

先看圖，就是那個在跑的小圓球，為了方便，把動畫整合在了一個Demo裡了

ScreenShotDemo2.gif

• 1 .簡單介紹

  CAKeyframeAnimation是CApropertyAnimation的子類，跟CABasicAnimation的區別是：CABasicAnimation只能從一個數值(fromValue)變到另一個數值(toValue)，而CAKeyframeAnimation會使用一個NSArray儲存這些數值，是一種更靈活的動畫方式。

• 2 .屬性介紹

屬性	解讀
values	NSArray對象，裡面的元素稱為”主要畫面格”(keyframe)。動畫對象會在指定的時間(duration)內，依次顯示values數組中的每一個主要畫面格
path	可以設定一個CGPathRef\CGMutablePathRef,讓層跟著路徑移動。path只對CALayer的anchorPoint和position起作用。如果你設定了path，那麼values將被忽略
keyTimes	可以為對應的主要畫面格指定對應的時間點,其取值範圍為[0,1],keyTimes中的每一個時間值都對應values中的每一幀.當keyTimes沒有設定的時候,各個主要畫面格的時間是平分的

• 3 .實現
  • 3.1 values方式實現

-(void)setUpCAKeyframeAnimationUseValues{    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];    animation.keyPath = @"position";    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(50, 50)];    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(kWindowWidth - 50, 50)];    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(kWindowWidth - 50, kWindowHeight-50)];    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(50, kWindowHeight-50)];    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(50, 50)];    animation.values = @[value1,value2,value3,value4,value5];    animation.repeatCount = MAXFLOAT;    animation.removedOnCompletion = NO;    animation.fillMode = kCAFillModeForwards;    animation.duration = 6.0f;    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];    [self.keyButton.layer addAnimation:animation forKey:@"values"];}

• • 3.2 path方式實現

-(void)setUpCAKeyframeAnimationUsePath{    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];    animation.keyPath = @"position";    CGMutablePathRef path = CGPathCreateMutable();    //矩形線路    CGPathAddRect(path, NULL, CGRectMake(50,50, kWindowWidth - 100,kWindowHeight - 100));    animation.path=path;    CGPathRelease(path);    animation.repeatCount = MAXFLOAT;    animation.removedOnCompletion = NO;    animation.fillMode = kCAFillModeForwards;    animation.duration = 10.0f;    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];    [self.keyButton.layer addAnimation:animation forKey:@"path"];}

• • 3.3 keyTimes示範

-(void)setUpCAKeyframeAnimationUsekeyTimes{    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];//    animation.keyPath = @"transform.translation.x";    animation.keyPath = @"position.x";    animation.values = @[@0, @20, @-20, @20, @0];    animation.keyTimes = @[ @0, @(1 / 6.0), @(3 / 6.0), @(5 / 6.0), @1 ];    animation.duration = 0.5;    animation.additive = YES;    [self.sharkTagButton.layer addAnimation:animation forKey:@"keyTimes"];}

附：關於keyPath你可能用到的屬性

屬性	解讀
transform.rotation.x	圍繞x軸翻轉。y,z同理 參數：角度
transform.rotation	預設圍繞z軸
transform.scale.x	x方向縮放。y,z同理
transform.scale	所有方向縮放
transform.translation.x	x軸方向移動,參數：x軸上的座標。y,z同理
transform.translation	移動到的點
zPosition	平面的位置
opacity	透明度
backgroundColor	背景顏色 參數：顏色 (id)[[UIColor redColor] CGColor]
cornerRadius	layer圓角
borderWidth	邊框寬度
bounds	大小 參數：CGRect
contents	內容 參數：CGImage
contentsRect	可視內容 參數：CGRect 值是0～1之間的小數
position	位置,效果和transform.rotation差不多
shadowColor	陰影顏色
shadowOffset	陰影位移
shadowOpacity	陰影透明度
shadowRadius	陰影角度

照例放Demo
Demo地址：
https://github.com/yongliangP/CABasicAnimationDemo

iceMaple

原文連結：http://www.jianshu.com/p/a098f6e3617f

IOS-簡單動畫