swift animateKeyframes withRelativeStartTime not working

Question

I want to achieve an animate: Each cell rightImage move first, and after rightImage moved, the backgroundImage(which is a gif) start to animating. However, the moving animation and gif startAnimating always start at the same time. Like the demo below:

Here is Debug Log which print moving timestamp and animating timestamp:

<<< start index:  0
>>> start transfrom 2023-04-04 10:32:39
>>> start animating 2023-04-04 10:32:39
<<< start index:  1
>>> start transfrom 2023-04-04 10:32:43
>>> start animating 2023-04-04 10:32:43
<<< start index:  2
>>> start transfrom 2023-04-04 10:32:47
>>> start animating 2023-04-04 10:32:47

Here is my animation code:

func startMoving() {
        let duration: Double = 4
        UIView.animateKeyframes(withDuration: duration, delay: 0, options: [.calculationModeLinear], animations: {
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.7/duration, animations: {
                print(">>> start transfrom")
                self.frontImageView.transform = CGAffineTransform(translationX: -20, y: 0)
            })
            UIView.addKeyframe(withRelativeStartTime: 0.7/duration, relativeDuration: 1.5/duration, animations: {
                print(">>> start animating")
                self.backgroundImageView.startAnimating()
            })
        }, completion: { _ in
            self.backgroundImageView.stopAnimating()
        })
    }

instead of ```calculationModeLinear``` try using ```calculationModeDiscrete``` — udi, Apr 04 '23 at 04:34
this dose not help, I tried and I believed that the option can only control the speed of animation. — malcopolocei, Apr 04 '23 at 05:56
I'm not sure if this is the problem but your relativeDuration values don't add up to 1.0. They are supposed to. Also, why are you trying to animate a gif? Why don't you just delay animating the gif until the other animations are complete? — Rob C, Apr 04 '23 at 07:33
the reason to control the gif is that I want to control it play in a certain seconds. — malcopolocei, Apr 06 '23 at 03:13

DonMag · Accepted Answer · 2023-04-04T17:32:33.907

Couple of things...

1 - you are using relative start time and relative duration incorrectly

2 - keyframe animation don't work the way you think they do

The relative times are a percentage of the duration.

If you want the first keyframe to start immediately, and run for 70% of the total duration, it should look like this:

UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.7, animations: {

and you want the second keyframe to start when the first animation ends (so, 70% from the start), and run for the remainder:

UIView.addKeyframe(withRelativeStartTime: 0.7, relativeDuration: 0.3, animations: {

So, let's changing the timing parameters, and add a couple more print() statements:

func startMoving() {
    let duration: Double = 4
    
    UIView.animateKeyframes(withDuration: duration, delay: 0, options: [.calculationModeLinear], animations: {
        
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.7, animations: {
            print(">>> start transfrom")
            self.frontImageView.transform = CGAffineTransform(translationX: -20, y: 0)
        })
        UIView.addKeyframe(withRelativeStartTime: 0.7, relativeDuration: 0.3, animations: {
            print(">>> start animating")
            self.backgroundImageView.startAnimating()
        })
        
    }, completion: { _ in
        print(">>> completion")
        self.backgroundImageView.stopAnimating()
    })
    
    print(">>> end of startMoving()")
}

What you'll see in the debug console is immediately:

>>> start transfrom
>>> start animating
>>> end of startMoving()

and at the end of 4-seconds:

>>> completion

However, you'll still see the animation begin at Zero.

Keyframe animation does not wait to execute code. Inside the UIView.animateKeyframes block, UIKit analyzes all of the addKeyFrame segments immediately, and then "plays the animation."

That's why the resulting animation will look different depending on the KeyFrameAnimationOptions (.calulationMode... values).

Logically, we think that this line: self.backgroundImageView.startAnimating() will execute at 70% of the total duration. In reality, it executes when UIKit builds the animation, which is why your image view animation begins at the start.

If you want the "front" view to slide over, and then start the image view animation, you need to play the slide-over animation and start the image view animation when that has completed.

Something along these lines:

func startMoving() {
    let duration: Double = 4.0 * 0.7
    
    UIView.animate(withDuration: duration, animations: {
        print(">>> start transfrom")
        self.frontImageView.transform = CGAffineTransform(translationX: -20, y: 0)
    }, completion: { _ in
        print(">>> start animating")
        // maybe set imageView animation properties...
        self.backgroundImageView.animationRepeatCount = 1
        self.backgroundImageView.animationDuration = 1.0    // 1-second to cycle through all images
        self.backgroundImageView.startAnimating()
    })
    
    print(">>> end of startMoving()")
}

Yes, I put it in frontImage's completion block and it works. Thanks, I have noticed the UIKIt will execute code immediately. This answer is right! Thanks again. — malcopolocei, Apr 06 '23 at 03:17

swift animateKeyframes withRelativeStartTime not working

1 Answers1