学习计划(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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,539评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,594评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,871评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,963评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,984评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,763评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,468评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,850评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,002评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,144评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,823评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,483评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,026评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,150评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,415评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,092评论 2 355

推荐阅读更多精彩内容