animate a transformed UIImageView?

Question

I'm trying to learn some animation while working with creating a custom control. I've gone through a fantastic tutorial here : http://www.raywenderlich.com/9864/how-to-create-a-rotating-wheel-control-with-uikit

I've got it to work, and the developer has a link to his code on github here : https://github.com/funkyboy/How-To-Create-a-Rotating-Wheel-Control-with-UIKit

Now what I'm trying to do is animate the selected item to grow while it rotates through the selected slot. I've also changed the selected slot to be on the bottom, and to accomodate for this I've changed the code in the method

 - (void) drawWheel

I've changed the line

im.transform = CGAffineTransformMakeRotation(angleSize*i);

to

im.transform = CGAffineTransformMakeRotation(angleSize*i - M_PI/2);

to account for the position now being -pi / 2

the next thing I'm trying to do is make the selected clove grow and shrink in size; this would happen on 2 separate occasions; once, when the wheel loads, and when a close passes through the selected location. Here I'm a bit stuck.

I have written the following method :

(void) growImage : (UIImageView * ) v {

[UIView animateWithDuration:1.0 animations:^{ v.transform = CGAffineTransformMakeScale(1.3, 1.3); } completion:^(BOOL finished){ [UIView animateWithDuration:1.0 animations:^{ v.transform = CGAffineTransformMakeScale(1.0, 1.0); }]; }];

}

and I invoke this first in the initWheel method where the initial clove is first set :

  if (i == 0) {
        im.alpha = maxAlphavalue;
        [self growImage: cloveImage];
   }

For the second item, I wrote the following method :

(void) findViewandGrowImage : (int) tag { for (id myArrayElement in self.container.subviews) { UIImageView *v = myArrayElement; if (v.tag == tag ){ [self growImage : v]; break; } } }

which I invoke in - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {

as such, after setting the alpha value :

lab.alpha = maxAlphavalue;
[self findViewandGrowImage : currentValue];

There's a fundamental disconnect for me somewhere about what I'm doing wrong; The first case works fine; the second case make the cloves rotate to different sectors on the wheel as well as grow and shrink... and I have no idea why. I'd love any input.

thank you.

I really don't understand what you want to see with your second case. — HalR

HalR HalR · Accepted Answer · 2013-11-02T20:40:45

If you have a transform of:

m.transform = CGAffineTransformMakeRotation(angleSize*i - M_PI/2);

and you then animate it to a transform of

[UIView animateWithDuration:1.0 animations:^{ v.transform = CGAffineTransformMakeScale(1.3, 1.3); }

it will rotate back from the (angleSize*i - M_PI/2) back to angle 0 as it animates, because your second transform did not include this rotation.

If you want it to change size, and maintain its current angle, you will need to combine a rotation with a scale and then use this in your calculations like so:

[UIView animateWithDuration:1.0 animations:^{ 
    CGAffineTransform newTransform = CGAffineTransformMakeRotation(angle);
    v.transform = CGAffineTransformScale(newTransform, 1.3, 1.3);v.transform = CGAffineTransformMakeScale(1.3, 1.3);
 }

animate a transformed UIImageView?

1 Answers