iOS-常用動畫【基礎(chǔ)+進階】

最近寫項目發(fā)現(xiàn)越來越?jīng)]動力了汁讼，

底層的東西實在太讓人頭疼了淆攻。。嘿架。

所幸研究一點好玩的東西～～那就是特效Ｆ可骸！耸彪！

biubiubibuiubiu～～～～～～

好了廢話不說開始講解各種常見的不常見的甚至沒見過的 iOS自帶特效伞芹！

1. 基礎(chǔ)動畫篇

基礎(chǔ)動畫-位移

基礎(chǔ)動畫-位移gif.gif

/**
 *  位移動畫演示
 */
-(void)positionAnimation{
    //使用CABasicAnimation創(chuàng)建基礎(chǔ)動畫
    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
    anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
    anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
    anima.duration = 1.0f;
//    如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那么在動畫執(zhí)行完畢后搜囱，圖層會保持顯示動畫執(zhí)行后的狀態(tài)丑瞧。但在實質(zhì)上，圖層的屬性值還是動畫執(zhí)行前的初始值蜀肘，并沒有真正被改變绊汹。
    //anima.fillMode = kCAFillModeForwards;
    //anima.removedOnCompletion = NO;
    anima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [_demoView.layer addAnimation:anima forKey:@"positionAnimation"];
    
    
    //使用UIView Animation 代碼塊調(diào)用
//    _demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);
//    [UIView animateWithDuration:1.0f animations:^{
//        _demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
//    } completion:^(BOOL finished) {
//        _demoView.frame = CGRectMake(SCREEN_WIDTH/2-25, SCREEN_HEIGHT/2-50, 50, 50);
//    }];
//    
    //使用UIView [begin,commit]模式
//    _demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);
//    [UIView beginAnimations:nil context:nil];
//    [UIView setAnimationDuration:1.0f];
//    _demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
//    [UIView commitAnimations];
}

基礎(chǔ)動畫-透明度

基礎(chǔ)動畫-透明度gif.gif

/**
 *  透明度動畫
 */
-(void)opacityAniamtion{
    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"opacity"];
    anima.fromValue = [NSNumber numberWithFloat:1.0f];
    anima.toValue = [NSNumber numberWithFloat:0.2f];
    anima.duration = 1.0f;
    [_demoView.layer addAnimation:anima forKey:@"opacityAniamtion"];
}

基礎(chǔ)動畫-縮放

基礎(chǔ)動畫-縮放gif.gif

/**
 *  縮放動畫
 */
-(void)scaleAnimation{
//    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"bounds"];
//    anima.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
//    anima.duration = 1.0f;
//    [_demoView.layer addAnimation:anima forKey:@"scaleAnimation"];
    
    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"transform.scale"];//同上
    anima.toValue = [NSNumber numberWithFloat:2.0f];
    anima.duration = 1.0f;
    [_demoView.layer addAnimation:anima forKey:@"scaleAnimation"];
    
//    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"transform.scale.x"];
//    anima.toValue = [NSNumber numberWithFloat:0.2f];
//    anima.duration = 1.0f;
//    [_demoView.layer addAnimation:anima forKey:@"scaleAnimation"];
}

基礎(chǔ)動畫-旋轉(zhuǎn)

基礎(chǔ)動畫-旋轉(zhuǎn)gif.gif

/**
 *  旋轉(zhuǎn)動畫
 */
-(void)rotateAnimation{
    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];//繞著z軸為矢量，進行旋轉(zhuǎn)(@"transform.rotation.z"==@@"transform.rotation")
    anima.toValue = [NSNumber numberWithFloat:M_PI];
    anima.duration = 1.0f;
    [_demoView.layer addAnimation:anima forKey:@"rotateAnimation"];
    
//    //valueWithCATransform3D作用與layer
//    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"transform"];
//    anima.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 0, 0, 1)];//繞著矢量（x,y,z）旋轉(zhuǎn)
//    anima.duration = 1.0f;
//    //anima.repeatCount = MAXFLOAT;
//    [_demoView.layer addAnimation:anima forKey:@"rotateAnimation"];

//    //CGAffineTransform作用與View
//    _demoView.transform = CGAffineTransformMakeRotation(0);
//    [UIView animateWithDuration:1.0f animations:^{
//        _demoView.transform = CGAffineTransformMakeRotation(M_PI);
//    } completion:^(BOOL finished) {
//        
//    }];
}

基礎(chǔ)動畫-變色

基礎(chǔ)動畫-背景色gif.gif

./**
 *  背景色變化動畫
 */
-(void)backgroundAnimation{
    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
    anima.toValue =(id) [UIColor greenColor].CGColor;
    anima.duration = 1.0f;
    [_demoView.layer addAnimation:anima forKey:@"backgroundAnimation"];
}

