Utilizing PhaseAnimator to Create Superior Animations in SwiftUI

SwiftUI already streamlines the creation of view animations. One instance is the matchedGeometryEffect modifier, which allows builders to outline the looks of two views. The modifier calculates the disparities between the 2 views and routinely animates the scale and place modifications. With iOS 17, Apple continues to enhance the SwiftUI framework and supply a brand new view referred to as PhaseAnimator, which permits us to construct extra refined animations.

On this tutorial, we’ll discover the capabilities of PhaseAnimator and learn to put it to use to create multi-step animations.

Constructing a Easy Animation with PhaseAnimator

The PhaseAnimator view, or the .phaseAnimator modifier, lets you generate multi-step animations. By biking by way of a group of phases that you simply present, every representing a definite step, you’ll be able to create dynamic and fascinating animations.

Let me give a easy instance, so you’ll perceive the right way to work the part animator. We are going to animate the transformation of a rounded rectangle. It begins as a blue rectangle, then scales up, modifications colour to indigo, and incorporates a 3D rotation animation.

We will use the RoundedRectangle view to create the rounded rectangle and connect the phaseAnimator modifier to the rectangle like this:

Inside the part animator, we specify two phases: false and true. The view builder closure takes two parameters. The primary parameter is a proxy worth that represents the modified view. The second parameter signifies the present part.

When the view initially seems, the primary part (i.e. false) is lively. We set the dimensions to 50% of the unique measurement and the foreground colour to blue. Within the second part, the rectangle scales again to its unique measurement and the colour transitions to indigo.

The part animator routinely animates the change between these two phases.

To create the 3D rotation animation, you’ll be able to connect the rotation3DEffect modifier to the content material view like under:

If you wish to customise the animation, phaseAnimator additionally gives the animation parameter for outlining your most popular animation. Primarily based on the given part, you’ll be able to specify the animation for use when shifting from one part to a different. Right here is an instance:

Utilizing Enum to Outline Multi Step Animations

Within the earlier instance, the animation consisted of solely two phases: false and true. Nevertheless, in additional advanced animations, there are sometimes a number of steps or phases concerned. On this case, an enum is a good way to outline a listing of steps for the animation.

Let’s contemplate an instance of animating an emoji icon with the next steps:

1. Initially, the emoji icon is centered on the display.
2. It scales up by 50% and rotates itself by 720 levels.
3. Subsequent, it strikes upward by 250 factors whereas concurrently cutting down by 20%.
4. Then, it strikes downward by 450 factors. Whereas descending, it rotates itself by 360 levels and scales down by 50%.
5. Lastly, it returns to its unique place.

With these steps, we will create a dynamic animation for the emoji icon.

To implement this multi-step animation, we will outline an enum like this:

On this enum, we’ve got 4 instances that characterize totally different steps of the animation. Throughout every part, we carry out scaling, rotation, or motion on the emoji icon. To perform this, we outline three computed properties for every motion. Inside every property, we specify the values for the actual animation part or step.

As an example, within the “rotate” part, the emoji needs to be scaled up by 50% and rotated by 720 levels. The scale property returns 1.5, and the angle property returns Angle(levels: 720).

With the Section enum, we will now simply animate the emoji with the part animator like under:

The Section.allCases routinely informs the part animator concerning the out there phases. Relying on the given part, the emoji icon is scaled, rotated, and moved in keeping with the computed values.

To customise the animation, we will specify a specific animation, akin to snappy, for various phases as an alternative of utilizing the default animation.

Utilizing Triggers

At the moment, the part animator initiates the animation routinely and repeats it indefinitely. Nevertheless, there could also be conditions the place you favor to set off the animation manually. In such instances, you’ll be able to outline your standards by specifying the specified circumstances within the set off parameter of the part animator.

For instance, the emoji animation needs to be triggered when a person faucets on it. You possibly can first declare a state variable like this:

Subsequent, you replace the phaseAnimator modifier by including the set off parameter:

After making the code modifications, the animation will solely be triggered when the worth of startAnimation is switched from false to true. To attain this, connect the onTapGesture modifier to the Textual content view.

When a person faucets the emoji, we toggle the worth of startAnimation. This triggers the multi-step animation.

Abstract

The introduction of PhaseAnimator has made the method of making multi-step animations extremely easy. Through the use of an enum to outline what modifications ought to occur at every step of the animation, you’ll be able to create dynamic and fascinating animations with just some strains of code. SwiftUI’s PhaseAnimator, together with different useful options, takes care of the exhausting give you the results you want, so builders can give attention to making spectacular animations with none problem.

In case you take pleasure in studying this tutorial, you’ll be able to proceed to take a look at our Mastering SwiftUI guide to be taught extra concerning the SwiftUI framework.