“Action高诺！”，歡迎收看這期大型扯談實(shí)用類技術(shù)節(jié)目碾篡，《小明講故事》虱而，大家好我是小明！
有人會(huì)這么問开泽，“小明牡拇，no zuo no die，你覺得哪個(gè)城市的人最作穆律？”惠呼。“我覺得_{倫敦的人比較作峦耘，相當(dāng)作剔蹋，作得有風(fēng)格，作得有國際范辅髓！因?yàn)?/sub>有一個(gè)倫敦人叫Charlie Chaplin泣崩，中文名叫查理 卓別林，小名叫作不停洛口，作界的佛爺啊矫付，嘻嘻~”， “幼稚５谘妗技即！” ≌燎玻“美國新墨西哥州的人也挺作的而叼，你看《貓和老鼠》中的Tom捉了140集，Jerry還是沒有被捉住豹悬，作界的二爺呢葵陵。” 瞻佛，“滾Ｍ迅荨！”伤柄。}

得動(dòng)畫者得天下啊绊困，有請(qǐng)我們今天的嘉賓啞劇之王--卓別林先生和深愛Jerry的Tom先生。

文章結(jié)構(gòu)圖

“在英國把動(dòng)畫叫Animation笔喉，它的動(dòng)詞形式是Animate取视，你們中文意思是“賦予生命”。對(duì)于人類來說常挚，眼睛看到一幅畫或一個(gè)物體后作谭，在0.34秒內(nèi)不會(huì)消失。利用這一原理奄毡，在一幅畫還沒有消失前播放下一幅畫折欠，就會(huì)給人造成一種流暢的視覺變化效果。對(duì)于蒼蠅吼过，那就不一樣锐秦，那叫反應(yīng)遲鈍∧窍龋”

chaplin.gif

“哦~卓先生說的應(yīng)該就是逐幀動(dòng)畫颗胡，每一個(gè)畫面就是一幀羹呵，逐一播放形成連續(xù)的動(dòng)畫效果。

"Tom先生，您那個(gè)時(shí)代動(dòng)畫又有什么變化嗎癞志？”

“我是看卓先生的電影長大的，1940我才出現(xiàn)在熒屏上雾叭。不過有些不一樣了夷陋，不僅僅單一畫面逐一播放，你們可以在《貓和老鼠》中汤纸，看到我的胡子被Jerry拉得夸張長衩茸，追起Jerry來，身體那些夸張的伸縮贮泞，人無法做到的楞慈，這也是動(dòng)漫的魅力幔烛。這些動(dòng)畫變化，是可以通過計(jì)算機(jī)計(jì)算每一個(gè)時(shí)間變化的信息集合成每一幀的畫面囊蓝。 ”

tom.gif

“哦~Tom先生說的應(yīng)該是關(guān)鍵幀動(dòng)畫饿悬。這個(gè)在現(xiàn)代技術(shù)比較常見的動(dòng)畫制作方式。比如現(xiàn)在大家用的蘋果產(chǎn)品聚霜，按鈕的大小變化狡恬，圖片的移動(dòng)，旋轉(zhuǎn)等等這些都是關(guān)鍵幀動(dòng)畫蝎宇。作為iOS開發(fā)者的話弟劲，UIView Animation就是屬于關(guān)鍵幀動(dòng)畫這一類”。

現(xiàn)代的技術(shù)是很先進(jìn)姥芥，挺有味道的兔乞，我們一起來領(lǐng)略一下，還得請(qǐng)Tom示范一下撇眯。

一.大小動(dòng)畫（改變frame）

1.展示效果

fram大小變化

2.Show Code

-(void)changeFrame{

    CGRect originalRect = self.anView.frame;
    CGRect rect = CGRectMake(self.anView.frame.origin.x-20, self.anView.frame.origin.y-120, 160, 80);

    [UIView animateWithDuration:1 animations:^{
        self.anView.frame = rect;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1 animations:^{
            self.anView.frame = originalRect;
        }];
    
    }];
}   

二.拉伸動(dòng)畫（改變bounds）

1.展示效果

bounds變化

2.Show Code

-(void)changeBounds{

    CGRect originalBounds = self.anView.bounds;
    //盡管這個(gè)rect的x报嵌，y跟原始的不同，動(dòng)畫也只是改變了寬高
    CGRect rect = CGRectMake(0, 0, 300, 120);

    [UIView animateWithDuration:1 animations:^{
    self.anView.bounds = rect;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1 animations:^{
            self.anView.bounds = originalBounds;
        }];
    
    }];
}

三.轉(zhuǎn)移動(dòng)畫（改變center）

1.展示效果

center變化.gif

2.Show Code

-(void)changeCenter{

    CGPoint originalPoint = self.anView.center;
    CGPoint point = CGPointMake(self.anView.center.x, self.anView.center.y-170);

    [UIView animateWithDuration:0.3 animations:^{
        self.anView.center = point;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:1 animations:^{
            self.anView.center = originalPoint;
        }];
    
    }]; 
}

