CATransition过渡

简介: CATransition过渡

开发中,我们都希望能通过属性动画对一些比较难做动画的布局做变化,而属性动画只对图层的可动画属性起作用,所以要改变一个不能动画的属性或者从当前界面移除,属性动画将不起作用。


为了解决上面的问题,才有了过渡动画,过渡动画不像属性动画那样很平滑的从一个值过渡到另一个值,而是先出现上一个图形的轮廓外观,然后在两者之间进行交换,替换。


要是用过渡动画就要使用CATransition,它有type和subType两个属性来控制变化的效果:

type的属性是一个NSString类型,有下面几个值:

 kCATransitionFade
 kCATransitionMoveIn
 kCATransitionPush
 kCATransitionReveal

subType来控制滑入的方向:

kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom

下面简单写了个Demo,先看效果图:

1.png

很明显两者的变化是有区别的。

//
//  ViewController.m
//  CATransition过渡
//
//  Created by 刘浩浩 on 16/6/27.
//  Copyright © 2016年 CodingFire. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
{
    UIImageView *imageView;
     NSArray *images;
}
@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    imageView=[[UIImageView alloc]initWithFrame:CGRectMake(80, 80, 150, 150)];
    [self.view addSubview:imageView];
    images = @[[UIImage imageNamed:@"1"],
                    [UIImage imageNamed:@"2"],
                    [UIImage imageNamed:@"3"],
                    [UIImage imageNamed:@"4"]];
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btn.frame = CGRectMake(20, 568-100, 280, 40);
    [btn setTitle:@"Switch 突兀" forState:UIControlStateNormal];
    btn.layer.cornerRadius=5;
    btn.layer.borderWidth=1;
    btn.layer.borderColor = [UIColor blackColor].CGColor;
    [btn addTarget:self action:@selector(switchImage) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
    UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btn1.frame = CGRectMake(20, 568-50, 280, 40);
    [btn1 setTitle:@"Switch 平滑" forState:UIControlStateNormal];
    btn1.layer.cornerRadius=5;
    btn1.layer.borderWidth=1;
    btn1.layer.borderColor = [UIColor blackColor].CGColor;
    [btn1 addTarget:self action:@selector(switchImage1) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn1];
}
-(void)switchImage
{
    UIImage *currentImage = imageView.image;
    NSUInteger index = [images indexOfObject:currentImage];
    index = (index + 1) % [images count];
    imageView.image = images[index];
}
- (void)switchImage1
{
    //set up crossfade transition
    CATransition *transition = [CATransition animation];
    //切换模式
    transition.type = kCATransitionFade;
    //apply transition to imageview backing layer
    [imageView.layer addAnimation:transition forKey:nil];
    //cycle to next image
    UIImage *currentImage = imageView.image;
    NSUInteger index = [images indexOfObject:currentImage];
    index = (index + 1) % [images count];
    imageView.image = images[index];
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end

Demo下载地址:https://github.com/codeliu6572/CATransition

目录
相关文章
|
Web App开发 移动开发 前端开发
过渡|学习笔记
快速学习过渡
html+css实战172-过渡
html+css实战172-过渡
118 0
html+css实战172-过渡
|
10天前
|
图形学
unity摄像机的平滑过渡,平滑缓冲
在Unity中,通过插值计算实现摄像机的平滑过渡与缓冲效果,避免突兀跳跃,提升玩家视觉体验。主要方法包括位置和旋转的平滑过渡,常用线性插值(Lerp)和SmoothDamp函数。代码示例展示了如何使用SmoothDamp实现摄像机从一个点到另一个点的平滑移动。将脚本挂载到场景中测试即可看到效果。
|
Web App开发 JavaScript 前端开发
Transit – 超平滑的 CSS 过渡和变换动画效果插件
  Transit 是一款 jQuery 插件,用于实现超平滑的 CSS3 过渡和变换动画效果。借助这款插件,你可以轻松实现 translate、rotate、scale 和 skew 等众多效果。支持的浏览器:IE 10+、Firefox 4+、Safari 5+、Chrome 10+、Opera 11+ 以及 Mobile Safari。
1175 0
|
前端开发 JavaScript API
transition过渡&动画
《Vue实战》笔记
105 0
|
5天前
|
机器学习/深度学习 前端开发
淡入淡出效果的过渡时间和速度如何调整?
淡入淡出效果的过渡时间和速度如何调整?
40 18
|
Android开发 UED
如何延迟Fragment的导航过渡
做应用提高用户体验是很关键的,对于用户体验来说有一件事是不能回避的,就是页面切换的过渡动画。因为后一个页面可能会加载数据,所以切换时后一个页面是空白的导致用户体验比较差。那么如果下一个页面数据加载可能很快,为了提供流畅的顶级导航过渡,可不可以等待第二个屏幕加载数据,然后再启动动画? Android中的Fragment就提供了这种功能,通过它可以推迟fragment的载入,这样在界面通过动画过渡到第二个屏幕之前,第二个屏幕上的界面元素(通常是从网络获取的图片)已做好显示准备。这便是:postponeEnterTransition()和startPostponedEnterTransition()
156 0
|
前端开发
CSS(七)元素过渡、变化、动画
CSS(七)元素过渡、变化、动画
184 0
CSS(七)元素过渡、变化、动画

热门文章

最新文章