How to create simple swiftUI animations

How to create simple swiftUI animations? SwiftUI brings a lot of new features and an easier way to write user interface code on all Apple platforms. As a bonus, it also has a new way to animate state transitions. If you are used to UIView animations, you may find them easier to write and understand. If you are using SwiftUI, congratulations! This will help you to create simple swiftUI animations.
You can read the other articles on the itmagazine to learn about the latest news and also to view other related articles.

Quick Access hide

XCode

Mojave

Getting Started

HStack

Preview

Note:

Basic animation

Complete the task

XCode

How to create simple swiftUI animations? It is best to use Xcode 11.2.1 or higher, which contains fixes for known animation bugs in SwiftUI code. If you are running macOS Catalina, this will be easier for you because Xcode will display the code and live preview side by side in the Canvas panel.

Mojave

But if you still have the Mojave, that’s okay; you just need to compile and run to see how your code changes affect your application. In fact, this technique is still useful in Catalina, because the preview window may have problems. This tutorial assumes that you have a working knowledge of SwiftUI. You should be familiar with components such as Text, Image, HStack, and VStack. If you’re just getting started with SwiftUI, check out this tutorial first.

Getting Started

How to create simple swiftUI animations? The MySolarSystem tutorial app is a simple list of planets in your solar system (assuming you’re reading this article about Earth). When done, clicking on a row will display a list of each planet and its largest satellite. From there, clicking on the moon will provide the user with more information about the planet.

HStack

Content View represents the main screen of the application. It is a list of tables made from the planet matrix. Each item in the list is an HStack with several controls: an image representing an image of a planet, a text representing the name of the planet, a spacer, and a button, if the planet has a satellite. The purpose of this button is to display information about satellites. You will put the optional MoonList in VStack. Click the moon button to show or hide it. This will be the first thing you add and make animations.

Preview

If you are running macOS Catalina, you can access the canvas in the editor panel. If you don’t see it, please enable it by choosing Editor ▸ Canvas. This will show the view and update in real time as the code changes. Clicking the live preview button (also known as the play icon) will make the preview interactive. After adding animation and interactivity, you can click the button and watch the state change.

Read more: What is Bash on the windows

Note:

When you are writing, the preview window is not 100% reliable. If the preview stops updating, check for the message at the top of the canvas: Auto-update preview has been paused. If you see it, just click “Restore” to rebuild the preview. Also, if the animation doesn’t seem to work, double check by running the app on the emulator or device. Realtime applications are the true source of any user interface behavior.

Basic animation

To add animation, the first thing you need is animation. So first you will create a state change that triggers a UI refresh. Open ContentView.swift and add the following to the end of VStack in makePlanetRow (planet :): This will check toggleMoons (_ 🙂 to determine if the planet row should be changed. If the satellite is on, a MoonList view will appear in VStack. This method is associated with the showMoon status attribute.

Complete the task

Next, complete the operation by setting the showMoon property. In the button action callback, add the following code: If the user has pressed the button, this code clears showMoon, or if the user selects a different row, it is set to a new planet. Build and run the application. Clicking on the line with the “Moon Disclosure” icon will display a cartoon map and a list of the largest satellites on the planet. The size of the button is also doubled to attract attention. This way, the user knows where to click to close the row.