謝謝二爺?shù)氖痉缎荛唬?jīng)典的表情也勾起很多人的回憶锚国。好，我們回到現(xiàn)實(shí)玄坦，以上的3個(gè)例子血筑，大家不難發(fā)現(xiàn)共同的特點(diǎn)和重復(fù)性。

1.都是改變UIView的屬性就可以產(chǎn)生動(dòng)畫煎楣。
2.都是帶有block做結(jié)束回調(diào)豺总，對(duì)結(jié)束監(jiān)控
3.動(dòng)畫大小和位置變化可以通過多種方式實(shí)現(xiàn)

“佛爺，是不是很好奇我們并沒有使用Tom先生很多圖片組逐一顯示择懂？來喻喳，也請(qǐng)您下礦一走！”困曙”砺祝“哈哈，好慷丽！不過那碗河水我還是要倒的”蹦哼，“行，隨你翻騰~”要糊。

四.旋轉(zhuǎn)動(dòng)畫(改變transform)

1.展示效果

transform變化.gif

2.Show Code

-(void)transform{
    CGAffineTransform originalTransform = self.anView.transform;
    [UIView animateWithDuration:2 animations:^{
        //self.anView.transform = CGAffineTransformMakeScale(0.6, 0.6);//縮放
        //self.anView.transform = CGAffineTransformMakeTranslation(60, -60);
        self.anView.transform = CGAffineTransformMakeRotation(4.0f);
    
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:2 animations:^{
            self.anView.transform = originalTransform;
        
        }];
    }];
}  

五.透明度動(dòng)畫(改變alpha)

1.展示效果

alpha變化.gif

2.Show Code

-(void)alpha{
    [UIView animateWithDuration:2 animations:^{
        self.anView.alpha = 0.3;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:2 animations:^{
            self.anView.alpha = 1;
        }];

    }];
}  

卓先生纲熏，停停停，來，回到我們舞臺(tái)中間來局劲。就以上5中都能讓您玩的這么愉快勺拣，以上都是僅僅修改本身的屬性值，我再介紹剩下三種基于UIView特別的動(dòng)畫容握，一個(gè)是Keyframe宣脉，一個(gè)Spring和Transition動(dòng)畫。一人一個(gè)輪著來剔氏，卓先生你先。

六.背景顏色Keyframes動(dòng)畫（改變background）

1.展示效果

background變化.gif

2.Show Code

-(void)changeBackground{

    [UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
        [UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor colorWithRed:0.9475 green:0.1921 blue:0.1746 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor colorWithRed:0.1064 green:0.6052 blue:0.0334 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor colorWithRed:0.1366 green:0.3017 blue:0.8411 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor colorWithRed:0.619 green:0.037 blue:0.6719 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.anView.backgroundColor = [UIColor whiteColor];
        }];
    } completion:^(BOOL finished) {
        NSLog(@"動(dòng)畫結(jié)束");
    }];
}

七.Spring動(dòng)畫（iOS7.0起）

1.展示效果

spring動(dòng)畫.gif

2.Show Code

-(void)springAnimation{
    CGRect originalRect = self.anView.frame;
    CGRect rect = CGRectMake(self.anView.frame.origin.x-80, self.anView.frame.origin.y, 120, 120);

    [UIView animateWithDuration:0.4 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:4 options:UIViewAnimationOptionCurveLinear animations:^{
        self.anView.frame = rect;
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:1 delay:1 usingSpringWithDamping:0.5 initialSpringVelocity:4 options:UIViewAnimationOptionCurveLinear animations:^{
                self.anView.frame = originalRect;
            } completion:^(BOOL finished) {
        
        }];
    }];
}

八.transition動(dòng)畫

1.展示效果

transition動(dòng)畫.gif

2.Show Code

-(void)transitionAnimation{
    [UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
        //self.anView.backgroundColor = [UIColor blueColor];
    } completion:^(BOOL finished) {
        [UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
        //self.anView.backgroundColor = [UIColor greenColor];
        } completion:^(BOOL finished) {
        
        }];
    }];
}

九.關(guān)于參數(shù)option選擇說明

1.UIViewAnimationOptions

UIViewAnimationOptionLayoutSubviews            //進(jìn)行動(dòng)畫時(shí)布局子控件
UIViewAnimationOptionAllowUserInteraction      //進(jìn)行動(dòng)畫時(shí)允許用戶交互
UIViewAnimationOptionBeginFromCurrentState     //從當(dāng)前狀態(tài)開始動(dòng)畫
UIViewAnimationOptionRepeat                    //無限重復(fù)執(zhí)行動(dòng)畫
UIViewAnimationOptionAutoreverse               //執(zhí)行動(dòng)畫回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動(dòng)畫的執(zhí)行時(shí)間設(shè)置
UIViewAnimationOptionOverrideInheritedCurve    //忽略嵌套動(dòng)畫的曲線設(shè)置
UIViewAnimationOptionAllowAnimatedContent      //轉(zhuǎn)場：進(jìn)行動(dòng)畫時(shí)重繪視圖
UIViewAnimationOptionShowHideTransitionViews   //轉(zhuǎn)場：移除（添加和移除圖層的）動(dòng)畫效果
UIViewAnimationOptionOverrideInheritedOptions  //不繼承父動(dòng)畫設(shè)置

