码迷，mamicode.com
首页 > 其他好文 > 详细

UIView的Animaltion

时间：2015-04-09 15:36:02      阅读：219      评论：0      收藏：0      [点我收藏+]

标签：uiview   animaltion   

所谓动画效果，就是会动的画，到iOS App中来说的话，就是各种UIView的移动。 想想看，如果我们自己来实现所有UIView的动画效果，需要考虑些什么东西呢？ 


* 该UIView现在在哪儿？ 

* 该UIView最后会动到哪儿？ 

* 该UIView以什么样的方式移动到那儿？ 

* 该动画持续多长时间？ 

* 每次移动的最小时间间隔？ 

* 每次最小时间间隔的移动的应该移动到哪儿？ 

* …. 


想想这是一个多么杀脑细胞的过程，尤其是每一次的动画过程都要重复这一折磨的过程。 


还好，现实比想象的美好， 苹果公司为开发者思考了上面的问题，通过使用UIKit提供的动画支持，开发者只需要简单的几行代码就能实现各种各样的动画效果。在UIKit中，所有的动画效果支持的方法都在UIView类中。 


首先，在UIView中有很多属性用以描述一个UIView的状态，而动画就是让UIView从一个状态平滑的过渡到另外一个状态的过程。这些属性有： 

属性名
作用
frame
控制UIView的大小和该UIView在superview中的相对位置。
bounds
控制UIView的大小
center
控制UIView的位置
transform
控制UIView的缩放，旋转角度等固定好中心位置之后的变化
alpha
控制UIView的透明度
backgroundColor
控制UIView的背景色
contentStretch
控制UIView的拉伸方式

通过设置这些属性，基本上就解决了动画中的移动到哪儿的问题。 


接着，苹果公司在UIView中加入很多方法来方便家控制动画的移动时间，以及移动的方式。iOS3.0及之前，UIView支持的Animation方法有如下这么多： 

