iOS-UIView动画-UIView Animation简介

UIView Animation动画是iOS开发中最常用的动画类,下面总结一下UIView Animation动画的基本用法。

UIView Animation动画的常用方法

//方法一
[UIView animateWithDuration:4.0 // 动画时长
                 animations:^{
                     // code

                 }];

//方法二
[UIView animateWithDuration:4.0 // 动画时长
         animations:^{
           // code...
         }
         completion:^(BOOL finished) {
           // 动画完成后执行
           // code...
         }];

//方法三
[UIView animateWithDuration:4.0 // 动画时长
             delay:2.0 // 动画延迟
          options:UIViewAnimationOptionCurveEaseIn // 动画过渡效果
         animations:^{
           // code...
         }
         completion:^(BOOL finished) {
           // 动画完成后执行
           // code...
         }];

//方法四(在IOS7开始,系统动画效果广泛应用Spring Animation :)
[UIView animateWithDuration:4.0 // 动画时长
            delay:0.0 // 动画延迟
   usingSpringWithDamping:1.0 // 弹簧的阻尼 0~1(如果为1动画则平稳减速动画没有振荡)
    initialSpringVelocity:5.0 // 弹簧的速率(数值越小,动力越小,弹簧的拉伸幅度就越小。反之相反。比如:总共的动画运行距离是200 pt,你希望每秒 100pt 时,值为 0.5;)
          options:UIViewAnimationOptionCurveEaseInOut // 动画过渡效果
         animations:^{
           // code...
           CGPoint point = _imageView.center;
           point.y += 150;
           [_imageView setCenter:point];
         } completion:^(BOOL finished) {
           // 动画完成后执行
           // code...
           [_imageView setAlpha:1];
         }];

动画效果相关:

UIViewAnimationOptionLayoutSubviews            //提交动画的时候布局子控件,表示子控件将和父控件一同动画。
UIViewAnimationOptionAllowUserInteraction      //动画时允许用户交流,比如触摸
UIViewAnimationOptionBeginFromCurrentState     //从当前状态开始动画
UIViewAnimationOptionRepeat                    //动画无限重复
UIViewAnimationOptionAutoreverse               //执行动画回路,前提是设置动画无限重复
UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间
UIViewAnimationOptionOverrideInheritedCurve    //忽略外层动画嵌套的时间变化曲线
UIViewAnimationOptionAllowAnimatedContent      //通过改变属性和重绘实现动画效果,如果key没有提交动画将使用快照
UIViewAnimationOptionShowHideTransitionViews   //用显隐的方式替代添加移除图层的动画效果
UIViewAnimationOptionOverrideInheritedOptions  //忽略嵌套继承的选项

时间函数曲线相关:

UIViewAnimationOptionCurveEaseInOut            //时间曲线函数,由慢到快
UIViewAnimationOptionCurveEaseIn               //时间曲线函数,由慢到特别快
UIViewAnimationOptionCurveEaseOut              //时间曲线函数,由快到慢
UIViewAnimationOptionCurveLinear               //时间曲线函数,匀速

转场动画相关的:

UIViewAnimationOptionTransitionNone            //无转场动画
UIViewAnimationOptionTransitionFlipFromLeft    //转场从左翻转
UIViewAnimationOptionTransitionFlipFromRight   //转场从右翻转
UIViewAnimationOptionTransitionCurlUp          //上卷转场
UIViewAnimationOptionTransitionCurlDown        //下卷转场
UIViewAnimationOptionTransitionCrossDissolve   //转场交叉消失
UIViewAnimationOptionTransitionFlipFromTop     //转场从上翻转
UIViewAnimationOptionTransitionFlipFromBottom  //转场从下翻转

UIView Animation过渡动画

view 参与转换的视图
<1>

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[self.view addSubview:view];
view.center = self.view.center;
view.backgroundColor = [UIColor redColor];
UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
view_1.backgroundColor = [UIColor yellowColor];
[UIView transitionWithView:view 
                  duration:3      
                  options:UIViewAnimationOptionTransitionCurlUp 
                  animations:^{
                  [view addSubview:view_1];      
} completion:^(BOOL finished) {        
}];
1499658355350609.gif

<2>

UIView *baseView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[self.view addSubview:baseView];
baseView.center = self.view.center;
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[baseView addSubview:view];
view.backgroundColor = [UIColor redColor];
UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
view_1.backgroundColor = [UIColor yellowColor];
[UIView transitionFromView:view  //开始的视图
                    toView:view_1   //转换后的视图
                    duration:2 
                    options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {    
}];
1499658454392632.gif

