iOS開發UI篇—核心動畫(轉場動畫和組動畫)
一、轉場動畫簡單介紹
CAAnimation的子類，用於做轉場動畫，能夠為層提供移出螢幕和移入螢幕的動畫效果。iOS比Mac OS X的轉場動畫效果少一點
UINavigationController就是通過CATransition實現了將控制器的檢視推入螢幕的動畫效果
屬性解析:
type：動畫過渡型別
subtype：動畫過渡方向
startProgress：動畫起點(在整體動畫的百分比)
endProgress：動畫終點(在整體動畫的百分比)
二、轉場動畫程式碼示例
1.介面搭建
2.實現程式碼
//
// YYViewController.m
// 13-轉場動畫
//
// Created by apple on 14-6-21.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import "YYViewController.h"
@interface YYViewController ()
@property(nonatomic,assign) int index;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
- (IBAction)preOnClick:(UIButton *)sender;
- (IBAction)nextOnClick:(UIButton *)sender;
@end
@implementation YYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.index=1;
}
- (IBAction)preOnClick:(UIButton *)sender {
self.index--;
if (self.index<1) {
self.index=7;
}
self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]];
//建立核心動畫
CATransition *ca=[CATransition animation];
//告訴要執行什麼動畫
//設定過度效果
[email protected]"cube";
//設定動畫的過度方向（向左）
ca.subtype=kCATransitionFromLeft;
//設定動畫的時間
ca.duration=2.0;
//新增動畫
[self.iconView.layer addAnimation:ca forKey:nil];
}
//下一張
- (IBAction)nextOnClick:(UIButton *)sender {
self.index++;
if (self.index>7) {
self.index=1;
}
self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]];
//1.建立核心動畫
CATransition *ca=[CATransition animation];
//1.1告訴要執行什麼動畫
//1.2設定過度效果
[email protected]"cube";
//1.3設定動畫的過度方向（向右）
ca.subtype=kCATransitionFromRight;
//1.4設定動畫的時間
ca.duration=2.0;
//1.5設定動畫的起點
ca.startProgress=0.5;
//1.6設定動畫的終點
// ca.endProgress=0.5;
//2.新增動畫
[self.iconView.layer addAnimation:ca forKey:nil];
}
@end
點選上一張，或者下一張的時候，展示對應的動畫效果。
三、組動畫簡單說明
CAAnimation的子類，可以儲存一組動畫物件，將CAAnimationGroup物件加入層後，組中所有動畫物件可以同時併發執行
屬性解析：
animations：用來儲存一組動畫物件的NSArray
預設情況下，一組動畫物件是同時執行的，也可以通過設定動畫物件的beginTime屬性來更改動畫的開始時間
四、分組動畫程式碼示例
程式碼：
#import "YYViewController.h"
@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *iconView;
@end
@implementation NJViewController
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// 平移動畫
CABasicAnimation *a1 = [CABasicAnimation animation];
a1.keyPath = @"transform.translation.y";
a1.toValue = @(100);
// 縮放動畫
CABasicAnimation *a2 = [CABasicAnimation animation];
a2.keyPath = @"transform.scale";
a2.toValue = @(0.0);
// 旋轉動畫
CABasicAnimation *a3 = [CABasicAnimation animation];
a3.keyPath = @"transform.rotation";
a3.toValue = @(M_PI_2);
// 組動畫
CAAnimationGroup *groupAnima = [CAAnimationGroup animation];
groupAnima.animations = @[a1, a2, a3];
//設定組動畫的時間
groupAnima.duration = 2;
groupAnima.fillMode = kCAFillModeForwards;
groupAnima.removedOnCompletion = NO;
[self.iconView.layer addAnimation:groupAnima forKey:nil];
}
@end
說明：平移-旋轉-縮放作為一組動畫一起執行。
執行效果：
一、轉場動畫簡單介紹
CAAnimation的子類，用於做轉場動畫，能夠為層提供移出螢幕和移入螢幕的動畫效果。iOS比Mac OS X的轉場動畫效果少一點
UINavigationController就是通過CATransition實現了將控制器的檢視推入螢幕的動畫效果
屬性解析:
type：動畫過渡型別
subtype：動畫過渡方向
startProgress：動畫起點(在整體動畫的百分比)
endProgress：動畫終點(在整體動畫的百分比)
二、轉場動畫程式碼示例
1.介面搭建
2.實現程式碼
//
// YYViewController.m
// 13-轉場動畫
//
// Created by apple on 14-6-21.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import "YYViewController.h"
@interface YYViewController ()
@property(nonatomic,assign) int index;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
- (IBAction)preOnClick:(UIButton *)sender;
- (IBAction)nextOnClick:(UIButton *)sender;
@end
@implementation YYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.index=1;
}
- (IBAction)preOnClick:(UIButton *)sender {
self.index--;
if (self.index<1) {
self.index=7;
}
self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]];
//建立核心動畫
CATransition *ca=[CATransition animation];
//告訴要執行什麼動畫
//設定過度效果
[email protected]"cube";
//設定動畫的過度方向（向左）
ca.subtype=kCATransitionFromLeft;
//設定動畫的時間
ca.duration=2.0;
//新增動畫
[self.iconView.layer addAnimation:ca forKey:nil];
}
//下一張
- (IBAction)nextOnClick:(UIButton *)sender {
self.index++;
if (self.index>7) {
self.index=1;
}
self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]];
//1.建立核心動畫
CATransition *ca=[CATransition animation];
//1.1告訴要執行什麼動畫
//1.2設定過度效果
[email protected]"cube";
//1.3設定動畫的過度方向（向右）
ca.subtype=kCATransitionFromRight;
//1.4設定動畫的時間
ca.duration=2.0;
//1.5設定動畫的起點
ca.startProgress=0.5;
//1.6設定動畫的終點
// ca.endProgress=0.5;
//2.新增動畫
[self.iconView.layer addAnimation:ca forKey:nil];
}
@end
點選上一張，或者下一張的時候，展示對應的動畫效果。
三、組動畫簡單說明
CAAnimation的子類，可以儲存一組動畫物件，將CAAnimationGroup物件加入層後，組中所有動畫物件可以同時併發執行
屬性解析：
animations：用來儲存一組動畫物件的NSArray
預設情況下，一組動畫物件是同時執行的，也可以通過設定動畫物件的beginTime屬性來更改動畫的開始時間
四、分組動畫程式碼示例
程式碼：
#import "YYViewController.h"
@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *iconView;
@end
@implementation NJViewController
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// 平移動畫
CABasicAnimation *a1 = [CABasicAnimation animation];
a1.keyPath = @"transform.translation.y";
a1.toValue = @(100);
// 縮放動畫
CABasicAnimation *a2 = [CABasicAnimation animation];
a2.keyPath = @"transform.scale";
a2.toValue = @(0.0);
// 旋轉動畫
CABasicAnimation *a3 = [CABasicAnimation animation];
a3.keyPath = @"transform.rotation";
a3.toValue = @(M_PI_2);
// 組動畫
CAAnimationGroup *groupAnima = [CAAnimationGroup animation];
groupAnima.animations = @[a1, a2, a3];
//設定組動畫的時間
groupAnima.duration = 2;
groupAnima.fillMode = kCAFillModeForwards;
groupAnima.removedOnCompletion = NO;
[self.iconView.layer addAnimation:groupAnima forKey:nil];
}
@end
說明：平移-旋轉-縮放作為一組動畫一起執行。
執行效果：