iOS学习笔记10-UIView动画

上次学习了iOS学习笔记09-核心动画CoreAnimation,这次继续学习动画,上次使用的CoreAnimation很多人感觉使用起来很繁琐,有没有更加方便的动画效果实现呢?答案是有的,那就是UIView动画封装

一、UIView动画

苹果知道图层动画使用麻烦,就为我们封装到了UIView里,使我们可以简单的实现各种动画效果。

1. 基础动画

主要实现方法为:
+ (void)animateWithDuration:(NSTimeInterval)duration 
                      delay:(NSTimeInterval)delay
                    options:(UIViewAnimationOptions)options 
                 animations:(void (^)(void))ainimations 
                 completion:(void (^)(BOOL finished))completion;
移动动画使用实例:
/* 
  开始动画,UIView的动画方法执行完后动画会停留在终点位置,而不需要进行任何特殊处理
  duration:执行时间
  delay:延迟时间
  options:动画设置,例如自动恢复、匀速运动等
  completion:动画完成回调方法
*/
[UIView animateWithDuration:5.0 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
    _imageView.center = location;
} completion:^(BOOL finished) {
    NSLog(@"Animation end.");
}];

上面的方法基本满足大部分基础动画的要求,还有一种比较有趣的动画效果

弹簧动画效果:
/*
  创建弹性动画
  damping:阻尼,范围0-1,阻尼越接近于0,弹性效果越明显
  springVelocity:弹性复位的速度
*/
[UIView animateWithDuration:5.0 delay:0 usingSpringWithDamping:0.1 
      initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveLinear animations:^{
    _imageView.center = location;
} completion:^(BOOL finished) {
    NSLog(@"Animation end.");
}];
弹簧效果

UIView动画方法中有个options参数,是枚举类型,可以组合使用:

/* 常规动画属性设置,可以同时选择多个,用或运算组合  */
UIViewAnimationOptionLayoutSubviews/*< 动画过程中保证子视图跟随运动 */          
UIViewAnimationOptionAllowUserInteraction/*< 动画过程中允许用户交互 */
UIViewAnimationOptionBeginFromCurrentState/*< 所有视图从当前状态开始运行 */
UIViewAnimationOptionRepeat/*< 重复运行动画 */                 
UIViewAnimationOptionAutoreverse/*< 动画运行结束后回到起始点 */             
UIViewAnimationOptionOverrideInheritedDuration/*< 忽略嵌套动画时间设置 */ 
UIViewAnimationOptionOverrideInheritedCurve/*< 忽略嵌套动画速度设置 */    
UIViewAnimationOptionAllowAnimatedContent/*< 动画过程中重绘视图,只适合转场动画 */    
UIViewAnimationOptionShowHideTransitionViews/*< 视图切换直接隐藏旧视图、显示新视图,只适合转场动画 */   
UIViewAnimationOptionOverrideInheritedOptions/*< 不继承父动画设置或动画类型 */  

/* 动画速度变化控制,其中选一个进行设置 */    
UIViewAnimationOptionCurveEaseInOut/*< 动画先缓慢,后逐渐加速,默认值 */       
UIViewAnimationOptionCurveEaseIn/*< 动画逐渐变慢 */          
UIViewAnimationOptionCurveEaseOut/*< 动画逐渐加速 */             
UIViewAnimationOptionCurveLinear/*< 动画匀速执行 */            

2. 关键帧动画

主要实现方法为:
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration 
                               delay:(NSTimeInterval)delay
                             options:(UIViewAnimationOptions)options 
                          animations:(void (^)(void))ainimations 
                          completion:(void (^)(BOOL finished))completion;
