UIView动画

动画效果提供了状态或页面转换时流畅的用户体验,在iOS系统中,咱们不需要自己编写绘制动画的代码,Core Animation提供了丰富的api来实现你需要的动画效果。

UIKit只用UIView来展示动画,动画支持UIView下面的这些属性改变:

  • frame

  • bounds

  • center

  • transform

  • alpha

  • backgroundColor

  • contentStretch

1、commitAnimations方式使用UIView动画

[cpp] view plain copy
  1. - (void)viewDidLoad

  2. {

  3. [super viewDidLoad];

  4. UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];

  5. [button setTitle:@"改变"forState:UIControlStateNormal];

  6. button.frame = CGRectMake(10, 10, 60, 40);

  7. [button addTarget:self action:@selector(changeUIView) forControlEvents:UIControlEventTouchUpInside];

  8. [self.view addSubview:button];

  9. }

  10. - (void)changeUIView{

  11. [UIView beginAnimations:@"animation"context:nil];

  12. [UIView setAnimationDuration:1.0f];

  13. [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

  14. [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];

  15. [UIView commitAnimations];

  16. }


下面是点击改变后的效果(两种):
1358154251_1234.png 1358154352_3552.png
动画的常量有一下四种
[cpp] view plain copy
  1. UIViewAnimationTransitionNone,

  2. UIViewAnimationTransitionFlipFromLeft,

  3. UIViewAnimationTransitionFlipFromRight,

  4. UIViewAnimationTransitionCurlUp,

  5. UIViewAnimationTransitionCurlDown,


1.2 交换本视图控制器中2view位置

[self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];

先添加两个view ,一个redview  一个yellowview

[cpp] view plain copy
  1. - (void)viewDidLoad

  2. {

  3. [super viewDidLoad];

  4. UIView *redView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

  5. redView.backgroundColor = [UIColor redColor];

  6. [self.view addSubview:redView];

  7. UIView *yellowView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

  8. yellowView.backgroundColor = [UIColor yellowColor];

  9. [self.view addSubview:yellowView];

  10. UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];

  11. [button setTitle:@"改变"forState:UIControlStateNormal];

  12. button.frame = CGRectMake(10, 10, 300, 40);

  13. [button addTarget:self action:@selector(changeUIView) forControlEvents:UIControlEventTouchUpInside];

  14. [self.view addSubview:button];

  15. UIButton *button1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];

  16. [button1 setTitle:@"改变1"forState:UIControlStateNormal];

  17. button1.frame = CGRectMake(10, 60, 300, 40);

  18. [button1 addTarget:self action:@selector(changeUIView1) forControlEvents:UIControlEventTouchUpInside];

  19. [self.view addSubview:button1];

  20. }


[cpp] view plain copy
  1. - (void)changeUIView1{

  2. [UIView beginAnimations:@"animation"context:nil];

  3. [UIView setAnimationDuration:1.0f];

  4. [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

  5. [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];

  6. // 交换本视图控制器中2个view位置

  7. [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];

  8. [UIView commitAnimations];

  9. }


1358154891_2024.png
这样看起来就像两页一样了。

1.3 、   [UIViewsetAnimationDidStopSelector:@selector(animationFinish:)];

在commitAnimations消息之前,可以设置动画完成后的回调,设置方法是:

[UIViewsetAnimationDidStopSelector:@selector(animationFinish:)];

2、使用:CATransition

[cpp] view plain copy
  1. - (void)changeUIView2{

  2. CATransition *transition = [CATransition animation];

  3. transition.duration = 2.0f;

  4. transition.type = kCATransitionPush;

  5. transition.subtype = kCATransitionFromTop;

  6. [self.view exchangeSubviewAtIndex:1 withSubviewAtIndex:0];

  7. [self.view.layer addAnimation:transition forKey:@"animation"];

  8. }

transition.type 的类型可以有

淡化、推挤、揭开、覆盖

NSString * const kCATransitionFade;

NSString * const kCATransitionMoveIn;

NSString * const kCATransitionPush;

NSString * const kCATransitionReveal;

这四种,
transition.subtype
也有四种

NSString * const kCATransitionFromRight;

NSString * const kCATransitionFromLeft;

NSString * const kCATransitionFromTop;

NSString * const kCATransitionFromBottom;


1358211158_5255.png 1358211332_1649.png

2.2 私有的类型的动画类型:

立方体、吸收、翻转、波纹、翻页、反翻页、镜头开、镜头关

[cpp] view plain copy
  1. animation.type = @"cube"

  2. animation.type = @"suckEffect";

  3. animation.type = @"oglFlip";//不管subType is "fromLeft" or "fromRight",official只有一种效果

  4. animation.type = @"rippleEffect";

  5. animation.type = @"pageCurl";

  6. animation.type = @"pageUnCurl"

  7. animation.type = @"cameraIrisHollowOpen ";

  8. animation.type = @"cameraIrisHollowClose ";

下图是第一个cube立方体的效果:
1358213093_4460.png

2.3 CATransition的 startProgress  endProgress属性

这两个属性是float类型的。
可以控制动画进行的过程,可以让动画停留在某个动画点上,值在0.0到1.0之间。endProgress要大于等于startProgress。
比如上面的立方体转到,可以设置endProgress= 0.5,让动画停留在转动一般的位置。
上面这些私有的动画效果,在实际应用中要谨慎使用。因为在app store审核时可能会以为这些动画效果而拒绝通过。

3、UIView的 + (void)animateWithDuration

:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
方法。
这个方法是在iOS4.0之后才支持的。
比 1 里的UIView的方法简洁方便使用。
DidView里添加moveView。
[cpp] view plain copy
  1. moveView = [[UIView alloc] initWithFrame:CGRectMake(10, 180, 200, 40)];

  2. moveView.backgroundColor = [UIColor blackColor];

  3. [self.view addSubview:moveView];

[cpp] view plain copy
  1. - (void)changeUIView3{

  2. [UIView animateWithDuration:3 animations:^(void){

  3. moveView.frame = CGRectMake(10, 270, 200, 40);

  4. }completion:^(BOOLfinished){

  5. UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20, 20, 40, 40)];

  6. label.backgroundColor = [UIColor blackColor];

  7. [self.view addSubview:label];

  8. }];

  9. }

然后用UIView animateWithDuration动画移动,移动动画完毕后添加一个Label。

3.2、 animateWithDuration的嵌套使用

[cpp] view plain copy
  1. - (void)changeUIView3{

  2. [UIView animateWithDuration:2

  3. delay:0

  4. options:UIViewAnimationOptionCurveEaseOut animations:^(void){

  5. moveView.alpha = 0.0;

  6. }completion:^(BOOLfinished){

  7. [UIView animateWithDuration:1

  8. delay:1.0

  9. options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat

  10. animations:^(void){

  11. [UIView setAnimationRepeatCount:2.5];

  12. moveView.alpha = 1.0;

  13. }completion:^(BOOLfinished){

  14. }];

  15. }];

  16. }

这个嵌套的效果是先把view变成透明,在从透明变成不透明,重复2.5次透明到不透明的效果。


你可能感兴趣的:(UIView,UIView动画)