2 幀動畫

幀動畫-關(guān)鍵幀

幀動畫-關(guān)鍵幀.gif

/**
 *  關(guān)鍵幀動畫
 */
-(void)keyFrameAnimation{
    CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)];
    anima.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];
    anima.duration = 2.0f;
    anima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];//設(shè)置動畫的節(jié)奏
    anima.delegate = self;//設(shè)置代理扮宠，可以檢測動畫的開始和結(jié)束
    [_demoView.layer addAnimation:anima forKey:@"keyFrameAnimation"];
    
}
-(void)animationDidStart:(CAAnimation *)anim{
    NSLog(@"開始動畫");
}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    NSLog(@"結(jié)束動畫");
}

幀動畫-路徑

幀動畫-路徑.gif


/**
 *  path動畫
 */
-(void)pathAnimation{
    CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(SCREEN_WIDTH/2-100, SCREEN_HEIGHT/2-100, 200, 200)];
    anima.path = path.CGPath;
    anima.duration = 2.0f;
    [_demoView.layer addAnimation:anima forKey:@"pathAnimation"];
}

幀動畫-抖動

幀動畫-抖動.gif

/**
 *  抖動效果
 */
-(void)shakeAnimation{
    CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];//在這里@"transform.rotation"==@"transform.rotation.z"
    NSValue *value1 = [NSNumber numberWithFloat:-M_PI/180*4];
    NSValue *value2 = [NSNumber numberWithFloat:M_PI/180*4];
    NSValue *value3 = [NSNumber numberWithFloat:-M_PI/180*4];
    anima.values = @[value1,value2,value3];
    anima.repeatCount = MAXFLOAT;
    
    [_demoView.layer addAnimation:anima forKey:@"shakeAnimation"];
}

注意：抖動最好加一個timer時間判斷不然她會抖到你手機沒電西乖！

幀動畫-彈來彈去

幀動畫-彈來彈去.gif

//彈來彈去
-(void)calculationAnimation
{
    //需要實現(xiàn)的幀動畫
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    animation.keyPath = @"transform.scale";
    animation.values = @[@1.0,@1.3,@0.9,@1.15,@0.95,@1.02,@1.0];
    animation.duration = 1;
    animation.calculationMode = kCAAnimationCubic;
    //把動畫添加上去
    [_demoView.layer addAnimation:animation forKey:nil];
}

這個動畫是一個我個人很喜歡的動畫可能這么看你感覺不出他有什么用狐榔？這里附加一個實例的動畫我想你們會收到啟發(fā)的

幀動畫-彈來彈去實例.gif

3 動畫簡單組合

組合動畫-同時進行

組合動畫-同時進行.gif

-(void)groupAnimation1{
//    //位移動畫
    CAKeyframeAnimation *anima1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)];
    anima1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];
    
    //縮放動畫
    CABasicAnimation *anima2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    anima2.fromValue = [NSNumber numberWithFloat:0.8f];
    anima2.toValue = [NSNumber numberWithFloat:2.0f];
    
    //旋轉(zhuǎn)動畫
    CABasicAnimation *anima3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    anima3.toValue = [NSNumber numberWithFloat:M_PI*4];
    
    //組動畫
    CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
    groupAnimation.animations = [NSArray arrayWithObjects:anima1,anima2,anima3, nil];
    groupAnimation.duration = 4.0f;
    
    [_demoView.layer addAnimation:groupAnimation forKey:@"groupAnimation"];
    
//-------------如下，使用三個animation不分裝成group获雕，只是把他們添加到layer薄腻，也有組動畫的效果。-------------
//    //位移動畫
//    CAKeyframeAnimation *anima1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)];
//    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)];
//    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)];
//    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)];
//    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)];
//    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)];
//    anima1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];
//    anima1.duration = 4.0f;
//    [_demoView.layer addAnimation:anima1 forKey:@"aa"];
//    
//    //縮放動畫
//    CABasicAnimation *anima2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
//    anima2.fromValue = [NSNumber numberWithFloat:0.8f];
//    anima2.toValue = [NSNumber numberWithFloat:2.0f];
//    anima2.duration = 4.0f;
//    [_demoView.layer addAnimation:anima2 forKey:@"bb"];
//    
//    //旋轉(zhuǎn)動畫
//    CABasicAnimation *anima3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
//    anima3.toValue = [NSNumber numberWithFloat:M_PI*4];
//    anima3.duration = 4.0f;
//    [_demoView.layer addAnimation:anima3 forKey:@"cc"];
}

組合動畫-連續(xù)進行

組合動畫-連續(xù)進行.gif

/**
 *  順序執(zhí)行的組動畫
 */
