转载

CoreAnimation-08-CATransition

概述

  • 简介

    • CATransition又称转场动画,是CAAnimation的子类,可以直接使用
    • 转场动画主要用于为图层提供移入/移出屏幕的动画效果
    • 转场动画常见的应用是UINavigationController
  • 注意事项

    • 转场动画的默认过渡方式为淡出方式(kCATransitionFade)
    • 可以使用常量形式或字符串形式给转场动画的type属性赋值,如

      • kCATransitionPush,常量形式
      • @"push",字符串形式
    • 官方文档中只提供了四种转场动画过渡方式的常量,如图

      CoreAnimation-08-CATransition
    • 动画的终点值必须大于等于起点值,否则没有动画效果

转场动画常用的属性

  • type(NSString *),动画的过渡方式
  • subtype(NSString *),动画的过渡方向
  • startProgress(float),动画起点,取值范围为0~1,表示在整个动画中的比例
  • endProgress(float)动画终点,取值范围为0~1,表示在整个动画中的比例

转场动画的过渡方式

  • fade

    • 交叉淡化过渡
    • 不支持过渡方向
    • 对应的常量为kCATransitionFade
  • push

    • 新视图把旧视图推出去
    • 对应的常量为kCATransitionPush
  • moveIn

    • 新视图移到旧视图上面
    • 对应的常量为kCATransitionMoveIn
  • reveal

    • 将旧视图移开显示下边的新视图
    • 对应的常量为kCATransitionReveal
  • cube

    • 立方体反转效果
  • oglFlip

    • 上下左右反转效果
  • suckEffect

    • 收缩效果,如一块布被抽走
    • 不支持过渡方向
  • rippleEffect

    • 滴水效果
    • 不支持过渡方向
  • pageCurl

    • 向上翻页效果
  • pageUnCurl

    • 向下翻页效果
  • cameraIrisHollowOpen

    • 相机镜头打开效果
    • 不支持过渡方向
  • cameraIrisHollowClose

    • 相机镜头关闭效果
    • 不支持过渡方向

转场动画的过渡方向

  • kCATransitionFromRight,右
  • kCATransitionFromLeft,左
  • kCATransitionFromTop,上
  • kCATransitionFromBottom,下

示例

  • 效果图

    CoreAnimation-08-CATransition

  • 实现步骤

    • 通过storyboard创建UIImageView控件,并拥有它
    @property (weak, nonatomic) IBOutlet UIImageView *imageView;
    • 更改imageView的image属性
    //点击屏幕时,更换图片 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {  //控制图片循环展示  static NSInteger i = 2;  if (i == 4)  {   i = 1;  }  //更换图片  NSString *imageName = [NSString stringWithFormat:@"%zd", i];  self.imageView.image = [UIImage imageNamed:imageName];  i++;  //添加动画  [self setupTransition]; } 
    • 实现转场动画代码
    - (void)setupTransition {  CATransition *animation = [CATransition animation];   //设置动画的过渡方式  animation.type = @"oglFlip";  //设置动画的过渡方向  animation.subtype = kCATransitionFromRight;  //设置动画时长  animation.duration = 0.5;   //将动画添加到图层上  [self.imageView.layer addAnimation:animation forKey:nil]; }
正文到此结束
Loading...