Animation

Throughout watchOS, beautiful, subtle animations convey status, give people feedback on their actions, and enrich the visual experience. Using SwiftUI, you can create your own fully interruptible animations to show state changes within a view and transitions among views, or combine them into complex effects. For developer guidance, see Animating Views and Transitions.

As you design dynamic interfaces that respond to user interactions and provide visual feedback, keep the following guidelines in mind.

Keep animations short. Short animations convey the needed information without making people wait. Shorter animations also feel more lightweight and less intrusive.

Create animations that have a purpose. Animations should establish context and draw attention to a specific part of your interface. You can use animations to make your app feel more lively and engaging, but you should avoid creating animations just because you can.

Make animations optional. When the option to reduce motion is enabled in accessibility preferences, your app should minimize or eliminate app animations. For guidance, see Motion.

Using WatchKit Animations

SwiftUI provides a powerful and streamlined way to animate views in your app. If you must use WatchKit to animate layout and appearance changes or create animated image sequences, follow these guidelines.

NOTE All layout- and appearance-based animations automatically include built-in easing that plays at the start and end of the animation. You can’t turn off or customize easing.

Using WatchKit, you can animate changes to the following attributes of your app's UI elements:

  • Alignment
  • Background Color
  • Group Insets
  • Height
  • Opacity
  • Tint Color
  • Width

WatchKit also lets you create an animated image sequence, which consists of two or more individual images displayed sequentially over time. Each image in the sequence constitutes a single frame of the animation, and the whole animation runs in a loop unless you modify the playback behavior at runtime. You install animated image sequences primarily in image, group, and button elements of your interface.

You can programmatically control the playback speed, direction, and frame rate of animated image sequences for image and group elements. Other interface elements display the full animation in an endless loop.

Store images in your watchOS app bundle when possible. Storing images in your watchOS app bundle minimizes the delay in loading those images and showing the animation at runtime. Use this technique for animations that are part of your app’s design.

Optimize all images in your image sequences. Optimized images take less space on disk and load more quickly in some situations. For guidance, see Image Optimization.

Use the same image sequence for forward and reverse animations. Image sequences can be animated in reverse at runtime, eliminating the need to provide a set of duplicate images in reverse order. Using this technique reduces the size of your app.