实例讲解iOS中的CATransition转场动画使用

一、简介
CATransition是CAAnimation的子类,用于做转场动画
能够为图层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点
如:UINavigationController导航控制器就是通过CATransition转场动画实现了将控制器的视图推入屏幕的动画效果

CATransition头文件
动画属性:
type:动画过渡类型
subtype:动画过渡方向
startProgress:动画起点(在整体动画的百分比)
endProgress:动画终点(在整体动画的百分比)
......

代码如下:

#import <QuatzCore/CAAnimation.h> 
CATransition *myTransition=[CATransition animation];//创建CATransition 
myTransition.duration=0.3;//持续时长0.3秒 
myTransition.timingFunction=UIViewAnimationCurveEaseInOut;//计时函数,从头到尾的流畅度 
myTransition.type=kCATransionPush;//动画类型 
myTransition.subtype=kCATransitionFromLeft;//子类型 
//要令一个转场生效,组要将动画添加到将要变为动画视图所附着的图层。例如在两个视图控制器之间进行转场,那就将动画添加到窗口的图层中: 
[[self.view.superview layer]addAnimation:myTransition forKey:nil ]; 
//如果是将控制器内的子视图转场到另一个子视图,就将动画加入到视图控制器的图层。还有一种选择,用视图控制器内部的视图作为替代,将你的子视图作为主视图的子图层: 
 [ self.view.layer addAnimation:myTransition forKey:nil ]; 
[ self.view addSubView:newView ]; 
[oldView removeFromSuperview]; 
//如果你使用的是导航控制器,可以将动画加到导航控制器的视图图层中。 
[ navigationController.view.layer addAnimation:myTransition forKey:nil  ];

转场动画过渡效果

二、view类自带转场动画函数
1、单视图
+(void)transitionWithView:(UIView*)view duration:(NSTimeInterval)duration options:
(UIViewAnimationOptions)options
animations:(void(^)(void))animations
completion:(void(^)(BOOLfinished))completion;
参数说明:
duration:动画的持续时间
view:需要进行转场动画的视图
options:转场动画的类型
animations:将改变视图属性的代码放在这个block中
completion:动画结束后,会自动调用这个block
2、双视图
+ (void)transitionFromView:(UIView*) fromView
toView:(UIView*) toViewduration:(NSTimeInterval)durationoptions:(UIViewAnimationOptions) options
completion:(void(^)(BOOLfinished))completion;
参数说明:
duration:动画的持续时间
options:转场动画的类型
animations:将改变视图属性的代码放在这个block中
completion:动画结束后,会自动调用这个block
三、应用
注意:
转场动画使用注意点:转场代码必须和转场动画代码写在一起,否则无效
1、图片浏览
实例:

代码实现

代码如下:

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imageV;

@end

@implementation ViewController

// 注意: 转场动画使用注意点:转场代码必须和转场动画代码写在一起,否则无效
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 实现:图片浏览

/** 转场代码 */
    static int index = 2;
    NSString *imageName = [NSString stringWithFormat:@"%d",index];
    _imageV.image = [UIImage imageNamed:imageName];
    index++;

if (index == 4) {
        index = 1;
    }

/** 转场动画代码 */
    // 创建转场动画对象
    CATransition *anim = [CATransition animation];

// 设置转场类型
    anim.type = @"pageCurl";

// 设置动画的方向
    anim.subtype = kCATransitionFromLeft;

anim.duration = 3;

[_imageV.layer addAnimation:anim forKey:nil];
}
@end

2、图标3D翻转:使用UIView自带的单视图的转场动画函数实现

代码实现

代码如下:

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic)  UIImageView *iconView;

@end

@implementation ViewController

- (void)viewDidLoad{

[super viewDidLoad];

UIImageView *iconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1"]];
    [self.view addSubview:iconView];
    iconView.center = self.view.center;
    iconView.backgroundColor = [UIColor greenColor];
    self.iconView = iconView;

// 设置为圆角图片
    self.iconView.layer.cornerRadius = self.iconView.frame.size.width * 0.5;
    self.iconView.clipsToBounds = YES;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

// UIView自带的转场动画
    [UIView transitionWithView:self.iconView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{ /**  执行左翻转动画,*/
        // 从左边翻转 , 之前设置显示图片1,翻转后显示图2 -》图片1 左翻转到最后显示图片2

self.iconView.image = [UIImage imageNamed:@"2"];

} completion:^(BOOL finished) {

NSLog(@"completion");

/** 左翻转动画 结束后, 停 1 秒后,再执行 右翻转动画 */

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ // 停 1 秒后,再执行 右翻转动画

[UIView transitionWithView:self.iconView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{ // 然后,从右边翻转,翻转时显示图片1 -》图片2 右翻转最后显示图片1

self.iconView.image = [UIImage imageNamed:@"1"];

} completion:nil];

});
    }];
}
@end

