iOS 动画讲解（一）之UIView动画

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">IOS UIView 动画：</span>

一、使用UIView类实现动画

基本写法，代码必须放在Begin和Commit之间：

  [UIView beginAnimations:nil context:nil];// 开始动画  

 //添加一些需要设置的属性和代理

 [UIView commitAnimations]; // 提交动画 

例如：

<span style="font-size:18px;">[UIView beginAnimations:nil context:nil]; //开始动画 [UIView setAnimationDuration:3]; //设置动画持续时间 //_lbShow向下移动300px
CGPoint point=_lbShow.center; 
point.y+=300; 
_lbShow.center=point; 
[UIView commitAnimations]; //提交动画</span>

  需要设置的属性： 

 1、[UIViewsetAnimationDuration:3];//动画时长 

 2、 [UIViewsetAnimationCurve:UIViewAnimationCurveEaseInOut];// 动画曲线 

(   UIViewAnimationCurveEaseInOut,        // 慢进慢出

    UIViewAnimationCurveEaseIn,           // 慢进

    UIViewAnimationCurveEaseOut,          // 慢出

    UIViewAnimationCurveLinear          //匀速  )

3、[UIViewsetAnimationRepeatCount:2];//动画重复次数 

4、[UIView setAnimationDelay:2];//延迟 

5、+ (void)setAnimationStartDate:(NSDate *)startDate; //设置动画开始时间，单位秒

6、+ (void)setAnimationDelegate:(nullableid)delegate; //设置动画代理

7、+ (void)setAnimationWillStartSelector:(nullableSEL)selector; // 动画将要开始时，要执行的方法，如果设置了此项，那么必须要设置动画代理

8、+ (void)setAnimationDidStopSelector:(nullableSEL)selector; // 动画结束时，要执行的方法，如果设置了此项，那么必须要设置动画代理

9、+ (void)setAnimationRepeatCount:(float)repeatCount;  //设置动画重复次数

10、 + ( void )setAnimationRepeatAutoreverses:( BOOL )repeatAutoreverses; //是否开启逆向效果  默认是NO  

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

.........

（1）

<span style="font-size:18px;">[UIView beginAnimations:nil context:nil]; //开始动画
[UIView setAnimationDuration:3]; //设置动画持续时间
[UIView setAnimationCurve:UIViewAnimationCurveLinear];//设置动画相对速度为
匀速
//_lbShow向下移动300px
CGPoint point=_lbShow.center; 
point.y+=300; 
_lbShow.center=point; 
[UIView commitAnimations]; //提交动画</span>

（2）

[UIView beginAnimations:nil context:nil]; //开始动画
[UIView setAnimationDuration:3]; //设置动画持续时间
[UIView setAnimationCurve:UIViewAnimationCurveLinear];//设置动画相对速度为
匀速
//_lbShow向下移动300px
CGPoint point=_lbShow.center; 
point.y+=300;  _lbShow.center=point; 
//透明度渐变成0,逐渐消失动画 _lbShow.alpha=0.0f; 
[UIView commitAnimations]; //提交动画

（3）

//设置动画延迟执 
[UIView setAnimationDelay:2]; 
//设置动画执 次数
[UIView setAnimationRepeatCount:2];  //如果为YES,逆向动画效果,结束后 动执 逆向动画效果,默认为NO
[UIView setAnimationRepeatAutoreverses:YES]; 
//设置动画代理
[UIView setAnimationDelegate:self];  //动画已结束时执  法xx(前提是必须设置动画代理)
[UIView setAnimationDidStopSelector:@selector(finishAnimation)];

其他设置请参见 UIView(UIViewAnimation)【UIView的类目UIViewAnimation】

设置完了上述属性后，必须要提交动画：

[UIView commitAnimations];  //△

简单例子： 

  [UIView beginAnimations:nil context:nil]; // 开始动画 
  [UIView setAnimationDuration:3.0]; // 动画时长 
  CGPoint point = _imageView.center; 
  point.y += 150;   // 视图向下移动 
  [self.bgView setCenter:point]; 
  [UIView commitAnimations]; // 提交动画 

同时运行多个动画效果：

（4）

  [UIView beginAnimations:nil context:nil]; 
  [UIView setAnimationDuration:3.0]; 
 [self.bgView setAlpha:0.0];  // 透明度渐变
 [UIView commitAnimations]; 
  
    [UIView beginAnimations:nil context:nil]; 
  [UIView setAnimationDuration:3.0]; 
  CGPoint point = self.bgView.center; 
  point.y += 150; 
  [self.bgView setCenter:point]; 
 [UIView commitAnimations]; 

以上代码实现的动画效果为（同时执行）：1、图像向下平移150像像       2、设置图像透明度为0。

指定上下文：

 

  CGContextRef context = UIGraphicsGetCurrentContext(); //获取当前视图的上下文  

  [UIView beginAnimations:nil context:context]; 

  [UIView setAnimationDuration:2.0]; 

  [_imageView setAlpha:0]; 

  [UIView commitAnimations];     

其他设置如下：

  /** 

   *  设置动画过渡效果 

   *  @param transition 动画的过渡效果 

   *  @param view 过渡效果作用视图 

    *  @param cache 如果为YES，开始和结束视图分别渲染一次并在动画中创建帧；否则，视图将会渲染每一帧。例如，你不需要在视图转变中不停的更新，你只需要等到转换完成再去更新视图。 

   */ 

  + (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache; 

解释：

其中transition 来指定动画的过渡效果

view 来指定过渡的视图

cache 来指定是否 上缓存视图内容。(例如,如果不需要在视图转变中不停的更新,只需要等到转换完成再去更新试图,那这个时候YES;反之,如果需要在视图转变中 刻更新,这时则需要在转换过程中去更新视图,那这个时候就NO) 

其中参数transition 来指定动画的过渡效果,过渡动画类型有如下 种 ：

过渡动画	功能
UIViewAnimationTransitionNone	过渡动画
UIViewAnimationTransitionFlipFromLeft	从左向右旋转
UIViewAnimationTransitionFlipFromRight	从右向左旋转
UIViewAnimationTransitionCurlUp	卷曲翻,从上往下
UIViewAnimationTransitionCurlDown	卷曲翻,从下往上

二、使用UIView的动画块代码：

方法一：

  [UIView animateWithDuration:4.0// 动画时长 

                   animations:^{ 

                       // code 

                 }];

方法二：

    [UIView animateWithDuration:4.0 

          animations:^{  

//动画效果

          }  completion:^(BOOL  finished) {           

    // 动画完成后执行 的代码

      }];

方法三：

    [UIView animateWithDuration:4.0 delay:2.0                 

    options:UIViewAnimationOptionCurveEaseIn 

    // 动画过渡效果   

    animations:^{             

    // code...          

    }   completion:^(BOOL finished) { 

    // 动画完成后执行 

   }];

（5）

[UIView animateWithDuration:3 //动画时  animations:^{ 
[_lbShow setFrame:CGRectMake(122, 386, 77, 27)];  }]; 
 
[UIView animateWithDuration:3 //动画时  
];   
animations:^{ 
[_lbShow setFrame:CGRectMake(122, 386, 77, 27)]; 
} 
completion:^(BOOL finished){ 
NSLog(@"动画完成");  } 
[UIView animateWithDuration:3 //动画时   delay:0.0 //动画延迟时 
options:UIViewAnimationOptionCurveEaseOut //动画过渡效果 animations:^{ 
];
[_lbShow setFrame:CGRectMake(122, 386, 77, 27)];  } 
completion:^(BOOL finished){  NSLog(@"动画完成"); 

方法四，Spring Animationring Animation）：

在IOS7开始，系统动画效果广泛应用Spring Animation：

    [UIView animateWithDuration:4.0 

    // 动画时长             

    delay:0.0 

    // 动画延迟 

    usingSpringWithDamping:1.0 

    // 类似弹簧振动效果 0~1    

    initialSpringVelocity:5.0 

    // 初始速度                  

    options:UIViewAnimationOptionCurveEaseInOut 

    // 动画过渡效果             

    animations:^{                 

    // code...                               

    } completion:^( BOOL finished) { 

    // 动画完成后执行 

   }];

参数介绍：

Duration：动画时长

animations：动画代码

completion：动画完成后执行的代码

delay：动画延迟

usingSpringWithDamping：它的范围为 0.0f 到 1.0f ，数值越小「弹簧」的振动效果越明显。

initialSpringVelocity：初始的速度，数值越大一开始移动越快。值得注意的是，初始速度取值较高而时间较短时，也会出现反弹情况。

（6）

[UIView animateWithDuration:4.0 //动画时  delay:0.0 //动画延迟
usingSpringWithDamping:0.8 //类似弹簧振动效果 0-1 initialSpringVelocity:8.0 //初始速度 
options:UIViewAnimationOptionCurveEaseInOut  animations:^{ 
//_lbShow向下移动300px CGPoint point=_lbShow.center; 
point.y+=300; 
_lbShow.center=point;  } 
completion:^(BOOL finished){  NSLog(@"动画完成"); 
}];

options: 以上方法中的options一项需要传入一个枚举，这个枚举大概控制的是这几个要素：当前动画嵌套中的动画执行随时间的快慢种类（先快后慢等..）。动画要一直重复吗。如果我使用转场动画那么我用哪种转场效果。还有子动画嵌套在父动画中时我们如何对待父动画中的相同选项等等..

UIViewAnimationOptions: 

UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件，表示子控件将和父控件一同动画。

UIViewAnimationOptionAllowUserInteraction //动画时允许用户交流，比如触摸

UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画

UIViewAnimationOptionRepeat //动画无限重复

UIViewAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复

UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间

UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线

UIViewAnimationOptionAllowAnimatedContent //通过改变属性和重绘实现动画效果，如果key没有提交动画将使用快照

UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果

UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项

//时间函数曲线相关

UIViewAnimationOptionCurveEaseInOut //时间曲线函数，由慢到快

UIViewAnimationOptionCurveEaseIn //时间曲线函数，由慢到特别快

UIViewAnimationOptionCurveEaseOut //时间曲线函数，由快到慢

UIViewAnimationOptionCurveLinear //时间曲线函数，匀速

//转场动画相关的

UIViewAnimationOptionTransitionNone //无转场动画

UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转

UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转

UIViewAnimationOptionTransitionCurlUp //上卷转场

UIViewAnimationOptionTransitionCurlDown //下卷转场

UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失

UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转

UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转