Search code examples
animationios5uiimageviewuiimagecgaffinetransform

iOS5 combine CGAffineTransform with animationImages?


I'm pretty new to iOS animation and I'm wondering if it's possible to combine an transition between two images along with a translation animation of the UIImageView using CGAffineTransform?

In other words I have two images that I want to animate between, and then I want to apply a simultaneous translation so that the whole thing moves across the page while moving back and forth between the two images.

I know I can apply a CGAffineTransformConcat to combine two CGAffineTransforms such as a CGAffineTransformTranslate and something else. But I don't see a CGAffineTransform which allows me to transition to another UIImage.

The only way I know to animate between images is to use the UIImageView animationImages array combined with startAnimating. However, I don't know how to combine this with a translation like so:

UIImageView* textView = [[UIImageView alloc] initWithFrame:bunnyImage.frame]; 

textView.animationImages = [NSArray arrayWithObjects:    
                            [UIImage imageNamed:@"bunnyclose.png"],
                            [UIImage imageNamed:@"bunnytalk.png"],
                            nil];

textView.animationDuration = 1.0;
textView.animationRepeatCount = 8;
[textView startAnimating];

[self.view addSubview:textView];    

Any suggestions?


Solution

  • In answer to my own question, the block animation function transitionFromView:toView:duration:options:completion as discussed in "Creating Animated Transitions Between Views" is the best solution that I have come up with yet. I use this to animate between images and this can be combined with the block animation animateWithDuration:delay:options:animations:completion: using CGAffineTransformTranslate or simply by changing the center of the UIImageView as discussed in Animations.

    Reworking my original codeblock and adding my translation looks something like this:

    UIImageView* bunny2View = [[UIImageView alloc] initWithFrame:bunny2Image.frame]; 
    
    
    [UIView 
     transitionFromView:bunny2Image 
     toView:bunny2View 
     duration:10.0 
     options:UIViewAnimationOptionShowHideTransitionViews 
     completion:^(BOOL finished) {
         [UIView 
          animateWithDuration:dur 
          animations:^(void) {
              CGPoint center = bunny2Image.center;
              center.y += deltay;
              bunny2Image.center = center;
              bunny2View.center = center;
          }
          completion:^(BOOL finished) {
    
              [UIView 
               transitionFromView:bunny2View 
               toView:bunny2Image 
               duration:10.0 
               options:UIViewAnimationOptionShowHideTransitionViews 
               completion:nil];
          }];
     }]; 
    

    Still a work in progress, but this is what I've come up with so far!