UIView動畫

整個動圖
UIView動畫是在我們的工程中比較常用的動畫,比如當我們不喜歡系統(tǒng)的彈窗而自定義彈窗的時候,如果不用UIView動畫,那么視圖的彈出會很突然,用戶體驗會很不好.而且即便是沒有用到自定義視圖,在我們的工程中加入一些動畫效果也是很炫酷的,所以UIView動畫還是比較重要的.那么,就讓我們學好它吧 >_<
使用UIView動畫有兩種方式,基本方式和代碼塊的方式,我們先從基本方式開始
// 開始動畫
[UIView beginAnimations:nil context:nil];
//這里需要注意一下,所有的動畫代碼都必須放在Begin和Commit之間
//在這里我們就可以改變控件的尺寸和位置,例如:
CGPoint point = _imageView.center;
point.y += 150;
[_imageView setCenter:point];
//其他的一些方法及屬性的設置
// 設置動畫曲線,默認是勻速進行:
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;
// 設置動畫時長:
+ (void)setAnimationDuration:(NSTimeInterval)duration;
// 默認為YES梗劫。為NO時跳過動畫效果,直接跳到執(zhí)行后的狀態(tài)嘱么。
+ (void)setAnimationsEnabled:(BOOL)enabled;
// 設置動畫延遲執(zhí)行(delay:秒為單位):
+ (void)setAnimationDelay:(NSTimeInterval)delay;
// 動畫的重復播放次數(shù)
+ (void)setAnimationRepeatCount:(float)repeatCount;
// 如果為YES纺且,逆向(相反)動畫效果难述,結束后返回動畫逆向前的狀態(tài); 默認為NO:
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;

// 設置動畫代理:
+ (void)setAnimationDelegate:(id)delegate;
// 動畫將要開始時執(zhí)行方法××(必須要先設置動畫代理):
+ (void)setAnimationWillStartSelector:(SEL)selector;
// 動畫已結束時執(zhí)行方法××(必須要先設置動畫代理):
+ (void)setAnimationDidStopSelector:(SEL)selector;
/**
 *  設置動畫過渡效果
 *
 *  @param transition 動畫的過渡效果
 *  @param view 過渡效果作用視圖
 *  @param cache 如果為YES,開始和結束視圖分別渲染一次并在動畫中創(chuàng)建幀胀茵;否則社露,視圖將會渲染每一幀。例如琼娘,你不需要在視圖轉變中不停的更新峭弟,你只需要等到轉換完成再去更新視圖。
 */
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;

// 刪除所有動畫層
// 注意:層指的是layout脱拼,例:[_imageView.layer removeAllAnimations];
- (void)removeAllAnimations;
// 提交動畫
[UIView commitAnimations];

需要說明的是瞒瘸,UIViewAnimationCurve 表示動畫的變化規(guī)律:
UIViewAnimationCurveEaseInOut: 開始和結束時較慢
UIViewAnimationCurveEase: 開始時較慢
UIViewAnimationCurveEaseOut: 結束時較慢
UIViewAnimationCurveLinear: 整個過程勻速進行

具體效果可參考下圖:


參考圖
使用UIView的動畫塊代碼:
方法一:
[UIView animateWithDuration:4.0 // 動畫時長
                 animations:^{
                     // code
                 }];
方法二:
[UIView animateWithDuration:4.0 // 動畫時長
                 animations:^{
                     // code...
                 }
                 completion:^(BOOL finished) {
                     // 動畫完成后執(zhí)行
                     // code...
                 }];
方法三:
[UIView animateWithDuration:4.0 // 動畫時長
                      delay:2.0 // 動畫延遲
                    options:UIViewAnimationOptionCurveEaseIn // 動畫過渡效果
                 animations:^{
                     // code...
                 }
                 completion:^(BOOL finished) {
                     // 動畫完成后執(zhí)行
                     // code...
                 }];
方法四,Spring Animationring Animation:
在IOS7開始熄浓,系統(tǒng)動畫效果廣泛應用Spring Animation :
[UIView animateWithDuration:4.0 // 動畫時長
                      delay:0.0 // 動畫延遲
     usingSpringWithDamping:1.0 // 類似彈簧振動效果 0~1
      initialSpringVelocity:5.0 // 初始速度             options:UIViewAnimationOptionCurveEaseInOut // 動畫過渡效果
                 animations:^{
                     // code...
                     CGPoint point = _imageView.center;
                     point.y += 150;
                     [_imageView setCenter:point];
                 } completion:^(BOOL finished) {
                     // 動畫完成后執(zhí)行
                     // code...
                     [_imageView setAlpha:1];
                 }];
