SwiftUI: Animation

You’ve animated quite a few properties at the point: including color, position, and scale. But one kind of transformation we haven’t animated yet is rotation.

Your challenge is to animate the rotation of the thumbnail image from the last episode. If you’re not familiar with how to modify a view’s rotation, here’s a hint for you: use shift-command-L to bring up the library, and try searching for “rotation” in the modifiers tab.

If you practiced along with me in the last episode, that should be enough to get you going. Have fun!

Welcome back! Let’s do that thing I mentioned.

Shift-Command-L - select the modifiers tab - type “R-O-T”. That’s enough! That “rotation effect” is exactly what we need. Drag it into the list of modifiers for the image — first, let’s see what happens if we place it after the position modifier.

              y: 50
            )
            .rotationEffect(.zero)
            .scaleEffect((zoomed ? 4 : 1) / 3)

Zero rotation will be good for when we’re zoomed in…

.rotationEffect(zoomed ? .zero)

…But otherwise, let’s initialize another angle. You could use degrees, or radians.

.rotationEffect(zoomed ? .zero : Angle(radians: <#T##Double#>))

If you’re using radians, you generally will want use use some multiple of pi. Two pi is a full circle.

Angle(radians: 2 * .pi)

And that’s a rotation effect, alright! But it’s not the one from the episode introduction. For that, you’ll need to remember that the order of transformations is important.

Watch what happens when we rotate before positioning…

            .saturation(zoomed ? 1 : 0)
            .rotationEffect(zoomed ? .zero : Angle(radians: 2 * .pi))
            .position(

Very different! And you could change the order of the angles. If you did that, the savantelope would reverse when it’s doing a somersault, versus a backflip. I like it this way.

Except, with a little more acrobatic flair.

            .rotationEffect(zoomed ? .zero : Angle(radians: 6 * .pi))