iOS动画效果和实现

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

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

• frame
• bounds
• center
• transform
• alpha
• backgroundColor
• contentStretch

 

1、commitAnimations方式使用UIView动画

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. }

下面是点击改变后的效果（两种）：

 

动画的常量有一下四种

1. UIViewAnimationTransitionNone,
2. UIViewAnimationTransitionFlipFromLeft,
3. UIViewAnimationTransitionFlipFromRight,
4. UIViewAnimationTransitionCurlUp,
5. UIViewAnimationTransitionCurlDown,

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

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

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

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. }

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. }

这样看起来就像两页一样了。

1.3 、   [UIView setAnimationDidStopSelector:@selector(animationFinish:)];

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

[UIView setAnimationDidStopSelector:@selector(animationFinish:)];

 

2、使用：CATransition

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;

 

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

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

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立方体的效果：

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。

1. moveView = [[UIView alloc] initWithFrame:CGRectMake(10, 180, 200, 40)];
2. moveView.backgroundColor = [UIColor blackColor];
3. [self.view addSubview:moveView];

1. - (void)changeUIView3{
2. [UIView animateWithDuration:3 animations:^(void){
3. moveView.frame = CGRectMake(10, 270, 200, 40);
4. }completion:^(BOOL finished){
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的嵌套使用

1. - (void)changeUIView3{
2. [UIView animateWithDuration:2
3. delay:0
4. options:UIViewAnimationOptionCurveEaseOut animations:^(void){
5. moveView.alpha = 0.0;
6. }completion:^(BOOL finished){
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:^(BOOL finished){
14. }];
15. }];
16. }

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

文中例子的代码：AnimateDemo