3、视图间转场动画:使用UIView自带双视图间的转场动画函数实现

代码如下:

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

/**< imageView1  */
@property (nonatomic, strong) UIView *view1;

/**< imageView2 */
@property (nonatomic, strong) UIView *view2;

@end

@implementation ViewController

- (void)viewDidLoad{

[super viewDidLoad];

self.view.backgroundColor = [UIColor blackColor];

// 1. scrollView 添加 view2 子控件
    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = [UIColor greenColor];

[self.scrollView addSubview:view2];
    self.view2 = view2;

// 2. scrollView 添加 view1 子控件
    UIView *view1 = [[UIView alloc] init];
    view1.backgroundColor = [UIColor redColor];

[self.scrollView addSubview:view1];
    self.view1 = view1;

// 3. frame
    CGFloat scrollViewW = self.scrollView.frame.size.width;
    CGFloat scrollViewH = self.scrollView.frame.size.height;

view1.frame = CGRectMake(0, 0, scrollViewW, scrollViewH);
    view2.frame = CGRectMake(0, 0, scrollViewW, scrollViewH); // CGRectMake(scrollViewW, 0, scrollViewW, scrollViewH);

// 4. scrollView
    self.scrollView.contentSize = CGSizeMake(scrollViewW, scrollViewH);
    // 添加手势
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapClick:)];
    [self.scrollView addGestureRecognizer:tap];
}

int i = 1;

// 监听到点击scrollView,进行翻转动画
- (void)tapClick:(UITapGestureRecognizer *)tap{

if (i % 2 != 0) {

[UIView transitionFromView:self.view1 toView:self.view2 duration:1.0 options:UIViewAnimationOptionTransitionFlipFromTop completion:nil];

}else{
        [UIView transitionFromView:self.view2 toView:self.view1 duration:1.0 options:UIViewAnimationOptionTransitionFlipFromBottom completion:nil];
    }

i++;
}

时间: 2016-06-13

IOS轻松几步实现自定义转场动画

一.系统提供的转场动画 目前,系统给我们提供了push/pops和present/dismiss两种控制器之间跳转方.当然,通过设置UIModalTransitionStyle属性,可以实现下面4种modal效果,相信大家都比较熟悉了,这里就不再展示效果图. UIModalTransitionStyleCoverVertical // 从下往上, UIModalTransitionStyleFlipHorizontal // 水平翻转 UIModalTransitionStyleCrossDis

深入学习iOS7自定义导航转场动画

在iOS7以前,开发者如果希望定制导航控制器推入推出视图时的转场动画,一般都只能通过子类化UINavigationController或者自己编写动画代码去覆盖相应的方法,现在iOS7为开发者带来了福音,苹果公司引入了大量新API,给予了开发者很高的自由度,在处理由UIViewController管理的UIView动画时,这些API使用方便,可扩展性也很强,定制起来非常轻松: 全新的针对UIView的动画block方法 全新的UIViewControllerAnimatedTransitioni

详解iOS开发中的转场动画和组动画以及UIView封装动画

一.转场动画 CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果 属性解析: type:动画过渡类型 subtype:动画过渡方向 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点(在整体动画的百分比) 转场动画代码示例 1.界面搭建 2.实现代码 复制代码

iOS swift实现转场动画的方法示例

转场动画介绍 转场动画在我们日常开发中是经常遇到的,所谓转场动画,就是一个控制器的view切到另一个控制器的view上过程中过的动画效果.本例子是实现了在导航控制器的titleView边上慢慢弹出一个控制器.下面话不多说,来一起看看详细的介绍: 效果图: 专场前 专场后 示例代码 首先自定义一个animator类.在需要转场的控制器内,设置代理 //需要设置转场动画的控制器titleViewVc.transitioningDelegate = aniamator//这里的animator是ani

IOS实战之自定义转场动画详解

转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerAnimated:completion:这一组函数以模态视图的方式展现.隐藏视图.如果用到了navigationController,还可以调用pushViewController:animated:和popViewController这一组函数将新的视图控制器压栈.弹栈. 下图中所有转场动画都是自定义的动画,这些效果如果不用自定义动

