CODEWITHSUNDEEP
iphoneobjective-ciosxcodeanimation
ytpm
ytpm

Reputation: 5150

how to create smooth image animation

I have this animation with one background image and 12 images of the needle in the center. its running ok, but each time it shows image and the image after, I just want it to run smooth between the images. how can I do that?

here is my current code:

- (IBAction)startAnimation:(id)sender
{
    imgAnimation.frame = CGRectMake(0, 0, 184.5f, 172.5f);
    imgAnimation.center = CGPointMake(160, 164);
    imgAnimation.animationImages = [NSArray arrayWithObjects:
                                [UIImage imageNamed:@"pointer01.png"],
                                [UIImage imageNamed:@"pointer02.png"],
                                [UIImage imageNamed:@"pointer03.png"],
                                [UIImage imageNamed:@"pointer04.png"],
                                [UIImage imageNamed:@"pointer05.png"],
                                [UIImage imageNamed:@"pointer06.png"],
                                [UIImage imageNamed:@"pointer07.png"],
                                [UIImage imageNamed:@"pointer08.png"],
                                [UIImage imageNamed:@"pointer09.png"],
                                [UIImage imageNamed:@"pointer10.png"],
                                [UIImage imageNamed:@"pointer11.png"],
                                [UIImage imageNamed:@"pointer12.png"], nil];
    [imgAnimation setAnimationRepeatCount:5];
    [imgAnimation setAnimationDuration:4.0f];
    [imgAnimation startAnimating];

}

gauge gauge

Upvotes: 1

Views: 2219

Answers (1)

Cowirrie
Cowirrie

Reputation: 7226

Edit: I originally suggested UIView animation, but that always takes the shortest possible route, rotating through 90 degrees instead of 270. Try this, courtesy of Can I use CGAffineTransformMakeRotation to rotate a view more than 360 degrees?

To get the smoothest possible needle animation, don't use a sequence of images. Start with a single needle image, in a UIImageView, with the view centered on the background dial image. Then change the transform property of the UIImageView's layer with an transform for rotation.

Once you have the geometry lined up, use Core Animation to animate the transform changing through the appropriate range of angles.

Just to elaborate, assuming that imgAnimation is a UIImageView:

- (IBAction)startAnimation:(id)sender
{
    // This assumes that the center of the needle image is the center of the dial.  If they aren't, it's probably simplest to resize the needle image so it is centered.
    imgAnimation.frame = CGRectMake(0, 0, 184.5f, 172.5f);
    imgAnimation.center = CGPointMake(160, 164);

    // The needle image used should show the needle pointing straight up, or some other known direction.
    imgAnimation.image = [UIImage imageNamed:@"pointer06.png"];
    // Position the needle in its position before animating.
    [imgAnimation.layer setTransform:CATransform3DMakeRotation(-M_PI*3/4, 0, 0, 1)];

    // Construct an animation moving the needle to its end position.
    // Mose of these properties should be self-explanatory.  Look up the CABasicAnimation Class Reference if not.
    CABasicAnimation *needleAnim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    needleAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    needleAnim.duration = 4;
    needleAnim.repeatCount = 5;
    needleAnim.autoreverses = YES;
    // Setting fillMode means that, once the animation finishes, the needle stays in its end position.
    needleAnim.fillMode = kCAFillModeForwards;
    needleAnim.removedOnCompletion = YES;
    needleAnim.toValue = [NSNumber numberWithFloat:M_PI*3/4];

    // Add the animation to the needle's layer.
    [senderView.layer addAnimation:needleAnim forKey:nil];
}

Upvotes: 3

Related Questions