Timing Animation Help

📚 Official Books iOS Animations by Tutorials
1

I’m just working through the book, which is great, but I’m trying to make a circle expand to a count of 3 seconds, then pause for 3 seconds then shrink back down to the original size over 6 seconds - is there any way of doing this with autoreverse and changing timings please? Or any suggestions about how to achieve this please?
Thank you

2

This sounds like a pretty good use case for key frame animations, where you set the overall duration and then add keyframes for the individual components.

The code could look something like this:

UIView.animateKeyframes(withDuration: 1, delay: 0, options: [], animations: { ...

    UIView.addKeyFrame .... {
    //Add growth animation
    }

    UIView.addkeyFrame... {
    //Add reverse animation
    }

}

With keyframe animations you can specify the relative duration of the key frames (from zero to one) that will tell the animation what percent of the overall duration should be taken up with that specific keyframe animation.

Hope this helps!

3

That’s great - thank you

4

Just to follow up - I’m a little confused about using keyframes with constraint animations - for example :

@IBAction func startAnimation(_ sender: Any) {
     blnSizeStart = !blnSizeStart
    view.layoutIfNeeded()
    
    UIView.animateKeyframes(withDuration: 6, delay: 0, options: [], animations: {
        
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25, animations:  {
            self.imageWidthConstraint.constant = 200.0
            self.imageHeightConstraint.constant = 200.0
            //Add growth animation
        }
            )
        
        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.75, animations:  {
            self.imageWidthConstraint.constant = 150.0
            self.imageHeightConstraint.constant = 150.0
            //Add growth animation
        }
        )
    },

completion: nil
)

/* UIView.animate(withDuration: 6, delay: 0.0, options: .curveEaseIn, animations: {
self.view.layoutIfNeeded()
}, completion: nil) */
}

To get the keyframe animations to work with keyframes, I presume I’m not sure if I need to add the commented code at the bottom somewhere and if so where? Thanks for any help.

5

That’s a good question! I’m not 100% certain off the top of my head. My hunch, however, would that you would add it in both of the key frames (where you specify the constraint constants). This is probably a bit late, but thought I’d give you my 0.02.

Were you able to get it working?