实例:
[UIView animateKeyframesWithDuration:5.0 delay:0 
        options:UIViewAnimationOptionCurveLinear | UIViewAnimationOptionCurveLinear animations:^{ 
    //第一个关键帧:从0秒开始持续50%的时间,也就是5.0*0.5=2.5秒
    [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
        _imageView.center = location1;
    }];
    //第二个关键帧:从50%时间开始持续25%的时间,也就是5.0*0.25=1.25秒
    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{
        _imageView.center = location2;
    }];
    //第三个关键帧:从75%时间开始持续25%的时间,也就是5.0*0.25=1.25秒
    [UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{
        _imageView.center = location3;
    }];
} completion:^(BOOL finished) {
    NSLog(@"Animation end.");
}];
关键帧动画的options多了一些选择:
/* 动画模式选择,选择一个 */
UIViewKeyframeAnimationOptionCalculationModeLinear/*< 连续运算模式 */
UIViewKeyframeAnimationOptionCalculationModeDiscreter/*< 离散运算模式 */
UIViewKeyframeAnimationOptionCalculationModePacedr/*< 均匀执行运算模式 */
UIViewKeyframeAnimationOptionCalculationModeCubicr/*< 平滑运算模式 */
UIViewKeyframeAnimationOptionCalculationModeCubicPacedr/*< 平滑均匀运算模式 */
动画模式示意图

UIView动画现在只支持属性关键帧动画,不支持路径关键帧动画

3. 转场动画

主要实现方法为:
+ (void)transitionWithView:(UIView *)view 
                  duration:(NSTimeInterval)duration 
                   options:(UIViewAnimationOptions)options 
                animations:(void (^)(void))ainimations 
                completion:(void (^)(BOOL finished))completion;
实例:
#pragma mark 转场动画
- (void)transitionAnimation:(BOOL)isNext{
    UIViewAnimationOptions option;
    if (isNext) {
        option = UIViewAnimationOptionCurveLinear | UIViewAnimationOptionTransitionFlipFromRight;
    } else {
        option = UIViewAnimationOptionCurveLinear | UIViewAnimationOptionTransitionFlipFromLeft;
    }
    [UIView transitionWithView:_imageView duration:1.0 options:option animations:^{
        _imageView.image = [self getImage:isNext];
    } completion:nil];
}
转场动画options多了一些选择:
/* 转场类型 */
UIViewAnimationOptionTransitionNone/*< 没有转场动画效果 */
UIViewAnimationOptionTransitionFlipFromLeft/*< 从左侧翻转效果 */
UIViewAnimationOptionTransitionFlipFromRight/*< 从右侧翻转效果 */
UIViewAnimationOptionTransitionCurlUp/*< 向后翻页的动画过渡效果 */  
UIViewAnimationOptionTransitionCurlDown/*< 向前翻页的动画过渡效果 */   
UIViewAnimationOptionTransitionCrossDissolve/*< 溶解消失效果 */ 
UIViewAnimationOptionTransitionFlipFromTop/*< 从上方翻转效果 */
UIViewAnimationOptionTransitionFlipFromBottom/*< 从底部翻转效果 */
  • 使用UIView动画封装的转场动画效果少,这里无法直接使用私有API
  • 两个视图之间转场可以使用
+ (void)transitionFromView:(UIView *)fromView 
                     toView:(UIView *)toView 
                   duration:(NSTimeInterval)duration 
                    options:(UIViewAnimationOptions)options 
                 completion:(void (^)(BOOL finished))completion;
  • 默认情况,转出的视图会从父视图移除,转入后重新添加
转场动画效果图,是不是很炫啊,不过这个是CoreAnimation的
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容

  • 前言的前言 唐巧前辈在微信公众号「iOSDevTips」以及其博客上推送了我的文章后,我的 Github 各项指标...
    VincentHK阅读 5,350评论 3 44
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,471评论 6 30
  • 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你...
    Yiart阅读 3,799评论 3 34
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,104评论 5 13
  • 在iOS实际开发中常用的动画无非是以下四种:UIView动画,核心动画,帧动画,自定义转场动画。 1.UIView...
    请叫我周小帅阅读 3,082评论 1 23