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 @end 19 20 @implementation YYViewController
21 22 - (void)viewDidLoad
23 {
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 *)event 11 {
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

说明：平移-旋转-缩放作为一组动画一起执行。

执行效果：