iOS-动画

前言

在我们开发App中,会经常使用到动画去实现一些提示或者更友好的表达一些需要表达的事情,使用动画可以让我们的APP更酷更炫,最重要的是优化用户体验,但取决于动画的质量。本文会介绍一下UIView动画实现。


一.UIView类实现代码

  • 基本用法
    使用beginAnimations 和 commitAnimations
      [UIView beginAnimations:nil context:nil]; // 开始动画
      // Code...  do something
      [UIView commitAnimations]; // 提交动画
    
    简单的例子
   UIView *animationView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
   animationView.backgroundColor = [UIColor redColor];
   [self.view addSubview:animationView];
   
   [UIView beginAnimations:nil context:nil];
   [UIView setAnimationDuration:1]; // 动画执行的时间
   [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];//动画曲线

   //UIView 向下移动100
   CGPoint center = animationView.center;
   center.y += 100;
   animationView.center = center;
   
   //变换颜色
   animationView.backgroundColor = [UIColor yellowColor];
   
   [UIView commitAnimations];

效果如下


2017-02-21 23_28_42.gif

其他的一些方法

 // 开始动画
+ (void)beginAnimations:(NSString *)animationID context:(void *)context;

// 提交动画
+ (void)commitAnimations; 

// 设置动画曲线,默认是匀速进行:
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;

// 设置动画时长:
+ (void)setAnimationDuration:(NSTimeInterval)duration;

// 默认为YES。为NO时跳过动画效果,直接跳到执行后的状态。
+ (void)setAnimationsEnabled:(BOOL)enabled;

// 设置动画延迟执行(delay:秒为单位):
+ (void)setAnimationDelay:(NSTimeInterval)delay;

// 动画的重复播放次数
+ (void)setAnimationRepeatCount:(float)repeatCount;

// 如果为YES,逆向(相反)动画效果,结束后返回动画逆向前的状态; 默认为NO:
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;

// 设置动画代理:
+ (void)setAnimationDelegate:(id)delegate;

// 动画将要开始时执行方法××(必须要先设置动画代理):
+ (void)setAnimationWillStartSelector:(SEL)selector;

// 动画已结束时执行方法××(必须要先设置动画代理):
+ (void)setAnimationDidStopSelector:(SEL)selector;

/**
*  设置动画过渡效果
*
*  @param transition 动画的过渡效果
*  @param view 过渡效果作用视图
*  @param cache 如果为YES,开始和结束视图分别渲染一次并在动画中创建帧;否则,视图将会渲染每一帧。例如,你不需要在视图转变中不停的更新,你只需要等到转换完成再去更新视图。
*/
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;

// 删除所有动画层
// 注意:层指的是layout,例:[aimationView.layer removeAllAnimations];
- (void)removeAllAnimations;

二.使用UIView的动画代码块

最基本的使用

  [UIView animateWithDuration:1.0//动画的执行时长 浮点型,可以0.几秒
                               animations:^{
    //do something      
  }];

还有几个方法,在基础上增加了一些参数的设置

  //1.增加了完成后的Block 
 [UIView animateWithDuration:1.0 // 动画时长
                 animations:^{
                    //do something   
                 }
                 completion:^(BOOL finished) {
                     // 动画完成后执行
                    //do something   
                 }];

//2.增加了延迟执行 和 执行曲线
[UIView animateWithDuration:1.0 // 动画执行时长
                      delay:2.0 // 动画延迟执行时长
                    options:UIViewAnimationOptionCurveEaseInOut // 动画执行曲线
                 animations:^{
        //do something
    } completion:^(BOOL finished) {
        // 动画完成后执行
        //do something
    }];

三.开启装逼模式了:弹簧

什么是弹簧呢? 我们来看看效果:

2017-02-21 23_53_27.gif

这个是刚才那代码只是位置上为了凸显更明显,我修改成变成的形状这样的话,跟弹簧一样更加形象。

  [UIView animateWithDuration:3.0 // 动画时长
                          delay:0.0 // 动画延迟
         usingSpringWithDamping:0.5 // 类似弹簧振动效果 0~1
          initialSpringVelocity:2.0 // 初始速度
                        options:UIViewAnimationOptionCurveEaseInOut // 动画过渡效果
                     animations:^{
                         CGRect frame = animationView.frame;
                         frame.size.height += 200;
                         animationView.frame = frame;
                         //变换颜色
                         animationView.backgroundColor = [UIColor yellowColor];
                     } completion:^(BOOL finished) {
                         
                     }];

备注:
usingSpringWithDamping 范围为 0.0f 到 1.0f ,数值越小「弹簧」的振动效果越明显(不要设置 0 不然效果会特别炫,自己可以试试)
nitialSpringVelocity:初始的速度,数值越大一开始移动越快。

这个弹簧效果是iOS7 之后才增加的,不过对于现在的机型适配来说,这个已经可以直接使用了,目前iOS7 的用户也已经很少了。

四.来个高级点的 关键帧动画

[UIView animateKeyframesWithDuration:1.5
                                   delay:0.0
                                 options:UIViewKeyframeAnimationOptionCalculationModeLinear
                              animations:^{
                                  [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.25 animations:^{
                                      CGPoint center = animationView.center;
                                      center.x += 200.0;
                                      animationView.center = center;
                                  }];
                                  [UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.25 animations:^{
                                      CGPoint center = animationView.center;
                                      center.y += 200.0;
                                      animationView.center = center;
                                  }];
                                  [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{
                                      CGPoint center = animationView.center;
                                      center.x -= 200.0;
                                      animationView.center = center;
                                  }];
                                  [UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{
                                      CGPoint center = animationView.center;
                                      center.y -= 200.0;
                                      animationView.center = center;
                                  }];
                                  
    } completion:^(BOOL finished) {
        
    }];

这里面使用了两个方法 我们来看看这两个方法是使用的

  [UIView animateKeyframesWithDuration:1.5 //动画时长
                                   delay:0.0// 延迟执行时长
                                 options:UIViewKeyframeAnimationOptionCalculationModeLinear //执行曲线
                              animations:^{
          //用于添加关键帧
          //以前的简单的动画是不考虑动画执行的过程,只需要考虑开始点和结束点则可以,但是复杂点的动画,需要改变动画执行的轨迹,设置关键帧则可以在需要改变的轨迹点。
    } completion:^(BOOL finished) {
        
 }];


//添加关键帧
[UIView addKeyframeWithRelativeStartTime:0
                       relativeDuration:0.25
                              animations:^{
                                      CGPoint center = animationView.center;
                                      center.x += 200.0;
                                      animationView.center = center;
                                  }];

//StartTime:表示当前的关键帧动画开始时间 设置范围 0~1 表示在整个动画时长中开始的时间点 百分比 例如设置0.5 这在动画(时长5秒)中的2.5秒开始执行这个关键帧动画
//relativeDuration:表示当前的关键帧动画执行时长 设置范围 0~1 表示在整个动画时长中占动画时长 百分比 例如设置0.5 这在动画(时长5秒)中的执行这个关键帧动画时长为2.5秒

这边都是一些简单的说明,如果有任何问题可以直接留言

下一章,则会记录下 如何在使用了Autolayout的控件中执行动画。

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

推荐阅读更多精彩内容