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 @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     [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     ca.type[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 *)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

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

执行效果:

时间: 08-13

iOS开发UI篇—核心动画(转场动画和组动画)的相关文章

iOS开发UI篇—核心动画(转场动画和组动画)(转摘)

iOS开发UI篇—核心动画(转场动画和组动画) 一.转场动画简单介绍 CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果 属性解析: type:动画过渡类型 subtype:动画过渡方向 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点(在整体动画的百分比)

iOS开发UI篇—核心动画(UIView封装动画)(转摘)

iOS开发UI篇—核心动画(UIView封装动画) 一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画支持 执行动画所需要的工作由UIView类自动完成,但仍要在希望执行动画时通知视图,为此需要将改变属性的代码放在[UIViewbeginAnimations:nil context:nil]和[UIView commitAnimations]之间 常见方法解析: + (void)setAnimati

iOS开发UI篇—核心动画(基础动画)

iOS开发UI篇—核心动画(基础动画) 一.简单介绍 CAPropertyAnimation的子类 属性解析: fromValue:keyPath相应属性的初始值 toValue:keyPath相应属性的结束值 随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值从fromValue渐渐地变为toValue 如果fillMode=kCAFillModeForwards和removedOnComletion=NO,那么在动画执行完毕后,图层会保持显示动画执行后的状态.但

iOS开发UI篇—核心动画(关键帧动画)

iOS开发UI篇—核心动画(关键帧动画) 一.简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值 属性解析: values:就是上述的NSArray对象.里面的元素称为”关键帧”(keyframe).动画对象会在指定的时间(duration)内,依次显示values数组

iOS开发UI篇—核心动画简介

iOS开发UI篇—核心动画简介 一.简单介绍 Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core Animation是跨平台的,可以用在Mac OS X和iOS平台. Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程.不阻塞主线程,可以理解为在执行动画的时候还能点击(按钮). 要注意的是,Core Animation是直接作用

iOS开发UI篇—核心动画(关键帧动画)(转摘)

iOS开发UI篇—核心动画(关键帧动画) 一.简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值 属性解析: values:就是上述的NSArray对象.里面的元素称为”关键帧”(keyframe).动画对象会在指定的时间(duration)内,依次显示values数组

iOS开发UI篇—核心动画(UIView封装动画)

一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画支持 执行动画所需要的工作由UIView类自动完成,但仍要在希望执行动画时通知视图,为此需要将改变属性的代码放在[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之间 常见方法解析: + (void)setAnimationDelegate:(id)delegate  

文顶顶 iOS开发UI篇—iOS开发中三种简单的动画设置

iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView beginAnimations:nil context:nil]; //设置动画时长 [UIView setAnimationDuration:2.0]; self.headImageView.bounds = rect; // commitAnimations,将beginAnimation之后的所

iOS开发UI篇—iOS开发中三种简单的动画设置

iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView beginAnimations:nil context:nil]; //设置动画时长 [UIView setAnimationDuration:2.0]; self.headImageView.bounds = rect; // commitAnimations,将beginAnimation之后的所