UIView Animation的一些用法

Animations

可以动画显示的视图属性

1.UIKit和Core Animation都支持动画效果。在UIKit中，动画是通过UIView对象来实现，视图支持许多基本动画

2.视图的可动画改变的属性，frame, bounds, center, transform, alpha, backgroundColor, contentStretch

3.Core Animation用于更加复杂的动画效果

4.因为视图和其layer连接在一起，因此改变视图的layer也会影响到视图

5.Core Animation可以运用的地方：

• 改变layer的大小和位置

• 用于变换的中心点

• Transformations to the layer or its sublayers in 3D space

• The addition or removal of a layer from the layer hierarchy

• The layer’s Z-order relative to other sibling layers

• The layer’s shadow

• The layer’s border (including whether the layer’s corners are rounded)

• The portion of the layer that stretches during resizing operations

• The layer’s opacity

• The clipping behavior for sublayers that lie outside the layer’s bounds

• The current contents of the layer

• The rasterization behavior of the layer

6.Begin From Current State Option 如果设置此选项，那么如果在动画中改变了一些属性，那么动画会从当前状态开始新的动画。否则，动画会直接将属性设置为最终的值，然后再开始新的动画

用动画实现视图属性的改变

1.因为动画块不是和一个单独的视图连接起来，因此可以在同一个动画块中设置多个视图的动画

[plain]  view plain copy print ?

1. <span style="font-size:16px;">[UIView animateWithDuration:1.0 animations:^{  
2.         firstView.alpha = 0.0;  
3.         secondView.alpha = 1.0;  
4. }];  
5. </span>  

2.当指定动画开始的时候，动画会在另外一个线程上运行，以避免影响当前程序的主线程

3.使用completion handler

[plain]  view plain copy print ?

1. - (IBAction)showHideView:(id)sender  
2. {  
3.     // Fade out the view right away  
4.     [UIView animateWithDuration:1.0  
5.         delay: 0.0  
6.         options: UIViewAnimationOptionCurveEaseIn  
7.         animations:^{  
8.              thirdView.alpha = 0.0;  
9.         }  
10.         completion:^(BOOL finished){  
11.             // Wait one second and then fade in the view  
12.             [UIView animateWithDuration:1.0  
13.                  delay: 1.0  
14.                  options:UIViewAnimationOptionCurveEaseOut  
15.                  animations:^{  
16.                     thirdView.alpha = 1.0;  
17.                  }  
18.                  completion:nil];  
19.         }];  
20. }

4. 当你改变一个已经在动画改变的属性时，并不会停止当前动画。相反，当前的动画会继续，但是将你新指定的属性作为最终属性的结果来产生新动画

动画块的嵌入

1.嵌入的动画块与外部动画块同时开始，不过动画的配置可以不同。默认情况下，内部动画块继承外部动画块的时间，动画时间曲线。但是你也可以重新定义这些选项

[plain]  view plain copy print ?

1. [UIView animateWithDuration:1.0  
2.         delay: 1.0  
3.         options:UIViewAnimationOptionCurveEaseOut  
4.         animations:^{  
5.             aView.alpha = 0.0;  
6.    
7.             // Create a nested animation that has a different  
8.             // duration, timing curve, and configuration.  
9.             [UIView animateWithDuration:0.2  
10.                  delay:0.0  
11.                 <span style="color:#ff0000;"> options: UIViewAnimationOptionOverrideInheritedCurve |  
12.                           UIViewAnimationOptionCurveLinear |  
13.                           UIViewAnimationOptionOverrideInheritedDuration |  
14.                           UIViewAnimationOptionRepeat |  
15.                           UIViewAnimationOptionAutoreverse</span>  
16.                  animations:^{  
17. <span style="color:#ff0000;">                      [UIView setAnimationRepeatCount:2.5];  
18. </span>                      anotherView.alpha = 0.0;  
19.                  }  
20.                  completion:nil];  
21.    
22.         }  
23.         completion:nil];

2. UIViewAnimationOptionOverrideInheritedCurve andUIViewAnimationOptionOverrideInheritedDuration 两个键用于指定内部动画块需要重载的选项 

3.注意设置动画重复次数的设置位置

