CATransition动画的使用

最新推荐文章于 2017-06-01 09:57:35 发布

番薯大佬

最新推荐文章于 2017-06-01 09:57:35 发布

阅读量943

点赞数

分类专栏： iOS 动画

本文链接：https://blog.youkuaiyun.com/potato512/article/details/52086630

版权

iOS 动画专栏收录该内容

16 篇文章

订阅专栏

本文介绍了CATransition动画，它是通过设置不同的动画效果类型、方向和节奏来实现视图过渡的。包括立方体翻滚、页面翻页、收缩、滴水等效果，以及从不同方向的推移和揭露。同时，还提到了timingFunction参数如何控制动画的速度节奏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CATransition动画主要是通过设置一些动画属性，然后将CATransition实例添加到UIView的layer层上以实现动画效果。

1 type 各种动画效果其中除了'fade', `moveIn', `push' , `reveal' ,其他属于私有的API(我是这么认为的,可以点进去看下注释).可以分别使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'来调用.

@"cube" 立方体翻滚效果

@"moveIn" 新视图移到旧视图上面

@"reveal" 显露效果(将旧视图移开,显示下面的新视图)

@"fade" 交叉淡化过渡(不支持过渡方向)(默认为此效果)

@"pageCurl" 向上翻一页

@"pageUnCurl" 向下翻一页

@"suckEffect" 收缩效果，类似系统最小化窗口时的神奇效果(不支持过渡方向)

@"rippleEffect" 滴水效果,(不支持过渡方向)

@"oglFlip" 上下左右翻转效果

@"rotate" 旋转效果

@"push"

@"cameraIrisHollowOpen" 相机镜头打开效果(不支持过渡方向)

@"cameraIrisHollowClose" 相机镜头关上效果(不支持过渡方向)

kCATransitionFade 交叉淡化过渡

kCATransitionMoveIn 新视图移到旧视图上面

kCATransitionPush 新视图把旧视图推出去

kCATransitionReveal 将旧视图移开,显示下面的新视图

2 subType 各种动画方向

kCATransitionFromRight; 同字面意思(下同)

kCATransitionFromLeft;

kCATransitionFromTop;

kCATransitionFromBottom;

当type为@"rotate"(旋转)的时候,它也有几个对应的subtype,分别为:

90cw 逆时针旋转90°

90ccw 顺时针旋转90°

180cw 逆时针旋转180°

180ccw 顺时针旋转180°

3 timingFunction 用于变化起点和终点之间的插值计算,形象点说它决定了动画运行的节奏,比如是均匀变化(相同时间变化量相同)还是先快后慢,先慢后快还是先慢再快再慢.

动画的开始与结束的快慢,有五个预置分别为(下同):

kCAMediaTimingFunctionLinear 线性,即匀速

kCAMediaTimingFunctionEaseIn 先慢后快

kCAMediaTimingFunctionEaseOut 先快后慢

kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢

kCAMediaTimingFunctionDefault 实际效果是动画中间比较快

/**
 *  CATransition动画效果
 *
 *  @param type           动画效果类型kCATransitionFade,kCATransitionMoveIn,kCATransitionPush,kCATransitionReveal
 *  @param subType        动画效果方向kCATransitionFromRight,kCATransitionFromLeft,kCATransitionFromTop,kCATransitionFromBottom
 *  @param duration       动画时间
 *  @param timingFunction 动画函数名kCAMediaTimingFunctionLinear,kCAMediaTimingFunctionEaseIn,kCAMediaTimingFunctionEaseOut,kCAMediaTimingFunctionEaseInEaseOut,kCAMediaTimingFunctionDefault
 *  @param theView        添加动画效果的UIView
 */
+ (void)showAnimationType:(NSString *)type
              withSubType:(NSString *)subType
                 duration:(CFTimeInterval)duration
           timingFunction:(NSString *)timingFunction
                     view:(UIView *)theView
{
    CATransition *animation = [CATransition animation];
    animation.duration = duration;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:timingFunction];
    animation.fillMode = kCAFillModeForwards;
    animation.type = type;
    animation.subtype = subType;
    
    [theView.layer addAnimation:animation forKey:nil];
}

// 示例
[self showAnimationType:kCATransitionReveal withSubType:kCATransitionFromRight duration:0.6 timingFunction:kCAMediaTimingFunctionEaseInEaseOut view:self.imageView];