10、簡單動畫

一、UIView基礎動畫

UIKit 直接將動畫繼承到UIView類中,當內部的一些屬性發生改變時,UIView將為這些改變提供動畫支持。執行動畫的工作由UIView類自動完成,但仍希望在執行動畫時通知視圖,為此需要將改變屬性的代碼放在[UIVIew beginAnimations:nil context:nil]與[UIView commitAnimations]之間。

1、UIView動畫

//UIView動畫(UIKit動畫)
-(void)viewAnimation{
  //早期的動畫塊  在begin和commit之間寫需要改變的視圖
    [UIView beginAnimations:@"test1" context:nil];
    //設置動畫時長
    [UIView setAnimationDuration:1.0];
    //設置動畫是否反轉  動畫執行完畢,自動原路返回原狀態
    [UIView setAnimationRepeatAutoreverses:YES];
    //設置動畫重復次數
    [UIView setAnimationRepeatCount:5];
    //在兩者之間實現具體代碼
    self.testView.backgroundColor=[UIColor yellowColor];
    //改變大小
    CGRect rect=self.testView.bounds;
    rect.size=CGSizeMake(120, 120);
    self.testView.bounds=rect;
    
    //改變位置
    CGRect frame=self.testView.frame;
    frame.origin=CGPointMake(CGRectGetWidth(self.view.frame)-120, CGRectGetHeight(self.view.frame)-120);
    self.testView.frame=frame;
    //提交動畫
    [UIView commitAnimations];
    
}

2、UIView層block動畫

//UIView層block動畫
-(void)blockViewAnimation{
    //第一個參數:動畫的時長
   // 第二個參數:將要添加動畫的代碼在block中實現,相當于將動畫的begin和commit之間的代碼寫在block中
   // 先將動畫的設置配置完整,在改變屬性值
    [UIView animateWithDuration:1.0 animations:^{
        //設置動畫是否反轉  動畫執行完畢,自動原路返回原狀態
        [UIView setAnimationRepeatAutoreverses:YES];
        //設置動畫重復次數
        [UIView setAnimationRepeatCount:5];
        //要改變的屬性
        self.testView.backgroundColor=[UIColor redColor];
    
        //改變大小
        CGRect rect=self.testView.bounds;
        rect.size=CGSizeMake(120, 120);
        self.testView.bounds=rect;
        
        //改變位置
        CGRect frame=self.testView.frame;
        frame.origin=CGPointMake(CGRectGetWidth(self.view.frame)-120, CGRectGetHeight(self.view.frame)-120);
        self.testView.frame=frame;
    }];
    
    
    //completion:動畫執行結束會執行的block
    [UIView animateWithDuration:1.0 animations:^{
        [UIView setAnimationRepeatAutoreverses:YES];
        //設置動畫重復次數
       [UIView setAnimationRepeatCount:5];
        //要改變的屬性
       self.testView.backgroundColor=[UIColor redColor];
    
    } completion:^(BOOL finished) {
        //當動畫執行完成,我們不需要該界面,可以在此處將動畫作用的界面隱藏或移除掉
        [self.testView removeFromSuperview];
        NSLog(@"動畫執行完畢");
    }];
    
    
    //delay:延時執行  多少秒之后在執行該動畫
    //options:動畫一些效果的設置,例如是否重復等
    [UIView animateWithDuration:1.0 delay:3.0 options:(UIViewAnimationOptionRepeat) animations:^{
        self.testView.backgroundColor=[UIColor orangeColor];
    } completion:^(BOOL finished) {
        NSLog(@"執行完畢");
    }];
    
    
    //過渡動畫   當視圖進行切換或者視圖位置發生改變的時候,可以考慮使用該動畫
//    [UIView transitionWithView:self.testView duration:1.5 options:(UIViewAnimationOptionTransitionFlipFromLeft) animations:^{
//        
//         self.testView.backgroundColor=[UIColor orangeColor];
//    } completion:^(BOOL finished) {
//         NSLog(@"執行完畢");
//    }];
   
}

3、關鍵幀動畫

//關鍵幀動畫
-(void)keyFrameAnimation{
    
    [UIView animateKeyframesWithDuration:4.0 delay:0.0 options:(UIViewKeyframeAnimationOptionRepeat) animations:^{
       //添加動畫所需要的幀數
        //第一個參數:當前幀相對的開始時間,取值范圍為0~1  例如:如果相對開始時間為0.5,那么他的總時長為0.5*4=2s
        //第二個參數:當前幀相對的時長,取值范圍為0~1,例如:此處給值0.5,那么此幀的播放時長為0.5*4=2s
        //第三個參數為:block,在block中實現動畫所要做的操作
        //第一幀
        [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.25 animations:^{
            
            CGRect rect=self.testView.frame;
            rect.origin.x=CGRectGetWidth(self.view.frame)-rect.size.width;
            self.testView.frame=rect;
    
      }];
 
    //第二幀
    [UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.25 animations:^{
         CGRect rect=self.testView.frame;
        rect.origin.y=CGRectGetHeight(self.view.frame)-rect.size.height;
        self.testView.frame=rect;

    }];
 
    //第三幀
    [UIView addKeyframeWithRelativeStartTime:0.50 relativeDuration:0.25 animations:^{
        CGRect rect=self.testView.frame;
        rect.origin.x=0;
        self.testView.frame=rect;
    }];
    
    //第四幀
    [UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{
          CGRect rect=self.testView.frame;
        rect.origin.y=0;
        self.testView.frame=rect;
    }];
        
    } completion:^(BOOL finished) {
        NSLog(@"執行完畢");
    }];
    
}

