CODEWITHSUNDEEP
iosanimationuiimage
DogCoffee
DogCoffee

Reputation: 19946

Change Animation Speed Series of Images

I have a series of images, I want them to repeat. However, I want the first half to play in, for example 2 seconds, then the second half to play in 5 seconds.

It is quite easy to play a series of images, using the following

   - (void) completeCycles:(int) cycles inhalePercentage:(int) inhalePercent exhalePercentage:(int) exhalePercent totalCycleTime:(int) time
   {
    NSMutableArray *textures = [NSMutableArray array];

    for (int i = 0; i < kNumberBreathingImages; i++) {
        NSString *textureName = [NSString stringWithFormat:@"breath%d.png", i];

        for (int i = 0; i < inhalePercent; i++) {
            [textures addObject:[UIImage imageNamed:textureName]];
        }
    }

    for (int i = kNumberBreathingImages - 1; i > 0; i--) {
        NSString *textureName = [NSString stringWithFormat:@"breath%d.png", i];
        for (int i = 0; i < exhalePercent; i++) {
            [textures addObject:[UIImage imageNamed:textureName]];
        }
    }

    self.animationImageView.animationImages = textures;
    self.animationImageView.animationDuration = time;
    self.animationImageView.animationRepeatCount = cycles;
    [self.animationImageView startAnimating];
    }

However, I want the first half of the animation to take x time and the second half to take y time.

I don't think the above will allow me to do this, just wondering what a better approach would be.

Pretty sure will need to use

UIView animateWithDuration:animations: completion:

Thanks for any assistance.

This code creates this effect,

Upvotes: 3

Views: 607

Answers (2)

Rohit
Rohit

Reputation: 1174

The animation system on UIImageView is very limited. I would suggest that you make your own implementation with say 2 image view.

You would than change the image in one imageview and the fade in and out using UIView animateWithDuration

I have written a method for you. Please note: I have not tested it.

It assumes you have your frames in a array called 'frames' and have two UIIMageView placed on top of each other called 'imgv1' and 'imgv2'

-(void)performAnimationOfFrameAtIndex:(NSNumber*)indexNum
{        
int index = [indexNum intValue];
if(index >= frames.count)
{
    return;
}
UIImage *img = [frames objectAtIndex:index];

UIImageView *imgIn;
UIImageView *imgOut;
if(index % 2 == 0)
{
    imgIn = imgv1;
    imgOut = imgv2;
}
else 
{
    imgIn = imgv2;
    imgOut = imgv1;
}
imgIn.image = img;
[self.view sendSubviewToBack:imgIn];

[UIView animateWithDuration:0.1 animations:^
{
    imgIn.alpha = 1;
    imgOut.alpha = 0;
} completion:^(BOOL finished)
{
    [self performSelectorOnMainThread:@selector(performAnimationOfFrameAtIndex:) withObject:[NSNumber numberWithInt:index+1] waitUntilDone:NO];
}];

}

Thanks for the idea,

I changed your code above to get the desired effect I wanted, now it works perfect. The alpha was causing a "strobe" effect even when the duration is 0 seconds.

Here is my final code

Enjoy the 100 :-)

- (void) performAnimationOfFrameAtIndex:(NSNumber*)indexNum
{
    int index = indexNum.intValue;
    if (index >= self.frames.count) return;

    UIImage *img = self.frames[index];

    UIImageView *imgIn;
    UIImageView *imgOut;

    float speed = (index <= self.frames.count / 2) ? 0.1 : 1; // first half : second half speed.

    if (index % 2 == 0) {
        imgIn = self.animationImageViewOne;
        imgOut = self.animationImageViewTwo;
    }
    else {
        imgIn = self.animationImageViewTwo;
        imgOut = self.animationImageViewOne;
    }

    imgIn.image = img;

    [self.view sendSubviewToBack:imgIn];
    [self performSelector:@selector(performAnimationOfFrameAtIndex:) withObject:[NSNumber numberWithInt:index+1]  afterDelay:speed];
}

Upvotes: 3

matt
matt

Reputation: 535159

I don't think the above will allow me to do this, just wondering what a better approach would be.

Actually, it will. You just need to repeat the images as you form the sequence. For the images in the first group, repeat each one twice before going on to the next one. For the images in the second group, repeat each one five times before going on to the next one. Now set the time for the total animation to 7 seconds. Since there are about the same number of images in each group originally, you can readily see that this means the first group will take about 2 seconds and the second group will take about 5 seconds.

Upvotes: 2

Related Questions