服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - 实例讲解iOS中的CATransition转场动画使用

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

2021-01-20 16:21iOS_成才录 IOS

CATransition类为应用程序的转场动画提供了很多可控制参数,接下来我们就以几个实例讲解iOS中的CATransition转场动画使用,需要的朋友可以参考下

一、简介
catransition是caanimation的子类,用于做转场动画
能够为图层提供移出屏幕和移入屏幕的动画效果。ios比mac os x的转场动画效果少一点
如:uinavigationcontroller导航控制器就是通过catransition转场动画实现了将控制器的视图推入屏幕的动画效果

实例讲解iOS中的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  ]; 


转场动画过渡效果

 

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

二、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、图片浏览
实例:

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

代码实现

复制代码 代码如下:


#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自带的单视图的转场动画函数实现

 

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

代码实现

复制代码 代码如下:


#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++;
}

 

延伸 · 阅读

精彩推荐
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01
  • IOS解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28