iOS开发UIView的Animation效果

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

所谓动画效果,就是会动的画,到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) 
  2.  
  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 
  5.  
  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). 
  17.  
  18. + (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache; // current limitation - only one per begin/commit block 
  19.  
  20. + (void)setAnimationsEnabled:(BOOL)enabled; // ignore any attribute changes while set. 
  21. + (BOOL)areAnimationsEnabled; 
  22.  
  23. @end 

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

Object-c代码

  1. @interface UIView(UIViewAnimationWithBlocks) 
  2.  
  3. + (void)animateWithDuration:(NSTimeInterval)duration  
  4. delay:(NSTimeInterval)delay  
  5. options:(UIViewAnimationOptions)options  
  6. animations:(void (^)(void))animations  
  7. completion:(void (^)(BOOL finished))completion; 
  8.  
  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 
  13.  
  14. + (void)animateWithDuration:(NSTimeInterval)duration  
  15. animations:(void (^)(void))animations 
  16. NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0, completion = NULL 
  17.  
  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); 
  24.  
  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 
  31.  
  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。

一个实战例子

在我写的一个小游戏的主机界面中,我使用了一点动画的效果,主界面的设计图如下:

[[81423]]

动画后的效果图如下:

[[81424]]

我想要的效果就是,加载主界面后,图片缓缓的展开成扇形,然后游戏的菜单显示供玩家点击。

代码如下:

首先,准备动画前状态,让想展示的UIView不可见:

Object-c代码

  1. -(void) prepareForIntroAnimation 
  2. self.sImageView.hidden=YES; 
  3. self.nImageView.hidden=YES; 
  4. self.aImageView.hidden=YES; 
  5. self.pImageView.hidden=YES; 
  6. self.jokerImageView.hidden=YES; 
  7.  
  8. self.hostGameButton.alpha=0.0f; 
  9. self.joinGameButton.alpha=0.0f; 
  10. self.singlePlayerGameButton.alpha=0.0f; 
  11. self.helpButton.alpha=0.0f; 
  12. _buttonsEnabled = NO; 

然后,展示动画效果:

Object-c代码

  1. -(void) performAnimation 
  2. //显示UIView 
  3. self.sImageView.hidden=NO; 
  4. self.nImageView.hidden=NO; 
  5. self.aImageView.hidden=NO; 
  6. self.pImageView.hidden=NO; 
  7. self.jokerImageView.hidden=NO; 
  8.  
  9. [UIView animateWithDuration:0.65f 
  10. delay:0.5f 
  11. options:UIViewAnimationOptionCurveEaseIn 
  12. animations:^ 
  13. //确定UIView的的中心位置和偏转角度 
  14. self.sImageView.center = CGPointMake(80.0f, 108.0f); 
  15. self.sImageView.transform = CGAffineTransformMakeRotation(-0.22f); 
  16.  
  17. self.nImageView.center = CGPointMake(160.0f, 93.0f); 
  18. self.nImageView.transform = CGAffineTransformMakeRotation(-0.1f); 
  19.  
  20. self.aImageView.center = CGPointMake(240.0f, 88.0f); 
  21.  
  22. self.pImageView.center = CGPointMake(320.0f, 93.0f); 
  23. self.pImageView.transform = CGAffineTransformMakeRotation(0.1f); 
  24.  
  25. self.jokerImageView.center = CGPointMake(400.0f, 108.0f); 
  26. self.jokerImageView.transform = CGAffineTransformMakeRotation(0.22f); 
  27. completion:nil]; 
  28.  
  29. [UIView animateWithDuration:0.5f 
  30. delay:1.0f 
  31. options:UIViewAnimationOptionCurveEaseOut 
  32. animations:^ 
  33. //透明度设置为1,显示游戏菜单。 
  34. self.hostGameButton.alpha = 1.0f; 
  35. self.joinGameButton.alpha = 1.0f; 
  36. self.singlePlayerGameButton.alpha = 1.0f; 
  37. self.helpButton.alpha = 1.0f; 
  38. completion:^(BOOL finished) 
  39. _buttonsEnabled = YES; 
  40. }]; 
  41.  

另外,动画效果还可以使用completion的回调块做连接,完成多个动画效果的连接。

责任编辑:闫佳明 来源: apkbus
相关推荐

2011-08-22 14:21:24

iPhone开发UIView Anim

2011-06-28 10:23:27

UIViewiOS

2011-08-16 18:13:42

IPhone开发UIView动画

2012-12-24 13:38:01

iOSUIView

2015-07-27 10:27:32

IOS基础知识核心动画

2011-07-03 10:05:52

Core Animat

2011-07-22 18:20:04

IOS View 动画

2011-08-11 10:27:37

iPhoneUIView视图

2011-08-11 10:16:23

iPhoneUIView视图

2011-06-13 15:00:00

Cocoa TouchiOS

2011-07-29 09:45:11

iOS 图形图像 Core Anima

2011-08-15 13:50:06

IPhone开发UIView动画

2011-07-03 10:12:35

Core Animat

2011-08-12 11:31:46

iPhoneUIView动画

2014-12-31 13:31:31

图形动画翻页

2015-01-19 12:19:04

iOS源码ActionSheet仿QQ音乐

2015-08-06 15:24:43

iosIOSUI优化

2012-12-24 13:23:26

iOS音频声效源码

2014-04-02 10:29:12

iOS 7模糊效果

2011-07-03 10:16:45

Core Animat
点赞
收藏

51CTO技术栈公众号