Object-c代码
  1. @interface UIView(UIViewAnimation)

  3. + (void)beginAnimations:(NSString *)animationID context:(void *)context; // additional context info passed to will start/did stop selectors. begin/commit can be nested
  4. + (void)commitAnimations; // starts up any animations when the top level animation is commited

  6. // no getters. if called outside animation block, these setters have no effect.
  7. + (void)setAnimationDelegate:(id)delegate; // default = nil
  8. + (void)setAnimationWillStartSelector:(SEL)selector; // default = NULL. -animationWillStart:(NSString *)animationID context:(void *)context
  9. + (void)setAnimationDidStopSelector:(SEL)selector; // default = NULL. -animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context
  10. + (void)setAnimationDuration:(NSTimeInterval)duration; // default = 0.2
  11. + (void)setAnimationDelay:(NSTimeInterval)delay; // default = 0.0
  12. + (void)setAnimationStartDate:(NSDate *)startDate; // default = now ([NSDate date])
  13. + (void)setAnimationCurve:(UIViewAnimationCurve)curve; // default = UIViewAnimationCurveEaseInOut
  14. + (void)setAnimationRepeatCount:(float)repeatCount; // default = 0.0. May be fractional
  15. + (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses; // default = NO. used if repeat count is non-zero
  16. + (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState; // default = NO. If YES, the current view position is always used for new animations -- allowing animations to "pile up" on each other. Otherwise, the last end state is used for the animation (the default).

  18. + (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache; // current limitation - only one per begin/commit block

  20. + (void)setAnimationsEnabled:(BOOL)enabled; // ignore any attribute changes while set.
  21. + (BOOL)areAnimationsEnabled;

  23. @end
复制代码
这些方法非常的不直观，开发者还是需要花很多时间去思考怎么组合这些方法。但是自从iOS4.0提供块语法支持之后，苹果公司把动画效果的实现封装了一下，效果立杆见影，直观了许多，因此大家完全可以不用去看上面的那些方法，重点关注如下的方法：
Object-c代码
  1. @interface UIView(UIViewAnimationWithBlocks)

  3. + (void)animateWithDuration:(NSTimeInterval)duration 
  4. delay:(NSTimeInterval)delay 
  5. options:(UIViewAnimationOptions)options 
  6. animations:(void (^)(void))animations 
  7. completion:(void (^)(BOOL finished))completion;

  9. + (void)animateWithDuration:(NSTimeInterval)duration 
  10. animations:(void (^)(void))animations 
  11. completion:(void (^)(BOOL finished))completion 
  12. NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0

  14. + (void)animateWithDuration:(NSTimeInterval)duration 
  15. animations:(void (^)(void))animations
  16. NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0, completion = NULL

  18. + (void)transitionWithView:(UIView *)view 
  19. duration:(NSTimeIntervl)duration 
  20. options:(UIViewAnimationOptins)options 
  21. animations:(void (^)(void)animations 
  22. completion:(void (^)(BOOL finished) completion 
  23. NS_AVAILABLE_IOS(4_0);

  25. + (void)transitionFromView:(UIView *)fromView 
  26. toView:(UIView *)toView 
  27. duration:(NSTimeInterval)duration 
  28. options:(UIViewAnimationOptions)options 
  29. completion:(void (^)(BOOL finished))completion
  30. NS_AVAILABLE_IOS(4_0); // toView added to fromView.superview, fromView removed from its superview

  32. @end
复制代码
上面的几个方法从名字上看就非常直观。前三个方法都可以按如下的方式直译，只是后两个使用了一些默认参数而已： 
Java代码
  1. 做一个动画效果，持续时间为duration, 
  2. 延迟delay秒开始执行 ，
  3. 以options指定的方式运行这个动画，
  4. animations块中指定哪些UIView会参加本次动画效果，以及动画效果完成时这些UIView会是一个什么状态， 
  5. 动画完成之后，执行completion块进行收尾。
复制代码
有了这3个方法，开发者只需要思考，初始值，结果值，持续时间，运行方式就行了，具体的细节移动都交给类库。 

后2个方法是用于UIView相互之间转换的，个人觉得用处不大，因为用上面的三个方法同样可以做到这些效果，因此略过。 

关于UIView的动画效果支持，有2点值得一提 
* 上面所有的方法都是类方法，当调用这些方法之后，系统会新起线程执行动画效果，不会阻塞主线程的执行。 
* UIView的Animation效果只支持一些简单的2D动画效果，复杂的大家还得研究Core Animation。 

一个实战例子 
在我写的一个小游戏的主机界面中，我使用了一点动画的效果，主界面的设计图如下： 
技术分享

动画后的效果图如下： 
技术分享

我想要的效果就是，加载主界面后，图片缓缓的展开成扇形，然后游戏的菜单显示供玩家点击。 
代码如下： 
首先，准备动画前状态,让想展示的UIView不可见： 
Object-c代码
  1. -(void) prepareForIntroAnimation
  2. {
  3. self.sImageView.hidden=YES;
  4. self.nImageView.hidden=YES;
  5. self.aImageView.hidden=YES;
  6. self.pImageView.hidden=YES;
  7. self.jokerImageView.hidden=YES;

  9. self.hostGameButton.alpha=0.0f;
  10. self.joinGameButton.alpha=0.0f;
  11. self.singlePlayerGameButton.alpha=0.0f;
  12. self.helpButton.alpha=0.0f;
  13. _buttonsEnabled = NO;
  14. }
复制代码
然后，展示动画效果：
Object-c代码
  1. -(void) performAnimation
  2. {
  3. //显示UIView
  4. self.sImageView.hidden=NO;
  5. self.nImageView.hidden=NO;
  6. self.aImageView.hidden=NO;
  7. self.pImageView.hidden=NO;
  8. self.jokerImageView.hidden=NO;

  10. [UIView animateWithDuration:0.65f
  11. delay:0.5f
  12. options:UIViewAnimationOptionCurveEaseIn
  13. animations:^
  14. {
  15. //确定UIView的的中心位置和偏转角度
  16. self.sImageView.center = CGPointMake(80.0f, 108.0f);
  17. self.sImageView.transform = CGAffineTransformMakeRotation(-0.22f);

  19. self.nImageView.center = CGPointMake(160.0f, 93.0f);
  20. self.nImageView.transform = CGAffineTransformMakeRotation(-0.1f);

  22. self.aImageView.center = CGPointMake(240.0f, 88.0f);

  24. self.pImageView.center = CGPointMake(320.0f, 93.0f);
  25. self.pImageView.transform = CGAffineTransformMakeRotation(0.1f);

  27. self.jokerImageView.center = CGPointMake(400.0f, 108.0f);
  28. self.jokerImageView.transform = CGAffineTransformMakeRotation(0.22f);
  29. }
  30. completion:nil];

  32. [UIView animateWithDuration:0.5f
  33. delay:1.0f
  34. options:UIViewAnimationOptionCurveEaseOut
  35. animations:^
  36. {
  37. //透明度设置为1，显示游戏菜单。
  38. self.hostGameButton.alpha = 1.0f;
  39. self.joinGameButton.alpha = 1.0f;
  40. self.singlePlayerGameButton.alpha = 1.0f;
  41. self.helpButton.alpha = 1.0f;
  42. }
  43. completion:^(BOOL finished)
  44. {
  45. _buttonsEnabled = YES;
  46. }];

  48. }
复制代码
另外，动画效果还可以使用completion的回调块做连接，完成多个动画效果的连接。

UIView的Animaltion

标签：uiview   animaltion   

原文地址：http://blog.csdn.net/shockyu/article/details/44959651
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！