天天看点

CATransition动画的使用

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];