4.对于可逆动画来说UIViewAnimationOptionAutoreverse，每一个循环包括了用动画将属性设置为新值(0.5)然后再将其设置为初始值(0.5)。如果你希望动画以属性的新值结束，则可以使用0.5次的重复次数。

创建视图的动画变换

1.对以下改变使用视图变换动画：

• Change the visible subviews of an existing view. 

• Replace one view in your view hierarchy with a different view.

2.使用视图变换方法会对整个视图进行变换，但是变换之后只是视图的内容（子视图）发生了变换。视图变换与添加modal view类似，只不过当前的视图控制器不会发生改变。

3.使用 transitionWithView:duration:options:animations:completion: 方法来初始化一个视图变换

4.在该动画块中，会动画改变的是子视图的添加，隐藏，显示，移除。

5.视图会创建改变之前和之后的视图的截图，然后动画切换他们

[plain]  view plain copy print ?

1. - (IBAction)displayNewPage:(id)sender  
2. {  
3.     [UIView transitionWithView:self.view  
4.         duration:1.0  
5.         options:UIViewAnimationOptionTransitionCurlUp  
6.         animations:^{  
7.             currentTextView.hidden = YES;  
8.             swapTextView.hidden = NO;  
9.         }  
10.         completion:^(BOOL finished){  
11.             // Save the old text and then swap the views.  
12.             [self saveNotes:temp];  
13.    
14.             UIView*    temp = currentTextView;  
15.             currentTextView = swapTextView;  
16.             swapTextView = temp;  
17.         }];  
18. } 

[plain]  view plain copy print ?

1.    [UIView beginAnimations:@"ToggleSiblings" context:nil];  
2.     [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];  
3.     [UIView setAnimationDuration:1.0];  
4.    
5.     // Make your changes  
6.    
7.     [UIView commitAnimations];

将一个视图替换为另外一个视图

1.使用 transitionFromView:toView:duration:options:completion: 方法来切换视图，这个方法会将第一个视图从视图层次中删去，并插入第二个视图。

2.如果要保留第一个视图，那么保存一个对其的引用

3.如果你只是想要隐藏而不是从视图层次中移除视图，那么使用UIViewAnimationOptionShowHideTransitionViews 

[plain]  view plain copy print ?

1. - (IBAction)toggleMainViews:(id)sender {  
2.     [UIView transitionFromView:(displayingPrimary ? primaryView : secondaryView)  
3.         toView:(displayingPrimary ? secondaryView : primaryView)  
4.         duration:1.0  
5.         options:(displayingPrimary ? UIViewAnimationOptionTransitionFlipFromRight :  
6.                     UIViewAnimationOptionTransitionFlipFromLeft)  
7.         completion:^(BOOL finished) {  
8.             if (finished) {  
9.                 displayingPrimary = !displayingPrimary;  
10.             }  
11.     }];  
12. } 

动画改变视图和layer

[plain]  view plain copy print ?

1. [UIView animateWithDuration:1.0  
2.     delay:0.0  
3.     options: UIViewAnimationOptionCurveLinear  
4.     animations:^{  
5.         // Animate the first half of the view rotation.  
6.         CGAffineTransform  xform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(-180));  
7.         backingView.transform = xform;  
8.    
9.         // Rotate the embedded CALayer in the opposite direction.  
10.         CABasicAnimation*    layerAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];  
11.         layerAnimation.duration = 2.0;  
12.         layerAnimation.beginTime = 0; //CACurrentMediaTime() + 1;  
13.         layerAnimation.valueFunction = [CAValueFunction functionWithName:kCAValueFunctionRotateZ];  
14.         layerAnimation.timingFunction = [CAMediaTimingFunction  
15.                         functionWithName:kCAMediaTimingFunctionLinear];  
16.         layerAnimation.fromValue = [NSNumber numberWithFloat:0.0];  
17.         layerAnimation.toValue = [NSNumber numberWithFloat:DEGREES_TO_RADIANS(360.0)];  
18.         layerAnimation.byValue = [NSNumber numberWithFloat:DEGREES_TO_RADIANS(180.0)];  
19.         [manLayer addAnimation:layerAnimation forKey:@"layerAnimation"];  
20.     }  
21.     completion:^(BOOL finished){  
22.         // Now do the second half of the view rotation.  
23.         [UIView animateWithDuration:1.0  
24.              delay: 0.0  
25.              options: UIViewAnimationOptionCurveLinear  
26.              animations:^{  
27.                  CGAffineTransform  xform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(-359));  
28.                  backingView.transform = xform;  
29.              }  
30.              completion:^(BOOL finished){  
31.                  backingView.transform = CGAffineTransformIdentity;  
32.          }];  
33. }];

iOS４之后的版本应该使用block animation方法

• + (void)beginAnimations:(NSString *)animationID context:(void *)context
  标记动画的开始，第一参数指定动画的ID,第二个参数表示要传递的自定义数据
• + commitAnimations
• + setAnimationStartDate:
• + setAnimationsEnabled:
• 
  
• + setAnimationDelegate:
• + setAnimationWillStartSelector:
• + setAnimationDidStopSelector:

指定动画的代理对象，两个代理方法的selector应该满足一下格式

- (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context

• + setAnimationDuration:
• + setAnimationDelay:
• + setAnimationCurve:

• typedef enum {
     UIViewAnimationCurveEaseInOut,
     UIViewAnimationCurveEaseIn,
     UIViewAnimationCurveEaseOut,
     UIViewAnimationCurveLinear
  } UIViewAnimationCurve;
  

  
  
• + setAnimationRepeatCount:
• + setAnimationRepeatAutoreverses:
• + setAnimationBeginsFromCurrentState:
• + setAnimationTransition:forView:cache:
• + areAnimationsEnabled

Animating Views with Blocks

• + animateWithDuration:delay:options:animations:completion:
• + animateWithDuration:animations:completion:
• + animateWithDuration:animations:
• + transitionWithView:duration:options:animations:completion:
• + transitionFromView:toView:duration:options:completion:

enum {
   UIViewAnimationOptionLayoutSubviews            = 1 <<  0,
   UIViewAnimationOptionAllowUserInteraction      = 1 <<  1,
   UIViewAnimationOptionBeginFromCurrentState     = 1 <<  2,
   UIViewAnimationOptionRepeat                    = 1 <<  3,
   UIViewAnimationOptionAutoreverse               = 1 <<  4,
   UIViewAnimationOptionOverrideInheritedDuration = 1 <<  5,
   UIViewAnimationOptionOverrideInheritedCurve    = 1 <<  6,
   UIViewAnimationOptionAllowAnimatedContent      = 1 <<  7,
   UIViewAnimationOptionShowHideTransitionViews   = 1 <<  8,
   
   UIViewAnimationOptionCurveEaseInOut            = 0 << 16,
   UIViewAnimationOptionCurveEaseIn               = 1 << 16,
   UIViewAnimationOptionCurveEaseOut              = 2 << 16,
   UIViewAnimationOptionCurveLinear               = 3 << 16,
   
   UIViewAnimationOptionTransitionNone            = 0 << 20,
   UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,
   UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,
   UIViewAnimationOptionTransitionCurlUp          = 3 << 20,
   UIViewAnimationOptionTransitionCurlDown        = 4 << 20,
};
typedef NSUInteger UIViewAnimationOptions;

1.UIImageView的图片切换动画设置

[plain]  view plain copy print ?

1. self.imageView.animationImages = [NSArray arrayWithObjects:  
2.       [UIImage imageNamed:@"campFire01.gif"],  
3.       [UIImage imageNamed:@"campFire02.gif"],  
4.       [UIImage imageNamed:@"campFire03.gif"],  
5.       [UIImage imageNamed:@"campFire04.gif"], nil];  
6. self.imageView.animationDuration = 1.75;  
7. self.imageView.animationRepeatCount = 0;  
8. [self.imageView startAnimating];  
9. 
   

2.LocateMe中

[plain]  view plain copy print ?

1.     [UIView setAnimationDuration:0.6];  
2.     startButton.alpha = 1.0;  
3.     descriptionLabel.alpha = 1.0;  
4.     tableView.alpha = 0.0;  
5.     [self.navigationItem setLeftBarButtonItem:nil animated:YES];  
6.     [UIView commitAnimations];  

[plain]  view plain copy print ?

1.  [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(onTimer) userInfo:nil repeats:YES];  

[plain]  view plain copy print ?

1. - (void)onTimer  
2. {  
3.     UIImageView* flakeView = [[UIImageView alloc] initWithImage:self.flakeImage];  
4.       
5.     // use the random() function to randomize up our flake attributes  
6.     int startX = round(random() % 320);  
7.     int endX = round(random() % 320);  
8.     double scale = 1 / round(random() % 100) + 1.0;  
9.     double speed = 1 / round(random() % 100) + 1.0;  
10.       
11.     // set the flake start position  
12.     flakeView.frame = CGRectMake(startX, -100.0, 25.0 * scale, 25.0 * scale);  
13.     flakeView.alpha = 0.25;  
14.       
15.     // put the flake in our main view  
16.     [self.view addSubview:flakeView];  
17.       
18.     [UIView beginAnimations:nil context:flakeView];  
19.     // set up how fast the flake will fall  
20.     [UIView setAnimationDuration:5 * speed];  
21.       
22.     // set the postion where flake will move to  
23.     flakeView.frame = CGRectMake(endX, 500.0, 25.0 * scale, 25.0 * scale);  
24.       
25.     // set a stop callback so we can cleanup the flake when it reaches the  
26.     // end of its animation  
27.     [UIView setAnimationDidStopSelector:@selector(onAnimationComplete:finished:context:)];  
28.     [UIView setAnimationDelegate:self];  
29.     [UIView commitAnimations];  
30.       
31. }  

[plain]  view plain copy print ?

1. <span style="font-size:16px;">- (void)onAnimationComplete:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {  
2.     UIImageView *flakeView = context;  
3.     [flakeView removeFromSuperview];  
4.     [flakeView release];  
5. }</span>  

4.Picnic中动画链的应用

[plain]  view plain copy print ?

1. - (void)moveToLeft:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {  
2.       
3.     if (bugDead) return;   
4.       
5.     [UIView animateWithDuration:1.0 delay:2.0 options:UIViewAnimationCurveEaseIn | UIViewAnimationOptionAllowUserInteraction animations:^(void) {  
6.         self.bugImage.center = CGPointMake(75, 200);  
7.     } completion:^(BOOL finished) {  
8.         [self faceRight:nil finished:nil context:nil];  
9.     }];  
10. }  
11.   
12. - (void)faceRight:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {  
13.       
14.     if (bugDead) return;   
15.       
16.     [UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction animations:^(void) {  
17.         self.bugImage.transform = CGAffineTransformMakeRotation(M_PI);  
18.     } completion:^(BOOL finished) {  
19.         [self moveToRight:nil finished:nil context:nil];  
20.     }];  
21. }  
22.   
23. - (void)moveToRight:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {  
24.       
25.     if (bugDead) return;   
26.   
27.     [UIView animateWithDuration:1.0 delay:2.0 options:UIViewAnimationCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction animations:^(void) {  
28.         self.bugImage.center = CGPointMake(230, 250);  
29.     } completion:^(BOOL finished) {  
30.         [self faceLeft:nil finished:nil context:nil];  
31.     }];  
32. }  
33.   
34. - (void)faceLeft:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {  
35.       
36.     if (bugDead) return;   
37.   
38.     [UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction animations:^(void) {  
39.         self.bugImage.transform = CGAffineTransformMakeRotation(0);  
40.     } completion:^(BOOL finished) {  
41.         [self moveToLeft:nil finished:nil context:nil];  
42.     }];  
43. }  

5. 自定义图像提取器

[plain]  view plain copy print ?

1. - (void)loadView  
2. {  
3.     [self loadImages];  
4.     UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds];  
5.       
6.     int row = 0;  
7.     int column = 0;  
8.     for (int i = 0; i < self.thumbnails.count; i++) {  
9.           
10.         UIImage *image = [self.thumbnails objectAtIndex:i];  
11.         UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];  
12.         button.frame = CGRectMake(82 * column + 5, 69 * row + 5, 64, 64);  
13.         [button setImage:image forState:UIControlStateNormal];  
14.         [button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];  
15.         button.tag = i;  
16.           
17.         [scrollView addSubview:button];  
18.           
19.         if(column == 3){  
20.             column = 0;  
21.             row++;  
22.         } else {  
23.             column++;  
24.         }  
25.     }  
26.       
27.     scrollView.contentSize = CGSizeMake(320, 69 * row + 5);  
28.       
29.     self.view = scrollView;  
30.     [scrollView release];  
31. }