iOS动画效果和实现

小灰灰 2022-08-07 05:54 268阅读 0赞

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

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

*  [frame][]
 *  [bounds][]
 *  [center][]
 *  [transform][]
 *  [alpha][]
 *  [backgroundColor][]
 *  [contentStretch][]

# 1、commitAnimations方式使用UIView动画 #

**\[cpp\]** [view plain][] [copy][view plain]

1.  \- (**void**)viewDidLoad 
2.  \{ 
3.   \[super viewDidLoad\]; 
4.  
5.   UIButton \*button = \[UIButton buttonWithType:UIButtonTypeRoundedRect\]; 
6.  
7.   \[button setTitle:@"改变" forState:UIControlStateNormal\]; 
8.   button.frame = CGRectMake(10, 10, 60, 40); 
9.   \[button addTarget:self action:@selector(changeUIView) forControlEvents:UIControlEventTouchUpInside\]; 
10.  \[self.view addSubview:button\]; 
11. 
12. \} 
13. 
14. \- (**void**)changeUIView\{ 
15.  \[UIView beginAnimations:@"animation" context:nil\]; 
16.  \[UIView setAnimationDuration:1.0f\]; 
17.  \[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut\]; 
18.  \[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES\]; 
19.  \[UIView commitAnimations\]; 
20.  \}

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

![1358154251_1234.png][] ![1358154352_3552.png][]

动画的常量有一下四种

**\[cpp\]** [view plain][] [copy][view plain]

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

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

\[self.viewexchangeSubviewAtIndex:1withSubviewAtIndex:0\];

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

**\[cpp\]** [view plain][] [copy][view plain]

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.  
8.   UIView \*yellowView = \[\[UIView alloc\] initWithFrame:\[\[UIScreen mainScreen\] bounds\]\]; 
9.   yellowView.backgroundColor = \[UIColor yellowColor\]; 
10.  \[self.view addSubview:yellowView\]; 
11. 
12.  UIButton \*button = \[UIButton buttonWithType:UIButtonTypeRoundedRect\]; 
13.  \[button setTitle:@"改变" forState:UIControlStateNormal\]; 
14.  button.frame = CGRectMake(10, 10, 300, 40); 
15.  \[button addTarget:self action:@selector(changeUIView) forControlEvents:UIControlEventTouchUpInside\]; 
16.  \[self.view addSubview:button\]; 
17. 
18.  UIButton \*button1 = \[UIButton buttonWithType:UIButtonTypeRoundedRect\]; 
19.  \[button1 setTitle:@"改变1" forState:UIControlStateNormal\]; 
20.  button1.frame = CGRectMake(10, 60, 300, 40); 
21.  \[button1 addTarget:self action:@selector(changeUIView1) forControlEvents:UIControlEventTouchUpInside\]; 
22.  \[self.view addSubview:button1\]; 
23. 
24. \}

**\[cpp\]** [view plain][] [copy][view plain]

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][view plain]

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][view plain]

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][view plain]

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

**\[cpp\]** [view plain][] [copy][view plain]

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的嵌套使用 ##

**\[cpp\]** [view plain][] [copy][view plain]

1.  \- (**void**)changeUIView3\{ 
2.  
3.  
4.   \[UIView animateWithDuration:2 
5.   delay:0 
6.   options:UIViewAnimationOptionCurveEaseOut animations:^(**void**)\{ 
7.   moveView.alpha = 0.0; 
8.   \}completion:^(**BOOL** finished)\{ 
9.   \[UIView animateWithDuration:1 
10.  delay:1.0 
11.  options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat 
12.  animations:^(**void**)\{ 
13.  \[UIView setAnimationRepeatCount:2.5\]; 
14.  moveView.alpha = 1.0; 
15.  \}completion:^(**BOOL** finished)\{ 
16. 
17.  \}\]; 
18. 
19.  \}\]; 
20. \}

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

![Center][]

[frame]: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/UIView/UIView.html#//apple_ref/occ/instp/UIView/frame
[bounds]: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/UIView/UIView.html#//apple_ref/occ/instp/UIView/bounds
[center]: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/UIView/UIView.html#//apple_ref/occ/instp/UIView/center
[transform]: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/UIView/UIView.html#//apple_ref/occ/instp/UIView/transform
[alpha]: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/UIView/UIView.html#//apple_ref/occ/instp/UIView/alpha
[backgroundColor]: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/UIView/UIView.html#//apple_ref/occ/instp/UIView/backgroundColor
[contentStretch]: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/DeprecationAppendix/AppendixADeprecatedAPI.html#//apple_ref/occ/instp/UIView/contentStretch
[view plain]: http://blog.csdn.net/totogo2010/article/details/8501812#
[1358154251_1234.png]: https://img-my.csdn.net/uploads/201301/14/1358154251_1234.png
[1358154352_3552.png]: https://img-my.csdn.net/uploads/201301/14/1358154352_3552.png
[1358154891_2024.png]: https://img-my.csdn.net/uploads/201301/14/1358154891_2024.png
[1358211158_5255.png]: https://img-my.csdn.net/uploads/201301/15/1358211158_5255.png
[1358211332_1649.png]: https://img-my.csdn.net/uploads/201301/15/1358211332_1649.png
[1358213093_4460.png]: https://img-my.csdn.net/uploads/201301/15/1358213093_4460.png
[Center]: /images/20220805/a036d36610594cf79d53a3fbc36524d2.png