-(void)groupAnimation2{
    CFTimeInterval currentTime = CACurrentMediaTime();
    //位移動畫
    CABasicAnimation *anima1 = [CABasicAnimation animationWithKeyPath:@"position"];
    anima1.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
    anima1.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/2, SCREEN_HEIGHT/2-75)];
    anima1.beginTime = currentTime;
    anima1.duration = 1.0f;
    anima1.fillMode = kCAFillModeForwards;
    anima1.removedOnCompletion = NO;
    [_demoView.layer addAnimation:anima1 forKey:@"aa"];
    
    //縮放動畫
    CABasicAnimation *anima2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    anima2.fromValue = [NSNumber numberWithFloat:0.8f];
    anima2.toValue = [NSNumber numberWithFloat:2.0f];
    anima2.beginTime = currentTime+1.0f;
    anima2.duration = 1.0f;
    anima2.fillMode = kCAFillModeForwards;
    anima2.removedOnCompletion = NO;
    [_demoView.layer addAnimation:anima2 forKey:@"bb"];
    
    //旋轉(zhuǎn)動畫
    CABasicAnimation *anima3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    anima3.toValue = [NSNumber numberWithFloat:M_PI*4];
    anima3.beginTime = currentTime+2.0f;
    anima3.duration = 1.0f;
    anima3.fillMode = kCAFillModeForwards;
    anima3.removedOnCompletion = NO;
    [_demoView.layer addAnimation:anima3 forKey:@"cc"];
}

4. 結(jié)束語

以上就是一些簡單而且實用的基礎(chǔ)動畫

雖然看上去gif 都挺丑的

但是我相信如果你能把這些效果用好

不管你的app 實際內(nèi)容有多少精不精彩至少只是一個效果界面

就足以讓你的app 發(fā)光發(fā)彩＝彀浮ｂ挚！

最后老規(guī)矩楣颠。

老貓在這里祝大家：永無BUG尽纽。不再加班！

最后編輯于：2017.12.05 06:40:34

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末童漩，一起剝皮案震驚了整個濱河市弄贿，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌矫膨，老刑警劉巖差凹，帶你破解...
沈念sama閱讀 218,122評論 6贊 505
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異侧馅，居然都是意外死亡危尿，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,070評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門施禾，熙熙樓的掌柜王于貴愁眉苦臉地迎上來脚线，“玉大人，你說我怎么就攤上這事弥搞∮事蹋” “怎么了？”我有些...
開封第一講書人閱讀 164,491評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵攀例，是天一觀的道長船逮。經(jīng)常有香客問我，道長粤铭，這世上最難降的妖魔是什么挖胃？我笑而不...
開封第一講書人閱讀 58,636評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮梆惯，結(jié)果婚禮上酱鸭，老公的妹妹穿的比我還像新娘。我一直安慰自己垛吗，他們只是感情好凹髓，可當(dāng)我...
茶點故事閱讀 67,676評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著怯屉，像睡著了一般蔚舀。火紅的嫁衣襯著肌膚如雪饵沧。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,541評論 1贊 305
城市分裂傳說
那天赌躺，我揣著相機與錄音狼牺，去河邊找鬼。笑死礼患，一個胖子當(dāng)著我的面吹牛是钥，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播缅叠，決...
沈念sama閱讀 40,292評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼咏瑟，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了痪署？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,211評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤兄旬，失蹤者是張志新（化名）和其女友劉穎狼犯，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體领铐，經(jīng)...
沈念sama閱讀 45,655評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡悯森，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,846評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了绪撵。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瓢姻。...
茶點故事閱讀 39,965評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖音诈，靈堂內(nèi)的尸體忽然破棺而出幻碱，到底是詐尸還是另有隱情，我是刑警寧澤细溅，帶...
沈念sama閱讀 35,684評論 5贊 347
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布褥傍，位于F島的核電站，受9級特大地震影響喇聊，放射性物質(zhì)發(fā)生泄漏恍风。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,295評論 3贊 329
男人毒藥：我在死后第九天來索命
文/蒙蒙一誓篱、第九天我趴在偏房一處隱蔽的房頂上張望朋贬。院中可真熱鬧，春花似錦窜骄、人聲如沸锦募。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,894評論 0贊 22
一樁弒父案啊研，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽御滩。三九已至鸥拧，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間削解，已是汗流浹背富弦。一陣腳步聲響...
開封第一講書人閱讀 33,012評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留氛驮，地道東北人腕柜。一個月前我還...
沈念sama閱讀 48,126評論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像矫废，于是被迫代替她去往敵國和親盏缤。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,914評論 2贊 355

iOS-常用動畫【基礎(chǔ)+進階】

1. 基礎(chǔ)動畫篇

2 幀動畫

3 動畫簡單組合

4. 結(jié)束語

推薦閱讀更多精彩內(nèi)容