一、转场动画简单介绍
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 ca.type=@"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 ca.type=@"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
说明:平移-旋转-缩放作为一组动画一起执行。
执行效果: