天天看點

開發常用動畫收集

一、UIView 動畫

       使用iPhone作為開發平台,你可以體驗到UIView帶來的既另類又有趣的動畫功能。UIView動畫能夠完美地建立起一座連接配接視圖目前狀态和未來狀态地視覺橋梁。可以産生動畫效果的變化包括:

      1、位置變化:在螢幕上移動視圖;

      2、大小變化:改變視圖架構和邊界;

      3、拉伸變化:改變視圖内容的延伸區域;

      4、改變透明程度:改變視圖的alpha值;

      5、改變狀态:隐藏或顯示狀态;

      6、改變視圖順序:哪個視圖顯示在前,哪個在後;

      7、旋轉:換句話說,就是任何應用到視圖上的仿射變換。

       UIView動畫是成塊運作的,也就是說作為完整的事務一次性運作。發出beginAnimations: context:請求開啟一個動畫塊。commitAnimations結束一個動畫塊。注意: 把這兩個類方法發送給UIView而不是發送給單獨的視圖。同時在這兩個調用之間的塊中,添加動畫的展現方式并更新視圖。你可以使用以下步驟建立UIView動畫。

      (1)調用beginAnimations : context方法開啟一個動畫塊;

      (2)調用setAnimationCurve方法定義動畫加速和減速方式;

      (3)調用setAnimationDuration方法設定動畫時長;

      (4)自定義動畫效果;

      (5)調用commitAnimations方法結束你的動畫塊。

你可以設定動畫委托,通知它在你的動畫開始或結束的時候調用相應的回調方法。例如:

[UIView setAnimationDelegate:self];
 [UIView setAnimationDidStopSelector:@selector(doSomething)];
           

下面是一些常用的UIView過渡動畫:

a、下翻頁過渡

CGContextRef context = UIGraphicsGetCurrentContext();
    [UIView beginAnimations:nil context:context];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationDuration:0.7];
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];
    // do something here
    
    [UIView commitAnimations];
           

b、上翻頁過渡

CGContextRef context = UIGraphicsGetCurrentContext();
    [UIView beginAnimations:nil context:context];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationDuration:0.7];
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];
    // do something here
    
    [UIView commitAnimations];
           

c、頁面左轉過渡

CGContextRef context = UIGraphicsGetCurrentContext();
    [UIView beginAnimations:nil context:context];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationDuration:0.7];
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.view cache:YES];
    // do something here
    
    [UIView commitAnimations];
           

d、頁面右轉過渡

CGContextRef context = UIGraphicsGetCurrentContext();
    [UIView beginAnimations:nil context:context];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationDuration:0.7];
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];
    // do something here
    
    [UIView commitAnimations];
           

二、Core Animation動畫

       除了UIView動畫以外,Core Animation API可為iPhone應用程式提供高度靈活的動畫解決方案。Core Animation Transitions僅在實作中做了幾個小小的變動便豐富了UIView動畫的内涵。注意:CATransition隻針對圖層,不針對視圖。圖層是Core Animation與每個UIView産生聯系的工作層面。使用Core Animation時,應該将CATransition應用到視圖的預設圖層([myView  layer])而不是視圖本身。建立的CA動畫步驟如下:

      (1)建立CA對象;

      (2)設定它的參數;

      (3)把這個帶着參數的過渡添加到圖層。

CA動畫使用了類型和子類型兩個概念。類型指定了過渡的種類,子類型設定了過渡的方向。對類型和子類型應用動畫時,它們一起描述了視圖應該怎麼樣完成過渡。

Core Animation是QuartzCore架構的一個組成部分,是以你必須将Quartz Core架構添加到項目中,并在使用這些功能時将<QuartzCore/QuartzCore.h>包含進你的代碼中。

下面是一些常用的CA過渡動畫:      

a、淡化(fade)

CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 0.7;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.type = kCATransitionFade;
animation.subtype = kCATransitionFromLeft;
/*
 kCATransitionFromLeft:    從左至右
 kCATransitionFromBottom:  下下至上
 kCATransitionFromRight:   從右至左
 kCATransitionFromTop:     從上至下
 */
// do something here
    
[[self.view layer] addAnimation:animation forKey:@"animation"];
           

b、推擠(push)

CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 0.7;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.type = kCATransitionPush;
animation.subtype = kCATransitionFromLeft;
/*
 kCATransitionFromLeft:    從左至右
 kCATransitionFromBottom:  下下至上
 kCATransitionFromRight:   從右至左
 kCATransitionFromTop:     從上至下
 */
