CODEWITHSUNDEEP
iosobjective-canimationuikit
Thomas Jadallah
Thomas Jadallah

Reputation: 33

Speed up animateWithDuration method incrementally

How can I speed up my animation while it is running? I am using animateWithDuration for the animation, and essentially it expands a rectangle to cover my screen, as well as moves a label. I would like to be able to increase the speed of the animation over time, if possible.

Here is my code for my animation:

-(void)animatedFill{
    CGRect frame = _rectAnimated.frame;
    self.rectAnimated.backgroundColor = [UIColor systemOrangeColor];
    CGFloat height = ([UIScreen mainScreen].bounds.size.height);
    self.rectAnimated.hidden = false;
    frame.origin.y = 0;

    frame.size.height = height;
    [UIView animateWithDuration:(timerSeconds)
                            delay:0.0
                          options: UIViewAnimationOptionCurveEaseOut
                       animations:^{
                        [_timerSecondsText setFrame:CGRectMake(0, 130, 375, 69)];
                           _rectAnimated.frame = frame;
                       }
                       completion:^(BOOL finished){
                           NSLog(@"Animation Done");
                       }];
    
}

I have tried creating a loop that keeps on animating the growth further and further, but what that ended up doing was creating multiple, quick burst that were really stuttery. If you know how to do this, let me know, I'd really appreciate any help.

Thanks!

Upvotes: 1

Views: 146

Answers (1)

Rob
Rob

Reputation: 438277

Rather than trying to manually “speed up” an animation, we generally just provide a timing curve when we start the animation. And for ultimate control over this curve, rather than animateWithDuration, consider UIViewPropertyAnimator

But let’s say that you wanted it to speed up as the animate progresses. Often, we'd simply “ease” in slowly:

UIViewPropertyAnimator *animator = [[UIViewPropertyAnimator alloc] initWithDuration:4 curve:UIViewAnimationCurveEaseIn animations:^{
    self.subview.frame = ...;
}];
[animator startAnimation];

That just starts slowly, and speeds up, but quickly settles into a relatively even speed. If you really want something more dramatic, you could give it your own custom timing curve (which gives you ultimate control by specifying “control points” of the timing curve’s Bézier):

UIViewPropertyAnimator *animator = [[UIViewPropertyAnimator alloc] initWithDuration:4 controlPoint1:CGPointMake(0.9, 0) controlPoint2:CGPointMake(0.9, 0) animations:^{
    self.subview.frame = ...;
}];

[animator startAnimation];

You can play around with various values (rather than 0.9 and 0 in my example above) to achieve different effects.

Here is an example, showing three different timing functions, “linear”, “ease in”, and my custom timing function curve.

enter image description here

See WWDC video Advanced Animations with UIKit for a good introduction to these view property animators.

By the way, view property animators actually give you the opportunity to dynamically change the timing curve mid-animation. It’s generally used, though, when you are going to interrupt and resume an animation on the basis of user interaction. In this case, specifying the desired timing curve up front will likely be sufficient.

Upvotes: 3

Related Questions