UIView Animation关键帧动画

UIView关键帧动画的两个方法

//duration 总持续时间
//UIViewKeyframeAnimationOptions options 枚举 下面说明
//frameStartTime 相对开始时间
//frameDuration 相对持续时间
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration
                              delay:(NSTimeInterval)delay 
                              options:(UIViewKeyframeAnimationOptions)options 
                              animations:(void (^)(void))animations
                               completion:(void (^ __nullable)(BOOL finished))completion;
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime 
                        relativeDuration:(double)frameDuration 
                        animations:(void (^)(void))animations;
//UIViewKeyframeAnimationOptions 枚举说明
    UIViewKeyframeAnimationOptionLayoutSubviews        //提交动画的时候布局子控件,表示子控件将和父控件一同动画。
    UIViewKeyframeAnimationOptionAllowUserInteraction  //动画时允许用户交流,比如触摸    UIViewKeyframeAnimationOptionBeginFromCurrentState     //从当前状态开始动画
    UIViewKeyframeAnimationOptionRepeat                //动画无限重复
    UIViewKeyframeAnimationOptionAutoreverse           //执行动画回路,前提是设置动画无限重复
    UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间
    UIViewKeyframeAnimationOptionOverrideInheritedOptions  //忽略嵌套继承的选项
   //关键帧动画独有
    UIViewKeyframeAnimationOptionCalculationModeLinear     //选择使用一个简单的线性插值计算的时候关键帧之间的值。
    UIViewKeyframeAnimationOptionCalculationModeDiscrete   //选择不插入关键帧之间的值,而是直接跳到每个新的关键帧的值。
    UIViewKeyframeAnimationOptionCalculationModePaced      //选择计算中间帧数值算法使用一个简单的节奏。这个选项的结果在一个均匀的动画。
    UIViewKeyframeAnimationOptionCalculationModeCubic      //选择计算中间帧使用默认卡特莫尔罗花键,通过关键帧的值。你不能调整该算法的参数。 这个动画好像会更圆滑一些..
    UIViewKeyframeAnimationOptionCalculationModeCubicPaced //选择计算中间帧使用立方计划而忽略的时间属性动画。相反,时间参数计算隐式地给动画一个恒定的速度。

相关实例:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 50, 50)];
view.backgroundColor = [UIColor orangeColor];
[self.view addSubview:view];
[UIView animateKeyframesWithDuration:3 delay:3 options:UIViewKeyframeAnimationOptionRepeat animations:^{
    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:.3 animations:^{
            view.frame = CGRectMake(20, 100, 100, 100);
    }];
     [UIView addKeyframeWithRelativeStartTime:.3 relativeDuration:.6 animations:^{
            view.frame = CGRectMake(60, 100, 80, 80);
    }];
    [UIView addKeyframeWithRelativeStartTime:.6 relativeDuration:1 animations:^{
            view.frame = CGRectMake(20, 20, 50, 50);
    }];
} completion:^(BOOL finished) {
}];
1499658623524270.gif

UIView Animation两个移除视图方法

//删除视图上的子视图 animation这个枚举只有一个删除值...
//views数组中的view 会让那个视图变模糊、收缩和褪色, 之后再给它发送 removeFromSuperview 方法。
+ (void)performSystemAnimation:(UISystemAnimation)animation 
                       onViews:(NSArray *)views
                       options:(UIViewAnimationOptions)options 
                       animations:(void (^ __nullable)(void))parallelAnimations completion:(void (^ __nullable)(BOOL finished))completion
//在动画block中不执行动画的代码
+ (void)performWithoutAnimation:(void (NS_NOESCAPE ^)(void))actionsWithoutAnimation

相关实例:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 50, 50)];
    view.backgroundColor = [UIColor orangeColor];
    UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(10, 10, 20, 20)];
    [view addSubview:view_1];
    view_1.backgroundColor = [UIColor redColor];
    [self.view addSubview:view];
    [UIView animateKeyframesWithDuration:3 delay:3 options:UIViewKeyframeAnimationOptionRepeat|UIViewKeyframeAnimationOptionAutoreverse animations:^{
        view.frame = CGRectMake(100, 100, 50, 50);
        [UIView performWithoutAnimation:^{
            view.backgroundColor = [UIColor blueColor];
        }];
    } completion:^(BOOL finished) {
    }];
    [UIView performSystemAnimation:UISystemAnimationDelete 
                           onViews:@[view_1] 
                           options:0 
                           animations:^{
        view_1.alpha = 0;
    } completion:^(BOOL finished) {
    }];
1499658829164730.gif
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342