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

基于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"  //关镜头效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS实现翻页效果动画实例代码

    大体思路: 在self.view 上放置一个label,label.text从数组中获得,当点击上下页按钮的时候,改变label.text,并且执行翻页效果动画. 效果如图: 主要代码: #pragma mark - 下一页按钮响应事件 - (void)nextPage:(UIButton *)btn { _forwardBtn.enabled = YES; if (_count<_arr.count-1) { btn.enabled = YES; _label.text = [_arr obj

  • IOS手势操作(拖动、捏合、旋转、点按、长按、轻扫、自定义)

    下面通过图文并茂的方式给大家分享下IOS手势操作(拖动.捏合.旋转.点按.长按.轻扫.自定义)的相关内容. 1.UIGestureRecognizer 介绍 手势识别在 iOS 中非常重要,他极大地提高了移动设备的使用便捷性. iOS 系统在 3.2 以后,他提供了一些常用的手势(UIGestureRecognizer 的子类),开发者可以直接使用他们进行手势操作. UIPanGestureRecognizer(拖动) UIPinchGestureRecognizer(捏合) UIRotatio

  • iOS开发中使用屏幕旋转功能的相关方法

    加速计是整个IOS屏幕旋转的基础,依赖加速计,设备才可以判断出当前的设备方向,IOS系统共定义了以下七种设备方向:   复制代码 代码如下: typedef NS_ENUM(NSInteger, UIDeviceOrientation) { UIDeviceOrientationUnknown, UIDeviceOrientationPortrait,            // Device oriented vertically, home button on the bottom UIDe

  • iOS拍照后图片自动旋转90度的完美解决方法

    今天开发一个拍照获取照片的功能的时候, 发现上传之后图片会自动旋转90. 测试发现, 只要是图片大于2M, 系统就会自动翻转照片 相机拍照后直接取出来的UIimage(用UIImagePickerControllerOriginalImage取出),它本身的imageOrientation属性是3,即UIImageOrientationRight.如果这个图片直接使用则没事,但是如果对它进行裁剪.缩放等操作后,它的这个imageOrientation属性会变成0.此时这张图片用在别的地方就会发生

  • iOS图片界面翻页切换效果

    先看效果: 下面贴代码: #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIImageView *backgroundView; @property (strong,nonatomic) NSArray *array; @end @implementation ViewController -(NSArray *)array { if (_arra

  • ios电子书翻页效果代码详解

    近实现了一个完整的电子书阅读器,支持txt和epub格式的电子书阅读,其中epub支持图文混排的方式展示.本文主要谈谈其中两种翻页效果的实现,分别为仿真翻页和水平滑动翻页. 仿真翻页 最合适的方案就是使用系统提供的UIPageviewcontroller了,不过默认的UIpageviewcontroller翻页时背面是白色的,而阅读器通常都会有背景色或背景图片,翻页时用户体验就很糟糕,比如就像下面这样 所以接下来主要说说如何修改背面颜色以达到美观的翻页效果. UIpageviewcontroll

  • iOS渐变圆环旋转动画CAShapeLayer CAGradientLayer

    iOS渐变圆环旋转动画CAShapeLayer CAGradientLayer shape.gif demo.png - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. CALayer *layer = [CALayer layer]; layer.backgroundColor = [UIColor redColor

  • iOS开发中控制屏幕旋转的编写方法小结

    在iOS5.1 和 之前的版本中, 我们通常利用 shouldAutorotateToInterfaceOrientation: 来单独控制某个UIViewController的旋屏方向支持,比如: 复制代码 代码如下: - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation  {      return (interfaceOrientation == UIInter

  • 实例讲解iOS中的UIPageViewController翻页视图控制器

    一.引言 UIPageViewController是iOS中少见的动画视图控制器之一,通过它既可以创建类似UIScrollView与UIPageControl结合的滚屏视图,也可以创建类似图书效果的炫酷翻页视图. UIPageViewController在iOS 5 SDK中首次引入,它使得开发者可以使用这个ViewController创建分页视图.在iOS 6中,这个类有了更新,支持滚动过渡效果.使用Page View,用户可以方便的通过手势在多个页面之间导航.UIPageViewContro

  • iOS实现日历翻页动画

    本文我主要描述两方面: 1.日历(简单描述原理) 2.翻页动画(重点) 最终的效果如下图:     图中沿四个对角的翻页动画,代表对应方向手势的滑动 1. 日历 要实现一个日历,其实原理很简单,我们只要知道三个数据: 1.今天是哪一天 2.这个月的第一天是星期几(哪天) 3.这个月总共有多少天 根据这个三个数据,就可以把得到的日期显示在日历上了,至于日历用什么来显示,我个人比较喜欢用UICollectionView,一个cell代表一天,当然也可以用很多个label,button来显示. 1.获

随机推荐