Animation

There are different techniques for creating animations. Animated image sequences display a series of static images to create one-time or looping animations. You can also animate the layout and appearance of labels and other items by changing their size, alignment, color, or transparency. When designing animations, keep the following guidelines in mind:

Keep animations short. Short animations convey the needed information and do not keep the user waiting. Shorter animations also feel more lightweight and less intrusive.

Create animations that have a specific 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 never create animations just because you can.

Do not use layout animations in your notification interfaces. Animate the layout and appearance of interface elements only in your watchOS app. You can use SpriteKit, SceneKit, or image sequences to create animations in your notification interfaces.

Minimize the number of concurrent animations. Running many animations at the same time will affect the smoothness of those animations and will affect the responsiveness of your app.

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

Layout and Appearance Animations

You can animate changes to the layout and appearance of all interface elements. Animated layout changes let you modify the size of elements or change different aspects of layout dynamically. You can move elements onscreen or realign their contents. You can also animate changes to the appearance of elements, including changing their background color or opacity. These types of animations let you create dynamic interfaces that respond to user interactions and provide better feedback.

All layout- and appearance-based animations have built-in easing applied automatically at the start and end of the animation. You cannot turn off or customize easing.

You can animate changes to the following attributes of your interface elements:

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

Animated Image Sequences

An animated image sequence consists of two or more individual images displayed sequentially over time. Each image 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 control the playback speed, direction, and frame rate of animated image sequences programmatically for image and group elements. Other interface elements display the full animation in an endless loop.

Store images in your watchOS app bundle whenever 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 information about how to optimize your images, see Image Optimizations.

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.