文档章节

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

caoxiang
 caoxiang
发布于 2015/08/18 14:01
字数 780
阅读 66
收藏 0

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
复制代码

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

执行效果:

本文转载自:http://www.cnblogs.com/wendingding/p/3801454.html

caoxiang
粉丝 5
博文 15
码字总数 4390
作品 0
郑州
程序员
私信 提问
iOS开发系列--让你的应用“动”起来

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jianxin160/article/details/47753223 --iOS核心动画 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动...

KenshinCui
2015/08/18
0
0
iOS UIView Block 动画- (基础动画, 关键帧动画, 动画组)

UIView本身对于基本动画和关键帧动画、转场动画都有相应的封装,在对动画细节没有特殊要求的情况下使用起来也要简单的多 1、UIView Block 基础动画 ,转场动画+ 缩放 2、关键帧动画(里面加上...

朝雨晚风
2018/05/31
0
0
iOS开发系列--让你的应用“动”起来

概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画...

creeve
2014/10/26
676
0
iOS动画开发之四——核心动画编程(CoreAnimation)

iOS动画开发之四——核心动画编程(CoreAnimation) 一、引言 前几篇博客详细介绍了有关UIView层的动画使用与相关的效果,然而这些动画是UIKit为我们封装好的核心动画层的方法,通过这些方法,...

珲少
2015/07/28
1K
0
iOS高仿QQ侧滑控件、下载框架、动画效果、扫一扫、颜色变化、K线图等源码

iOS精选源码 仿京东"加入购物车"转场动画(http://www.code4app.com/thread-28162-1-1.html) ColorTool(颜色转换)(http://www.code4app.com/thread-29256-1-1.html) Swift 专业版K线(http://w......

sunnyaigd
2018/04/17
56
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部