4、spring動畫

//spring動畫
-(void)springAnimation{
    //usingSpringWithDamping:阻尼,取值范圍為0-1,值越小,動畫效果越明顯,抖動的次數多
    //initialSpringVelocity:初始速率,值越大,動畫效果越明顯,彈得距離大
    //options:動畫效果
    [UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.1 initialSpringVelocity:20.0 options:(UIViewAnimationOptionCurveLinear) animations:^{
        [UIView setAnimationRepeatAutoreverses:YES];
        self.testView.center=self.view.center;
        
    } completion:^(BOOL finished) {
        self.testView.center=CGPointMake(50, 50);
    }];
    
    
}

二、CoreAnimation動畫
1、CoreAnimation動畫位于iOS框架的Media層需要添加QuartzCore.Framework(系統自動添加)CoreAnimation基本上是Layer Animation

  • CALayer負責繪制,提供UIView需要展示的內容,不能交互。
  • UIView負責交互,顯示CALayer繪制的內容。Layer有很多種,最常用和最基本的是CALayer,還有它的子類:
  • CAScrollerLayer簡化顯示層的一部分
  • CATextLayer文本層
  • CAGradientLayer 可以方便的處理顏色漸變、CAShapeLayer僅僅限于沿著邊緣的動畫效果,它實現不了填充效果
//layer層的動畫
//basicAnimation
-(void)basicAnimation{
    //keyPath:想要改變layer的屬性或者是layer的屬性的屬性
    //keyPath如果書寫錯誤,動畫沒有效果
    CABasicAnimation* basicAni=[CABasicAnimation animationWithKeyPath:@"position.x"];
    //如果我們只設置toValue一個屬性,那就是默認從當前位置到toValue的位置
//    basicAni.toValue=@(CGRectGetWidth(self.view.frame)-50);
    //如果我們只設置byValue屬性,那么就是默認從當前位置加byValue的值
    basicAni.byValue=@50;
    //讓動畫結束之后,不返回原位置
    //當動畫結束的時候,是否移除動畫所產生的效果
    basicAni.removedOnCompletion=NO;
    //保持哪種狀態
    //kCAFillModeForwards:保持動畫結束的狀態
    basicAni.fillMode=kCAFillModeForwards;
    //fromValue:必須和toValue或者byValue兩者中的一個結合使用
    basicAni.fromValue=@100;
    //設置動畫時長
    [basicAni setDuration:2.0];
    //將動畫添加到layer層
    //forKey:動畫標記,移除動畫時使用
    [self.testView.layer addAnimation:basicAni forKey:@"basicAni"];
    
}
//layer層的keyframeAnimation
-(void)layerKeyframeAnimation{
    
    //初始化
    CAKeyframeAnimation* keyFrameAni=[CAKeyframeAnimation animationWithKeyPath:@"position"];
    //得到視圖原始的position
    CGPoint originPoint=self.testView.layer.position;
    NSValue* originValue=[NSValue valueWithCGPoint:originPoint];
    //一幀
    CGPoint firstPoint=CGPointMake(50, 50);
    NSValue* firstValue=[NSValue valueWithCGPoint:firstPoint];
    //二幀
    CGPoint secondPoint=CGPointMake(CGRectGetWidth(self.view.frame)-50, 50);
    NSValue* secondValue=[NSValue valueWithCGPoint:secondPoint];
    
    //將幀添加到layer上
    keyFrameAni.values=@[originValue,firstValue,secondValue];
    //將動畫添加到layer上
    [self.testView.layer addAnimation:keyFrameAni forKey:@"keyFrameAni"];
    keyFrameAni.duration=10.0;
    keyFrameAni.removedOnCompletion=NO;
    keyFrameAni.fillMode=kCAFillModeForwards;
    
    
}


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,431評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,637評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,555評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,900評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,629評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,976評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,976評論 3 448
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,139評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,686評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,411評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,641評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,129評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,820評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,233評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,567評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,362評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,604評論 2 380

推薦閱讀更多精彩內容

  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,140評論 5 13
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,551評論 6 30
  • 在iOS實際開發中常用的動畫無非是以下四種:UIView動畫,核心動畫,幀動畫,自定義轉場動畫。 1.UIView...
    請叫我周小帥閱讀 3,142評論 1 23
  • 在前面的學習中,我們討論了CoreAnimation除了動畫外可以做到的任何事情。但是動畫是CoreAni...
    小貓仔閱讀 1,538評論 0 0
  • 臨的簡友的一幅纏繞,自認并沒有表達原畫的精髓,畫面過于平庸,不突出
    大酋閱讀 94評論 0 0