UIViewAnimationOptionCurveEaseInOut            //時(shí)間曲線竹祷，慢進(jìn)慢出（默認(rèn)值）
UIViewAnimationOptionCurveEaseIn               //時(shí)間曲線谈跛，慢進(jìn)
UIViewAnimationOptionCurveEaseOut              //時(shí)間曲線，慢出
UIViewAnimationOptionCurveLinear               //時(shí)間曲線塑陵，勻速

UIViewAnimationOptionTransitionNone            //轉(zhuǎn)場感憾，不使用動(dòng)畫
UIViewAnimationOptionTransitionFlipFromLeft    //轉(zhuǎn)場，從左向右旋轉(zhuǎn)翻頁
UIViewAnimationOptionTransitionFlipFromRight   //轉(zhuǎn)場令花，從右向左旋轉(zhuǎn)翻頁
UIViewAnimationOptionTransitionCurlUp          //轉(zhuǎn)場阻桅，下往上卷曲翻頁
UIViewAnimationOptionTransitionCurlDown        //轉(zhuǎn)場，從上往下卷曲翻頁
UIViewAnimationOptionTransitionCrossDissolve   //轉(zhuǎn)場兼都，交叉消失和出現(xiàn)
UIViewAnimationOptionTransitionFlipFromTop     //轉(zhuǎn)場嫂沉，從上向下旋轉(zhuǎn)翻頁
UIViewAnimationOptionTransitionFlipFromBottom  //轉(zhuǎn)場，從下向上旋轉(zhuǎn)翻頁

2.UIViewKeyframeAnimationOptions

UIViewAnimationOptionLayoutSubviews           //進(jìn)行動(dòng)畫時(shí)布局子控件
UIViewAnimationOptionAllowUserInteraction     //進(jìn)行動(dòng)畫時(shí)允許用戶交互
UIViewAnimationOptionBeginFromCurrentState    //從當(dāng)前狀態(tài)開始動(dòng)畫
UIViewAnimationOptionRepeat                   //無限重復(fù)執(zhí)行動(dòng)畫
UIViewAnimationOptionAutoreverse              //執(zhí)行動(dòng)畫回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動(dòng)畫的執(zhí)行時(shí)間設(shè)置
UIViewAnimationOptionOverrideInheritedOptions //不繼承父動(dòng)畫設(shè)置

UIViewKeyframeAnimationOptionCalculationModeLinear     //運(yùn)算模式 :連續(xù)
UIViewKeyframeAnimationOptionCalculationModeDiscrete   //運(yùn)算模式 :離散
UIViewKeyframeAnimationOptionCalculationModePaced      //運(yùn)算模式 :均勻執(zhí)行
UIViewKeyframeAnimationOptionCalculationModeCubic      //運(yùn)算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //運(yùn)算模式 :平滑均勻

就UIView的動(dòng)畫而言扮碧，UIViewKeyframeAnimationOptions緊在Keyframes趟章，其余的都是UIViewAnimationOptions。

十.總結(jié)和擴(kuò)展

1.UIView動(dòng)畫主要是變化UIView的自帶屬性
2.UIView動(dòng)畫可以有很多種方式實(shí)現(xiàn)同一效果
3.Spring動(dòng)畫iOS7.0以上才有
4.UIViewKeyframeAnimationOptions用著Keyframes動(dòng)畫慎王，其余都用UIViewAnimationOptions枚舉
這就以上UIView Animation的動(dòng)畫的基礎(chǔ)內(nèi)容了蚓土，節(jié)目到了尾聲。嘿赖淤，卓先生蜀漆，Tom先生停下來，給大家說byebye啦咱旱。謝謝大家确丢，讓我們?cè)俅我詿崃业恼坡暩兄x卓先生和Tom先生。謝謝~~

十一.源碼地址

https://github.com/minggo620/iOSViewAnimation

謝謝收看這期大型扯淡實(shí)用技術(shù)類節(jié)目莽龟，《小明講故事》蠕嫁。"Tom老師，你對(duì)我眨眼什么意思毯盈？"剃毒，“你們中國的《喜洋洋和灰太狼》捉了多少集？”

【原創(chuàng)出品 未經(jīng)授權(quán) 禁止轉(zhuǎn)載】
【歡迎微友分享轉(zhuǎn)發(fā) 禁止公號(hào)等未經(jīng)授權(quán)的轉(zhuǎn)載】