iOS開發UI篇—核心動畫(轉場動畫和組動畫)

標籤：

iOS開發UI篇—核心動畫(轉場動畫和組動畫)

一、轉場動畫簡單介紹

CAAnimation的子類，用於做轉場動畫，能夠為層提供移出螢幕和移入螢幕的動畫效果。iOS比Mac OS X的轉場動畫效果少一點

UINavigationController就是通過CATransition實現了將控制器的視圖推入螢幕的動畫效果

屬性解析:

type：動畫過渡類型

subtype：動畫過渡方向

startProgress：動畫起點(在整體動畫的百分比)

endProgress：動畫終點(在整體動畫的百分比)

 

二、轉場動畫程式碼範例

1.介面搭建

2.實現代碼

 1 // 2 //  YYViewController.m 3 //  13-轉場動畫 4 // 5 //  Created by apple on 14-6-21. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYViewController.h"10 11 @interface YYViewController ()12 @property(nonatomic,assign) int index;13 @property (weak, nonatomic) IBOutlet UIImageView *iconView;14 15 - (IBAction)preOnClick:(UIButton *)sender;16 - (IBAction)nextOnClick:(UIButton *)sender;17 18 @end19 20 @implementation YYViewController21 22 - (void)viewDidLoad23 {24     [super viewDidLoad];25     self.index=1;26 27 }28 29 - (IBAction)preOnClick:(UIButton *)sender {30     self.index--;31     if (self.index<1) {32         self.index=7;33     }34     self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]];35     36     //建立核心動畫37     CATransition *ca=[CATransition animation];38     //告訴要執行什麼動畫39     //設定過度效果40     [email protected]"cube";41     //設定動畫的過度方向（向左）42     ca.subtype=kCATransitionFromLeft;43     //設定動畫的時間44     ca.duration=2.0;45     //添加動畫46     [self.iconView.layer addAnimation:ca forKey:nil];47 }48 49 //下一張50 - (IBAction)nextOnClick:(UIButton *)sender {51     self.index++;52     if (self.index>7) {53         self.index=1;54     }55         self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]];56     57     //1.建立核心動畫58     CATransition *ca=[CATransition animation];59     60     //1.1告訴要執行什麼動畫61     //1.2設定過度效果62     [email protected]"cube";63     //1.3設定動畫的過度方向（向右）64     ca.subtype=kCATransitionFromRight;65     //1.4設定動畫的時間66     ca.duration=2.0;67     //1.5設定動畫的起點68     ca.startProgress=0.5;69     //1.6設定動畫的終點70 //    ca.endProgress=0.5;71     72     //2.添加動畫73     [self.iconView.layer addAnimation:ca forKey:nil];74 }75 @end

點擊上一張，或者下一張的時候，展示對應的動畫效果。

三、組動畫簡單說明

CAAnimation的子類，可以儲存一組動畫對象，將CAAnimationGroup對象加入層後，組中所有動畫對象可以同時並發運行

屬性解析：

animations：用來儲存一組動畫對象的NSArray

預設情況下，一組動畫對象是同時啟動並執行，也可以通過設定動畫對象的beginTime屬性來更改動畫的開始時間

四、分組動畫程式碼範例

代碼：

 1 #import "YYViewController.h" 2  3 @interface YYViewController () 4 @property (weak, nonatomic) IBOutlet UIView *iconView; 5  6 @end 7  8 @implementation NJViewController 9 10 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event11 {12     13     // 平移動畫14     CABasicAnimation *a1 = [CABasicAnimation animation];15     a1.keyPath = @"transform.translation.y";16     a1.toValue = @(100);17     // 縮放動畫18     CABasicAnimation *a2 = [CABasicAnimation animation];19     a2.keyPath = @"transform.scale";20     a2.toValue = @(0.0);21     // 旋轉動畫22     CABasicAnimation *a3 = [CABasicAnimation animation];23     a3.keyPath = @"transform.rotation";24     a3.toValue = @(M_PI_2);25     26     // 組動畫27     CAAnimationGroup *groupAnima = [CAAnimationGroup animation];28     29     groupAnima.animations = @[a1, a2, a3];30     31     //設定組動畫的時間32     groupAnima.duration = 2;33     groupAnima.fillMode = kCAFillModeForwards;34     groupAnima.removedOnCompletion = NO;35     36     [self.iconView.layer addAnimation:groupAnima forKey:nil];37 }38 39 @end

說明：平移-旋轉-縮放作為一組動畫一起執行。

執行效果：

iOS開發UI篇—核心動畫(轉場動畫和組動畫)