Best Practices for Animation

  • Article

For best results, abide by the following guidelines for using animation:

  • First, design and implement your UI without animations or transformations to ensure the UI works as expected. For example, ensure the UI responds correctly to user input and that the UI is displayed correctly in widescreen format.

    Next, add transformations such as static scales and rotations, and ensure everything continues to work correctly.

    Finally, add animations as follows:

    • For "Show" animations, you typically set the last keyframe to be RelativeTo="Final".
    • For "Hide" animations, you typically set the first keyframe to be RelativeTo="Current".
    • For "Idle" and other animation types (such as "Move", "Scale", "Size" and "Rotation"), you typically set the first keyframe to be RelativeTo="Current", and your last to be RelativeTo="Final".

  • When designing your application, rather than using animation to move navigation panels and z-ordering to clip them, consider using a layout-based approach by displaying the panels in a flowing layout. When a panel is selected, make its sub-content visible (set Visible to true), and hide that content when the panel is not selected. This approach means that the panels are not clipped or overlapping. After ensuring that the panels work as expected without using animation, you can introduce animation to polish the appearance.

Sample Explorer

  • Animation – Keyframes > all samples
  • Animation – Modifiers > all samples
  • Animation – Interpolations > all samples
  • Animation – Types > all samples
  • Animation – Transform > all samples
  • Animation – Transform By Attribute > all samples

See Also