iOS 基于CATransition实现翻页、旋转等动画效果 —— HERO博客

原创 2016年06月01日 15:40:40

基于CATransition实现翻页、旋转、淡化、推进、滑入滑出、立方体、吮吸、波纹等动画效果。

首先看一下效果图:


下面贴上代码:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

#import "ViewController.h"

//获得屏幕的宽高
#define mainW [UIScreen mainScreen].bounds.size.width
#define mainH [UIScreen mainScreen].bounds.size.height

@interface ViewController ()

@property (nonatomic, strong) NSArray *typeArray;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor greenColor];
    
    //创建控件
    [self creatControl];
    
    _typeArray = @[kCATransitionFade, kCATransitionPush, kCATransitionMoveIn, kCATransitionReveal, @"cube", @"suckEffect", @"oglFlip", @"rippleEffect", @"pageCurl", @"pageUnCurl", @"cameraIrisHollowOpen", @"cameraIrisHollowClose"];
}

- (void)creatControl
{
    NSArray *titleArray = @[@"淡化效果", @"推进效果", @"滑入效果", @"滑出效果", @"立方体效果", @"吮吸效果", @"翻转效果", @"波纹效果", @"翻页效果", @"反翻页效果", @"开镜头效果", @"关镜头效果"];
    
    for (int i = 0; i < titleArray.count; i++) {
        CGFloat X = i % 2 == 0 ? mainW * 0.1 : mainW * 0.6;
        CGFloat Y = 64 + i / 2 * mainW * 0.15;
        UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(X, Y, mainW * 0.3, mainW * 0.1)];
        btn.tag = i;
        [btn setBackgroundColor:[UIColor colorWithRed:0.6f green:0.7f blue:0.6f alpha:0.7f]];
        [btn setTitle:titleArray[i] forState:UIControlStateNormal];
        [btn addTarget:self action:@selector(btnOnClick:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:btn];
    }
}

- (void)btnOnClick:(UIButton *)btn
{
    static int i = 0;
    
    i = i == 0 ? 1 : 0;
    self.view.backgroundColor = i == 0 ? [UIColor greenColor] : [UIColor yellowColor];
    
    //创建CATransition对象
    CATransition *animation = [CATransition animation];
    
    //设置时间
    animation.duration = 1.0f;
    
    //设置类型
    animation.type = _typeArray[btn.tag];
    
    //设置方向
    animation.subtype = kCATransitionFromRight;
    
    //设置运动速度变化
    animation.timingFunction = UIViewAnimationOptionCurveEaseInOut;
    
    [self.view.layer addAnimation:animation forKey:@"animation"];
}

@end

CATransition.type动画类型:

kCATransitionFade                     //淡化效果

kCATransitionPush                        //推进效果

kCATransitionMoveIn                  //滑入效果

kCATransitionReveal                   //滑出效果

@"cube"                                      //立方体效果

@"suckEffect"                              //吮吸效果

@"oglFlip"                                    //翻转效果

@"rippleEffect"                             //波纹效果

@"pageCurl"                                //翻页效果

@"pageUnCurl"                           //反翻页效果

@"cameraIrisHollowOpen"          //开镜头效果

@"cameraIrisHollowClose"          //关镜头效果



版权声明:转载请注明出处。

iOS UIPageViewController模仿真实翻页效果

最近研究了一下UIPageViewController,这是系统提供的一个模仿真实翻页效果的控件,在分享出来希望对大家有帮助,如果有不对的地方或者更好的方法希望大家多多指教,下面让我们简单的了解一下U...
  • u012661893
  • u012661893
  • 2016年04月20日 21:17
  • 3110

ios 电子书翻页效果

  • 2016年03月28日 10:27
  • 34KB
  • 下载

【iOS开发】---- 转场动画 CATransition

Inherits from CAAnimation : NSObject Conforms to NSCoding (CAAnimation) NSCopying (CAAnimati...
  • sjx19871225
  • sjx19871225
  • 2013年05月16日 14:09
  • 9438

视图控制器转场动画——CATransition

github:https://github.com/potato512/SYAnimation 使用CATransition进行视图控制器的转场动画自定义。 效果图: 代码示...
  • potato512
  • potato512
  • 2017年06月07日 17:00
  • 194

CATransition

需要在frameworks中添加QuartzCore.framework 在接口程序中加上头文件   #import /*好多动画效果*/     CATransition *transi...
  • wanglang3081
  • wanglang3081
  • 2013年01月12日 14:00
  • 489

使用CATransition动画来进行图像翻转效果,实用性很强

使用CATransition进行界面的各种动画的翻转,使用方便,效果很好
  • wen22278
  • wen22278
  • 2016年08月04日 13:41
  • 531

iOS中CATransition 用法(各种风格的跳转页面特效)

CATransition的type属性          1.#define定义的常量         kCATransitionFade   交叉淡化过渡         kCATransi...
  • sevenquan
  • sevenquan
  • 2015年12月25日 11:19
  • 1175

CATransition动画精讲

前言曾经,笔者对动画一无所知,当他人问起时,总是似懂非懂。每一次别人说起动画效果时,笔者都不好意思插话,因此懂得太少,只是会使用UIView的那几个添加动画的方法。现在,不再等待,一步一步地学习其基础...
  • woaifen3344
  • woaifen3344
  • 2015年12月16日 22:42
  • 676

CATransition

- (void)onClickstartButton:(UIButton *)button {     CATransition *animation = [CATransition anima...
  • humingtao2013
  • humingtao2013
  • 2014年04月10日 21:24
  • 1472

ios开发视图切换效果动画类CATransition

在网上找了一个Demo。觉得不错,这里拿来和大家分享一下。 http://code4app.com/ios/常用16种视图切换动画/500903b76803fa2f43000000 下边是视图...
  • fengmm521
  • fengmm521
  • 2017年11月03日 18:49
  • 84
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS 基于CATransition实现翻页、旋转等动画效果 —— HERO博客
举报原因:
原因补充:

(最多只允许输入30个字)