這里需要注意一下usingSpringWithDamping:它的范圍為 0.0f 到 1.0f 挨务,數(shù)值越小「彈簧」的振動效果越明顯。
initialSpringVelocity:初始的速度玉组,數(shù)值越大一開始移動越快。但是丁侄,初始速度取值較高而時間較短時惯雳,也會出現(xiàn)反彈情況。

Spring Animation 是線性動畫或 ease-out 動畫的理想替代品鸿摇。由于 iOS 本身大量使用的就是 Spring Animation石景,用戶已經(jīng)習慣了這種動畫效果,因此使用它能使 App 讓人感覺更加自然拙吉,用 Apple 的話說就是「instantly familiar」潮孽。此外,Spring Animation 不只能對位置使用筷黔,它適用于所有可被添加動畫效果的屬性往史。
方法五,關鍵幀動畫:

UIView動畫已經(jīng)具備高級的方法來創(chuàng)建動畫佛舱,而且可以更好地理解和構建動畫椎例。IOS7以后蘋果新加了一個animateKeyframesWithDuration的方法,我們可以使用它來創(chuàng)建更多更復雜更酷炫的動畫效果请祖,而不需要去使用到核心動畫(CoreAnimatino)订歪。
創(chuàng)建關鍵幀方法:

/**
 *  添加關鍵幀方法
 *
 *  @param duration   動畫時長
 *  @param delay      動畫延遲
 *  @param options    動畫效果選項
 *  @param animations 動畫執(zhí)行代碼
 *  @param completion 動畫結束執(zhí)行代碼
 */
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration
                               delay:(NSTimeInterval)delay
                             options:(UIViewKeyframeAnimationOptions)options
                          animations:(void (^)(void))animations
                          completion:(void (^)(BOOL finished))completion;
添加關鍵幀方法:

/**
 *  添加關鍵幀
 *
 *  @param frameStartTime 動畫相對開始時間
 *  @param frameDuration  動畫相對持續(xù)時間
 *  @param animations     動畫執(zhí)行代碼
 */
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime
                        relativeDuration:(double)frameDuration
                              animations:(void (^)(void))animations;
以上說的相對時間,也就是說:“它們自身會根據(jù)動畫總持續(xù)時長自動匹配其運行時長”肆捕。

下面用一個簡單的示例作解答刷晋,彩虹變化視圖:

void (^keyFrameBlock)() = ^(){
    // 創(chuàng)建顏色數(shù)組
    NSArray *arrayColors = @[[UIColor orangeColor],
        [UIColor yellowColor],
        [UIColor greenColor],
        [UIColor blueColor],
        [UIColor purpleColor],
        [UIColor redColor]];
    NSUInteger colorCount = [arrayColors count];
    // 循環(huán)添加關鍵幀
    for (NSUInteger i = 0; i < colorCount; i++) {
        [UIView addKeyframeWithRelativeStartTime:i / (CGFloat)colorCount
           relativeDuration:1 / (CGFloat)colorCount
                 animations:^{
                     [_graduallyView setBackgroundColor:arrayColors[i]];
                 }];
    }
};
[UIView animateKeyframesWithDuration:4.0
          delay:0.0
        options:UIViewKeyframeAnimationOptionCalculationModeCubic | UIViewAnimationOptionCurveLinear
     animations:keyFrameBlock
     completion:^(BOOL finished) {
         // 動畫完成后執(zhí)行
         // code...
     }];

那么UIViewKeyframeAnimationOptions里面的屬性都有哪些呢?接下來解釋一下

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

UIViewKeyframeAnimationOptionCalculationModeLinear     //運算模式 :連續(xù)
UIViewKeyframeAnimationOptionCalculationModeDiscrete   //運算模式 :離散
UIViewKeyframeAnimationOptionCalculationModePaced      //運算模式 :均勻執(zhí)行
UIViewKeyframeAnimationOptionCalculationModeCubic      //運算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //運算模式 :平滑均勻
方法六,transitionWithView動畫
-(void)transitionAnimation{
    [UIView transitionWithView:self.anView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
        //self.anView.backgroundColor = [UIColor blueColor];
    } completion:^(BOOL finished) {
        [UIView transitionWithView:self.anView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
        //self.anView.backgroundColor = [UIColor greenColor];
        } completion:^(BOOL finished) {

        }];
    }];
}
這里還要解釋下UIViewAnimationOptions中包含的屬性各是什么意思:
UIViewAnimationOptionLayoutSubviews            //進行動畫時布局子控件
UIViewAnimationOptionAllowUserInteraction      //進行動畫時允許用戶交互
UIViewAnimationOptionBeginFromCurrentState     //從當前狀態(tài)開始動畫
UIViewAnimationOptionRepeat                    //無限重復執(zhí)行動畫
UIViewAnimationOptionAutoreverse               //執(zhí)行動畫回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執(zhí)行時間設置
UIViewAnimationOptionOverrideInheritedCurve    //忽略嵌套動畫的曲線設置
UIViewAnimationOptionAllowAnimatedContent      //轉場:進行動畫時重繪視圖
UIViewAnimationOptionShowHideTransitionViews   //轉場:移除(添加和移除圖層的)動畫效果
UIViewAnimationOptionOverrideInheritedOptions  //不繼承父動畫設置

