UIViewAnimation動畫與Core Animation的CATransition類動畫

使用UIView類函數實現

// UIViewAnimationTransitionFlipFromLeft, 向左轉動
// UIViewAnimationTransitionFlipFromRight, 向右轉動
// UIViewAnimationTransitionCurlUp, 向上翻動
// UIViewAnimationTransitionCurlDown, 向下翻動
 

[UIView beginAnimations:@"animationID" context:nil];
[UIView setAnimationDuration:0.5f]; //動畫時長
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft forView:self.view cache:YES]; //給視圖添加過渡效果
//在這里寫你的代碼.
[UIView commitAnimations]; //提交動畫

使用CATransition對象來實現

CATransition比較強大,一般可以使用CATransition模擬UIView的動畫。

過渡效果

fade                  // 交叉淡化過渡(不支持過渡方向)
push                  // 新視圖把舊視圖推出去
moveIn                // 新視圖移到舊視圖上面
reveal                // 將舊視圖移開,顯示下面的新視圖
cube                  // 立方體翻滾效果
oglFlip               // 上下左右翻轉效果
suckEffect            // 收縮效果,如一塊布被抽走(不支持過渡方向)
rippleEffect          // 滴水效果(不支持過渡方向)
pageCurl              // 向上翻頁效果
pageUnCurl            // 向下翻頁效果
cameraIrisHollowOpen  // 相機鏡頭打開效果(不支持過渡方向)
cameraIrisHollowClose // 相機鏡頭關上效果(不支持過渡方向)

過渡方向

fromRight;
fromLeft;
fromTop;
fromBottom;
CATransition *animation = [CATransition animation];
animation.delegate = self;
animation.duration = 0.5f; // 動畫時長
animation.timingFunction = UIViewAnimationCurveEaseInOut;
animation.fillMode = kCAFillModeForwards;
animation.type = @”cube”; // 過度效果
animation.subtype = @”formLeft”; // 過渡方向
animation.startProgress = 0.0 // 動畫開始起點(在整體動畫的百分比)
animation.endProgress = 1.0;  // 動畫停止終點(在整體動畫的百分比)
animation.removedOnCompletion = NO;
[self.view.layer addAnimation:animation forKey:@"animation"];

實現iPhone漂亮的動畫效果主要有兩種方法

  • 一種是UIView層面的

  • 一種是使用CATransition進行更低層次的控制

第一種是UIView,UIView方式可能在低層也是使用CATransition進行了封裝,它只能用于一些簡單的、常用的效果展現,這里寫一個常用的示例代碼,供大家參考。

    [UIView beginAnimations:@"Curl" context:nil]; // 動畫開始
    [UIView setAnimationDuration:0.75];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:myview cache:YES];
    [myview removeFromSuperview];
    [UIView commitAnimations];

第二種方式相對復雜一些,但如果更好的進行控制,還是使用這種方法吧,

基本使用方法可以看一下如下例子:


    CATransition *animation = [CATransition animation];
    [animation setDuration:1.25f];
    [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
    [animation setType:kCATransitionReveal];
    [animation setSubtype: kCATransitionFromBottom];
    [self.view.layer addAnimation:animation forKey:@"Reveal"];

這里使用了setTypesetSubtype組合,這使用個比較保險,因為他的參數就是官方API里定義的,他們的參數說明可以參考如下:

[animation setType:@"suckEffect"];

這里的suckEffect就是效果名稱,可以用的效果主要有:

pageCurl 向上翻一頁

pageUnCurl 向下翻一頁

rippleEffect 滴水效果

suckEffect 收縮效果,如一塊布被抽走

cube 立方體效果

oglFlip 上下翻轉效果

CABasicAnimation和UIView動畫的區別

關于UIView動畫:

[UIView beginAnimations:@"zoom out" context:nil];
[UIView setAnimationDuration:1.f];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
cover.transform = CGAffineTransformMakeScale(9.25,7.05);
cover.center = CGPointMake(430, 512);
[UIView commitAnimations]

UIView動畫是應用在一個view上面的。

關于CABasicAnimation動畫:

- (CAAnimation *)animationMove:(CGPoint)rootCenter {
    CABasicAnimation *animationMove = [CABasicAnimation animationWithKeyPath:@"position"];
    animationMove.duration = 1;
    animationMove.autoreverses = NO;
    // animationMove.delegate = self;
    animationMove.removedOnCompletion = NO;
    animationMove.fillMode = kCAFillModeForwards;
    animationMove.fromValue = [NSValue valueWithCGPoint:self.oldCoverCenter];
    animationMove.toValue =[NSValue valueWithCGPoint:rootCenter];
 
    return animationMove;
}

CABasicAnimation動畫是應用在一個layer上面的。

注:

  1. 把一個image放在一個viewlayer上來放大的時候,如果用UIView來做,圖片不會太多的失真和閃爍的效果,但是用CABasicAnimation來做失真和閃爍現象會很嚴重,效果很不好。
  2. 做動畫的疊加效果 很簡單,只要把各自的動畫放在一起就可以了。

請看這個效果:一本書邊移動到屏幕中間,邊放大,邊打開封面的效果。

[imageLayer addAnimation:[self animationOpen] forKey:@"Open"];
[UIView beginAnimations:@"zoom out" context:nil];
[UIView setAnimationDuration:1.f];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
cover.transform = CGAffineTransformMakeScale(5.5,5.5);
cover.center = CGPointMake(629, 384);
[UIView commitAnimations];
 
- (CAAnimation *)animationOpen {
    CABasicAnimation *animationOpen = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
    animationOpen.duration = 1;
    animationOpen.autoreverses = NO;
    animationOpen.delegate = self;  // 然后執行真正地打開書的內容
    animationOpen.removedOnCompletion = NO;
    animationOpen.fillMode = kCAFillModeForwards;
    animationOpen.fromValue = [NSNumber numberWithFloat:-M_PI/5];
    animationOpen.toValue = [NSNumber numberWithFloat:-M_PI/1.5];
 
    return animationOpen;
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,572評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5 13
  • 本文轉載自:http://www.cocoachina.com/ios/20150105/10812.html 為...
    idiot_lin閱讀 1,301評論 0 1
  • 在iOS實際開發中常用的動畫無非是以下四種:UIView動畫,核心動畫,幀動畫,自定義轉場動畫。 1.UIView...
    請叫我周小帥閱讀 3,159評論 1 23
  • 前言****本文忠實地展現了一個智能硬件產品糾結的誕生過程,或許可以滿足大家對工程師平常工作的一點好奇心。****...
    raoxuefeng閱讀 1,420評論 0 1