学习计划(5) - 动画

(不得不吐槽一下，昨天写到23点的文章竟然没有给我保存，最后发布不了，然后我关了还以为它之前写的已经保存了.然而并没有,昨天白写.今天写两章...)

CoreAnimation 虽然翻译过来是核心动画，但其实它不仅仅是动画,动画只是layer层级中的特效操作而已。在图层渲染，图形变动基础上，它提供了很多自由且方便的API和类供我们使用。
关于这方面的描述，比较推荐的就是

iOS Core Animation: Advanced Techniques

它对于CoreAnimation的描述很详细很底层。如果英文看不懂，还有翻译:
https://zsisme.gitbooks.io/ios-/content/
还有就是

iOS Animations by Tutorials v4.0

不过它没有上面那本底层。但却是非常实用的一本书。提供了很多常用的动画。(关键这本书贵啊.国外网站售价$59,还是电子书)
下面是它的链接,顺便还提供了其他的书籍,有能力请支持正版:

链接: https://pan.baidu.com/s/1bOU4ai 密码: hx49

由于系列比较长,所以我们要慢慢来。今天就从简单的过渡动画做起来，因为系统有非常简单的API供我们使用。
最终效果如下:

动画1.gif

动画2.gif

动画3.gif

我们实现上述效果主要是使用 CATransition 类。

CATransition是什么呢？

https://developer.apple.com/documentation/quartzcore/catransition
An object that provides an animated transition between a layer's states.
一个在层状态之间提供动画转换的对象。

官方解释就很简单直接了.网页中也清楚的写明了使用方法。只是官网写用Swift写的,而我使用Objective-C写咯。所以我们直接开干。
因为动画比较多,我们一个个去了解的很难去识别是什么动画,所以我们需要制定一个枚举:

typedef NS_ENUM(NSInteger,GWTransitionsAnimationType){
    FadeAnimationType = 0,                   //淡入淡出
    PushAnimationType,                       //推挤
    RevealAnimationType,                     //揭开
    MoveInAnimationType,                     //覆盖
    CubeAnimationType,                       //立方体
    SuckEffectAnimationType,                 //吮吸
    OglFlipAnimationType,                    //翻转
    RippleEffectAnimationType,               //波纹
    PageCurlAnimationType,                   //翻页
    PageUnCurlAnimationType,                 //反翻页
    CameraIrisHollowOpenAnimationType,       //开镜头
    CameraIrisHollowCloseAnimationType,      //关镜头
    CurlDownAnimationType,                   //下翻页
    CurlUpAnimationType,                     //上翻页
    FlipFromLeftAnimationType,               //左翻转
    FlipFromRightAnimationType,              //右翻转
};

//创建CATransition对象
    CATransition *animation = [CATransition animation];
    //设置运动时间
    animation.duration = DURATION;
    animation.delegate = self;
    //设置运动type
    animation.type = type;
    if(animation.subtype !=nil){
        animation.subtype = subType;
    }
    //设置运动速度
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [forView.layer addAnimation:animation forKey:@"animation"];

type(动画类型)的定义:
CA_EXTERN NSString * const kCATransitionFade     //淡入
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCATransitionMoveIn   //覆盖
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCATransitionPush     //推入
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCATransitionReveal   //揭开
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);

subtype(动画方向)的定义:
CA_EXTERN NSString * const kCATransitionFromRight 
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCATransitionFromLeft
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCATransitionFromTop
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCATransitionFromBottom
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);

timingFunction(动画速度类型)的定义：
kCAMediaTimingFunctionLinear  //线性动画
kCAMediaTimingFunctionEaseIn  //先快后慢
kCAMediaTimingFunctionEaseOut //先慢后快
kCAMediaTimingFunctionEaseInEaseOut// 先慢后快再慢
kCAMediaTimingFunctionDefault //默认，也属于中间比较快

这段很长，我们不可能拿来直接使用，需要包装一下，那么我就需要暴露出参数。

duration(可选): 运动时间
type:动画类型
subType:动画方向
timingFunction(可选):动画速度
view:动画依赖的对象

- (void)animationWithType:(NSString *)type 
                  subType:(NSString *)subType 
                  forView:(UIView *)forView;

调用:

[self animationWithType:kCATransitionFade subType:subStr forView:self.fView];

除了上述的动画之外，还有上下左右的翻页动画需要使用另外一种方式:


  [UIView animateWithDuration:DURATION animations:^{
        [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
        [UIView setAnimationTransition:transition forView:view cache:YES];
    }];

参数UIViewAnimationCurveEaseInout 是属于UIViewAnimationCurve枚举:

typedef NS_ENUM(NSInteger, UIViewAnimationCurve) {
    UIViewAnimationCurveEaseInOut,         // 开始和结束时慢
    UIViewAnimationCurveEaseIn,            // 开始时慢
    UIViewAnimationCurveEaseOut,           // 结束时慢
    UIViewAnimationCurveLinear, //线性速度。保持匀速
};

参数transition引用的是一个枚举值UIViewAnimationTransition:

typedef NS_ENUM(NSInteger, UIViewAnimationTransition) {
    UIViewAnimationTransitionNone,     //无动画
    UIViewAnimationTransitionFlipFromLeft, //左翻页
    UIViewAnimationTransitionFlipFromRight, //右翻页
    UIViewAnimationTransitionCurlUp, //上翻页
    UIViewAnimationTransitionCurlDown, //下翻页
};

同理，需要包装一下:

- (void)animationWithView:(UIView *)view transitionType:(UIViewAnimationTransition) transition;

调用:

[self animationWithView:self.view transitionType:UIViewAnimationTransitionCurlDown];

CATransition 还有个代理CAAnimationDelegate
里面有两个方法

- (void)animationDidStart:(CAAnimation *)anim{
    NSLog(@"动画已经开始了");
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    NSLog(@"动画已经结束了");
}

DEMO:
https://github.com/yanggenwei/GWAnimation/tree/master

学习计划(5) - 动画 - 过渡动画

CATransition是什么呢？

你可能感兴趣的:(学习计划(5) - 动画 - 过渡动画)