UIViewAnimationOptionCurveEaseInOut            //時間曲線,慢進慢出(默認值)
UIViewAnimationOptionCurveEaseIn               //時間曲線,慢進
UIViewAnimationOptionCurveEaseOut              //時間曲線眼虱,慢出
UIViewAnimationOptionCurveLinear               //時間曲線喻奥,勻速

UIViewAnimationOptionTransitionNone            //轉場,不使用動畫
UIViewAnimationOptionTransitionFlipFromLeft    //轉場蒙幻,從左向右旋轉翻頁
UIViewAnimationOptionTransitionFlipFromRight   //轉場映凳,從右向左旋轉翻頁
UIViewAnimationOptionTransitionCurlUp          //轉場,下往上卷曲翻頁
UIViewAnimationOptionTransitionCurlDown        //轉場邮破,從上往下卷曲翻頁
UIViewAnimationOptionTransitionCrossDissolve   //轉場诈豌,交叉消失和出現(xiàn)
UIViewAnimationOptionTransitionFlipFromTop     //轉場,從上向下旋轉翻頁
UIViewAnimationOptionTransitionFlipFromBottom  //轉場抒和,從下向上旋轉翻頁
transitionWithView動畫
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末矫渔,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子摧莽,更是在濱河造成了極大的恐慌庙洼,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,110評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件镊辕,死亡現(xiàn)場離奇詭異油够,居然都是意外死亡,警方通過查閱死者的電腦和手機征懈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評論 3 395
  • 文/潘曉璐 我一進店門石咬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人卖哎,你說我怎么就攤上這事鬼悠。” “怎么了亏娜?”我有些...
    開封第一講書人閱讀 165,474評論 0 356
  • 文/不壞的土叔 我叫張陵焕窝,是天一觀的道長。 經(jīng)常有香客問我维贺,道長它掂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,881評論 1 295
  • 正文 為了忘掉前任幸缕,我火速辦了婚禮群发,結果婚禮上,老公的妹妹穿的比我還像新娘发乔。我一直安慰自己熟妓,他們只是感情好,可當我...
    茶點故事閱讀 67,902評論 6 392
  • 文/花漫 我一把揭開白布栏尚。 她就那樣靜靜地躺著起愈,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上抬虽,一...
    開封第一講書人閱讀 51,698評論 1 305
  • 那天官觅,我揣著相機與錄音,去河邊找鬼阐污。 笑死休涤,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的笛辟。 我是一名探鬼主播功氨,決...
    沈念sama閱讀 40,418評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼手幢!你這毒婦竟也來了捷凄?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,332評論 0 276
  • 序言:老撾萬榮一對情侶失蹤围来,失蹤者是張志新(化名)和其女友劉穎跺涤,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體监透,經(jīng)...
    沈念sama閱讀 45,796評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡桶错,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,968評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了胀蛮。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片牛曹。...
    茶點故事閱讀 40,110評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖醇滥,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情超营,我是刑警寧澤鸳玩,帶...
    沈念sama閱讀 35,792評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站演闭,受9級特大地震影響不跟,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜米碰,卻給世界環(huán)境...
    茶點故事閱讀 41,455評論 3 331
  • 文/蒙蒙 一窝革、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧吕座,春花似錦虐译、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春厢拭,著一層夾襖步出監(jiān)牢的瞬間兰英,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評論 1 272
  • 我被黑心中介騙來泰國打工供鸠, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留畦贸,地道東北人。 一個月前我還...
    沈念sama閱讀 48,348評論 3 373
  • 正文 我出身青樓楞捂,卻偏偏與公主長得像薄坏,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子泡一,可洞房花燭夜當晚...
    茶點故事閱讀 45,047評論 2 355

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