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

目录
相关文章
|
供应链 智能硬件
|
3月前
|
前端开发 JavaScript 开发者
css过渡与动画
css过渡与动画
39 0
|
4月前
|
小程序 程序员 项目管理
浅谈从开发到管理的过渡
从开发到管理的转型感悟,作者分享了从程序员到管理者的心路历程,强调兴趣与享受编程带来的乐趣。管理角色包括沟通协调、项目管理、团队建设等,要求具备规划、人员管理及技术敏锐度。核心观点是管理者应关注团队成长,通过培养下属实现共同进步。
35 0
|
6月前
|
JavaScript 前端开发 UED
Vue的过渡和动画:Vue的过渡系统和动画技术详解
【4月更文挑战第24天】Vue.js 框架内置过渡系统,借助 CSS 过渡和动画增强用户体验。
|
6月前
|
XML 前端开发 JavaScript
CSS中动画、过渡、定位、浮动的作用
CSS中动画、过渡、定位、浮动的作用
|
6月前
|
Web App开发 前端开发 JavaScript
过渡效果的艺术:CSS transition 让网页交互更平滑(下)
过渡效果的艺术:CSS transition 让网页交互更平滑(下)
|
前端开发
css过渡和动画区别?
css过渡和动画区别?
|
JavaScript 开发者
动画-使用过渡名实现动画|学习笔记
快速学习动画-使用过渡名实现动画
动画-使用过渡名实现动画|学习笔记
html+css实战172-过渡
html+css实战172-过渡
110 0
html+css实战172-过渡