// do something here
    
[[self.view layer] addAnimation:animation forKey:@"animation"];
           

c、揭開(reveal)

CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 0.7;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.type = kCATransitionReveal;
animation.subtype = kCATransitionFromLeft;
/*
 kCATransitionFromLeft:    從左至右
 kCATransitionFromBottom:  下下至上
 kCATransitionFromRight:   從右至左
 kCATransitionFromTop:     從上至下
 */
// do something here
    
[[self.view layer] addAnimation:animation forKey:@"animation"];
           

d、覆寫(moveIn)

CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 0.7;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.type = kCATransitionMoveIn;
animation.subtype = kCATransitionFromLeft;
/*
 kCATransitionFromLeft:    從左至右
 kCATransitionFromBottom:  下下至上
 kCATransitionFromRight:   從右至左
 kCATransitionFromTop:     從上至下
 */
// do something here
    
[[self.view layer] addAnimation:animation forKey:@"animation"];
           

e、立方體翻轉(cube)

CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 0.7;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.type = @"cube";
animation.subtype = kCATransitionFromLeft;
/*
 kCATransitionFromLeft:    從左至右
 kCATransitionFromBottom:  下下至上
 kCATransitionFromRight:   從右至左
 kCATransitionFromTop:     從上至下
 */
// do something here
    
[[self.view layer] addAnimation:animation forKey:@"animation"];
           

f、吸收(suckEffect)

CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 0.7;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.type = @"suckEffect";
animation.subtype = kCATransitionFromLeft;
/*
 kCATransitionFromLeft:    從左至右
 kCATransitionFromBottom:  下下至上
 kCATransitionFromRight:   從右至左
 kCATransitionFromTop:     從上至下
 */
// do something here
    
[[self.view layer] addAnimation:animation forKey:@"animation"];
           

g、翻轉(oglFlip)

CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 0.7;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.type = @"oglFlip";
animation.subtype = kCATransitionFromLeft;
/*
 kCATransitionFromLeft:    從左至右
 kCATransitionFromBottom:  下下至上
 kCATransitionFromRight:   從右至左
 kCATransitionFromTop:     從上至下
 */
// do something here
    
[[self.view layer] addAnimation:animation forKey:@"animation"];
           

h、水波紋(rippleEffect)

CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 0.7;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.type = @"rippleEffect";
animation.subtype = kCATransitionFromLeft;
/*
 kCATransitionFromLeft:    從左至右
 kCATransitionFromBottom:  下下至上
 kCATransitionFromRight:   從右至左
 kCATransitionFromTop:     從上至下
 */
// do something here
    
[[self.view layer] addAnimation:animation forKey:@"animation"];
           

i、翻頁(pageCurl)

CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 0.7;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.type = @"pageCurl";
animation.subtype = kCATransitionFromLeft;
/*
 kCATransitionFromLeft:    從左至右
 kCATransitionFromBottom:  下下至上
 kCATransitionFromRight:   從右至左
 kCATransitionFromTop:     從上至下
 */
// do something here
    
[[self.view layer] addAnimation:animation forKey:@"animation"];
           

j、反翻頁(pageUnCurl)

CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 0.7;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.type = @"pageUnCurl";
animation.subtype = kCATransitionFromLeft;
/*
 kCATransitionFromLeft:    從左至右
 kCATransitionFromBottom:  下下至上
 kCATransitionFromRight:   從右至左
 kCATransitionFromTop:     從上至下
 */
// do something here
    
[[self.view layer] addAnimation:animation forKey:@"animation"];
           

k、鏡頭開(cameraIrisHollowOpen)

CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 0.7;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.type = @"cameraIrisHollowOpen";
animation.subtype = kCATransitionFromLeft;
/*
 kCATransitionFromLeft:    從左至右
 kCATransitionFromBottom:  下下至上
 kCATransitionFromRight:   從右至左
 kCATransitionFromTop:     從上至下
 */
// do something here
    
[[self.view layer] addAnimation:animation forKey:@"animation"];
           

l、鏡頭關(cameraIrisHollowClose)

CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 0.7;
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.type = @"cameraIrisHollowClose";
animation.subtype = kCATransitionFromLeft;
/*
 kCATransitionFromLeft:    從左至右
 kCATransitionFromBottom:  下下至上
 kCATransitionFromRight:   從右至左
 kCATransitionFromTop:     從上至下
 */
// do something here
    
[[self.view layer] addAnimation:animation forKey:@"animation"];