iOS实现类似格瓦拉电影的转场动画

用过格瓦拉电影,或者其他app可能都知道,一种点击按钮用放大效果实现转场的动画现在很流行,效果大致如下 自定义转场动画 首先就要声明一个遵守UIViewControllerAnimatedTransitioning协议的类. 然后实现协议中的两个函数 // This is used for percent driven interactive transitions, as well as for container controllers that have companion animati

详解IOS图层转场动画

CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果 属性解析: type:动画过渡类型 subtype:动画过渡方向 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点(在整体动画的百分比) 具体代码: /* 过渡效果 fade //交叉淡化过渡(不支持过渡方

详解IOS UITableViewCell 的 imageView大小更改

详解IOS UITableViewCell 的 imageView大小更改 实例代码: - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCell

详解IOS开发中生成推送的pem文件

详解IOS开发中生成推送的pem文件 具体步骤如下: 首先,需要一个pem的证书,该证书需要与开发时签名用的一致. 具体生成pem证书方法如下: 1. 登录到 iPhone Developer Connection Portal(http://developer.apple.com/iphone/manage/overview/index.action )并点击 App IDs 2. 创建一个不使用通配符的 App ID .通配符 ID 不能用于推送通知服务.例如,  com.itotem.ip

详解IOS中文件路径判断是文件还是文件夹

详解IOS中文件路径判断是文件还是文件夹 方法1 + (BOOL)isDirectory:(NSString *)filePath { BOOL isDirectory = NO; [[NSFileManager defaultManager] fileExistsAtPath:filePath isDirectory:&isDirectory]; return isDirectory; } 方法2 + (BOOL)isDirectory:(NSString *)filePath { NSNum

详解IOS串行队列与并行队列进行同步或者异步的实例

详解IOS串行队列与并行队列进行同步或者异步的实例 IOS中GCD的队列分为串行队列和并行队列,任务分为同步任务和异步任务,他们的排列组合有四种情况,下面分析这四种情况的工作方式. 同步任务,使用GCD dispatch_sync 进行派发任务 - (void)testSync { dispatch_queue_t serialQueue = dispatch_queue_create("com.zyt.queue", DISPATCH_QUEUE_SERIAL); dispatch_

详解IOS 单例的两种方式

详解IOS 单例的两种方式 方法一: #pragma mark - #pragma mark sharedSingleton methods //单例函数 static RtDataModel *sharedSingletonManager = nil; + (RtDataModel *)sharedManager { @synchronized(self) { if (sharedSingletonManager == nil) { sharedSingletonManager = [[sel

详解 IOS下int long longlong的取值范围

详解 IOS下int long longlong的取值范围 32bit下: unsigned int 0-4294967295 int -2147483648-2147483647 unsigned long 和int一样 long 和int一样 long long的最大值:9223372036854775807 long long的最小值:-9223372036854775808 unsigned long long的最大值:1844674407370955161 __int64的最大值:92

详解IOS 利用storyboard修改UITextField的placeholder文字颜色

详解IOS 利用storyboard修改UITextField的placeholder文字颜色 最近有个需求需要修改UITextField的placeholder文字颜色,在网上找发现有用代码修改的,但是考虑到更加优雅的实现,所以尝试着在storyboard中直接实现,结果竟然真的成功了, 实现的位置如下: 具体步骤: 1.在User Defined Runtime Attributes中添加一个Key. 2.输入Key Path(这里我们输入_placeholderLabel.textColo

详解iOS自定义UITabBar与布局

在小编整理过的文章iOS项目基本框架搭建中,我们详细说明了如何对TabBarItem的图片属性以及文字属性进行一些自定义配置.但是,很多时候,我们需要修改TabBarItem的图片和文字属性之外,还需要自定义TabBarItem的位置,这样系统自带的TabBar的样式并不能满足我们的项目需求,所以我们需要对系统的UITabBar进行自定义,以达到我们的项目需求.例如新浪微博App的底部tab的item就无法用自带的TabBarItem进行实现,最中间那个[+]发布微博并不是用来切换tab的,而是

iOS实现转场动画的3种方法示例

什么是转场动画 在 NavigationController 里 push 或 pop 一个 View Controller,在 TabBarController 中切换到其他 View Controller,以 Modal 方式显示另外一个 View Controller,这些都是 View Controller Transition.在 storyboard 里,每个 View Controller 是一个 Scene,View Controller Transition 便是从一个 Sce