Proposal: AnimatedIcon Control

[traore-i]

Proposal: AnimatedIcon Control

Summary

Lottie-Windows allows developers to easily integrate animations made on Adobe After Effects into their apps on the Windows platform, which are played using the AnimatedVisualPlayer. Currently, developers do not have an easy workflow for integrating interactivity and state changes to Lottie animations. Today, on Windows, icons are mostly static. Icon animations are user interface elements that react to user input and state changes.

Rationale

• In the current workflow for Windows, developers may need to write a lot of code when getting their generated animation to properly respond to user interaction. An AnimatedIcon would greatly reduce, or ideally eliminate the amount of code-behind needed to implement most scenarios.

• An AnimatedIcon would facilitate the implementation of fluid icon animations and transitions that respond to user interaction and state changes on Windows. Developers would be able to control icon animations using a standard set of attributes, such as foreground color, animation speed, animation direction, etc.

• An AnimatedIcon will help bring cohesiveness to how Lottie animations are tied to interactivity across the Windows platform, and enable developers to use the same type of interactivity when integrating Lottie animations across different platforms.

Competitive Analysis

• The proposed AnimatedIcon would bring Lottie animations on Windows closer to feature parity with other platforms by enabling similar capabilities for animation interactivity.

• Lottie iOS provides two animated controls, AnimatedSwitch and AnimatedButton, which are built using AnimatedControl. AnimatedSwitch allows for a range of an animation to be associated with either the "On" or "Off” states of the control, while AnimatedButton associates animations to either Progress Time or Markers after a button press. These controls provide a way of controlling an animation, based on the “UIControl.State” of the specified control.

• On the Android platform, interactions are mainly tied to animations with the use of event handlers and listeners. For example, developers can use an “onLongClick” listener, to trigger the playing of an animation. The playing of the animation is controlled using a wrapper of ImageView, called LottieAnimationView.

• LottieFlow is a library of common icons and controls including options for displaying media control, menus, search, and progress scenarios. These animations can then be implemented into the web using popular platforms like Webflow and Elementor. These platforms then enable developers to tie their animations to popular user interactions on the web, like hover over and out, first and second click, scroll progress, and many more.

Scope

Capability	Priority
Allow developers to implement AnimatedIcons using a predetermined set of attributes.	Must
Provide developers with the flexibility to use AnimatedIcons based on user interaction and state changes for playing custom animations.	Must
Enable developers to easily configure AnimatedIcons using markup.	Must
Clearly define the roles of AnimatedIcon and AnimatedVisualPlayer in relevant documentation to ensure developer clarity.	Must
Provide developers with a set of animated assets equivalent to MDL2 glyphs.	Could

Important Notes

General Requirements:

• An AnimatedIcon should be able to play based on the user interaction method. In other words, they can be activated by either mouse, touch, or other input methods, and play the appropriate corresponding animation. The control should not require code-behind to implement most scenarios.

• Scenarios during which animations should be stopped:

  • Stop animations when animations are disabled in System Settings > Display > Show animations in Windows.
  • Stop animations when the UI element is not visible, to save battery power.
  • Stop animations when the app is minimized.

• Using markup, an AnimatedIcon should have the ability to drive different positions of the animation based on user interaction and state changes.

• An AnimatedIcon’s attributes will be controlled using the VisualStateManager.

User Scenarios covered within the scope of this control:

• An icon animation will play based on user input or changes of state for basic XAML input controls, like buttons and toggle switches. Segments of animations, or full Lottie animations will play for transitions between states. For a toggle switch, this may look like the following:
  1. Animation plays when the user hovers over the toggle switch.
  2. Animation plays when the user switches the state from TRUE to FALSE.
  3. Animation plays when the user switches the state from FALSE to TRUE.

• An icon animation will play based on changes of state for external controls and functions (e.g. applications building First Run and Login experiences).
  1. Animation plays to represent a successful or failed login attempt.
     
• Animation progress will correspond to the value of a setting. For volume control, this may look like the following:
  1. When a user mutes the volume, the volume icon at the current position will switch to the mute position.
  2. When a user increases or decreases the volume, the volume icon will switch to correspond to the new setting value.
  3. When a user unmutes their volume, the volume icon will switch from the mute position to the previously set volume position.
     

Open Questions

• Should AnimatedIcon only support a fixed set of Lottie animations?

[ratishphilip]

This is certainly a very good move in the right direction.

I have a suggestion - Would it be useful, if the AnimatedIcon could host multiple AnimationLayers. Each of these layers can host a single Lottie animation. Each layer can define the animation duration, delay time etc.
That way the developer can mix and match different lottie animations if needed.

[traore-i]

Hi @ratishphilip , thanks for the suggestion! The ability to host multiple AnimationLayers would definitely be an interesting addition. We're currently thinking of including animation segments, which may help cover some of the use cases of an AnimationLayer. Are there any specific scenarios where you would want to use an AnimationLayer?

[ratishphilip]

Hi @traore-i , sorry for the late reply.
I do not have a specific scenario right now.
But to think of it, the ability to host multiple layers could help in updating the layer at runtime based on the user actions.
Say there is a button displaying an AnimatedIcon and has 3 animationlayers. Based on the user choice (or say, user role), the top layer can display different animation while the bottom two layer remain the same.
Support for Binding for the animationlayer would help too.

[mdtauk]

Would this include blank after effects projects as a template for these icons?

[MarissaMatt]

@ratishphilip we are also considering adding support for markers or animation segments so you can control which part of the animation is played when a user interacts with it by hovering or press. Would support for multiple layers be to handle scenarios where the animation would need to respond to different interactions an end user could have?

@mdtauk that is a very good question. We are also considering creating a library or asset list similar to the MDL2 glyphs that SymbolIcon uses but that is still just a discussion for now. If we included blank after effects projects are there certain properties you would want to see in the template?

[mdtauk]

The ability to assign a colour which would make use of the Accent Colour shades that the XAML resources provide.

A way to specify the starting frame of each animation state, maybe with a marker or label.

The icons should probably be made "Fluent Icon" ready, should the MDL2 icons be replaced in the future.

Also will it be possible to tie the animation to things other than clicks, like dragging animations for something like a ToggleSwitch, or a slider value?

[ratishphilip]

Would support for multiple layers be to handle scenarios where the animation would need to respond to different interactions an end user could have?

@MarissaMatt Yes that is the intended purpose for the layers. Another thing to consider would be to not to play the animation if the layer is hidden.

[MarissaMatt]

@mdtauk yes we are looking to handle button, toggle, and slider scenarios but the slider scenario is one we are still trying to work through. When you create Lottie animations do you use markers or labels to indicate each segment?

Could you go in to more detail on the color scenario you mentioned? I am thinking about colors in regard to making sure the icons respond to theming scenarios but I am not familiar with the accent color scenario specifically.

[mdtauk]

@MarissaMatt When the Progress Ring and Progress Bar controls updated to use Lottie animations, they made it possible for the animation shapes to use the Accent Colour, so it adapts to match the user's chosen colour. This also allows it to adapt for Light and Dark themes.

I think they made changes to the generated code to do this, but it would be good to be able to set this at design time within After Effects, so when it is used in Xaml, it will use the appropriate ThemeResource colours.

[ranjeshj]

@mdtauk I agree, the colors should be exposed by the codegen so the developer does not have to do extra work here. @simeoncran and I discussed this a while back - Lottie code gen can expose the colors as brushes that can be bound to theme resources.

[mdtauk]

Could the Fluent UI System Icons team be brought into this discussion and development effort. They are the ones who will be providing the Icons which will replace the Segoe MDL2 Icons - and they may want to adjust their workflow to allow for the Animated states, and possibly to enable animated icon support for Android which I believe is the only other platform's Design Language which supports and encourages them.

@jasoncuster @spencer-nelson @thewoodpecker @willhou

Material Design - Animated Icons

Perhaps @anawishnoff @chigy @YuliKl may want to consider transition and state animations for the Buttons and basic input controls like the Checkboxes and Radio buttons.

[mdtauk]

Another thing, can an animation loop in one state, before transitioning to another state and stopping?

I am thinking of a loading scenario, before transitioning to a success state.

[MarissaMatt]

Another thing, can an animation loop in one state, before transitioning to another state and stopping?

I am thinking of a loading scenario, before transitioning to a success state.

@mdtauk I've been thinking about this and trying to determine if this is a scenario that could be part of the ProgressUI proposal (#1170). The benefit of having a control specific to progress scenarios is to take advantage of the accessibility requirements build in to progress controls and the APIs would be similar in structure to ProgressBar and ProgressRing. The ProgressUI proposal and this proposal have very similar goals so we would have to figure out if it makes sense to have both or to have everything under this control. What are your thoughts?

[mdtauk]

I posted some thoughts in the issue you mentioned.

Both this issue and the other one, would really on functionality added or tweaked to the Lottie control I think.

The ProgressRing and Progress at now use Lottie.

This proposal wants an AnimatedIcon based on Lottie.

Both of these controls could be used to form ProgressUI.

[mdtauk]

Has there been any thought as to how you would preview the animations and transitions at Design Time and in the Designer?

[MarissaMatt]

@mdtauk that is a great question and something we are definitely considering! My current thinking is to create a new tool that's geared towards designers to view the file at different marker transitions or we could possibly add this to the LottieWindows LottieViewer and maybe have the markers highlighted on the timeline so it's easy to see when the start and end of each animation is. Do you have any suggestions for things you would want to be able to visualize before giving a Lottie file to a developer?

[mdtauk]

@mdtauk that is a great question and something we are definitely considering! My current thinking is to create a new tool that's geared towards designers to view the file at different marker transitions or we could possibly add this to the LottieWindows LottieViewer and maybe have the markers highlighted on the timeline so it's easy to see when the start and end of each animation is. Do you have any suggestions for things you would want to be able to visualize before giving a Lottie file to a developer?

This is a very very rough mockup of something I think would be useful in the designer, but it could also appear in a preview panel docked alongside Properties or Objects and Timeline

Viewing the animations themselves in the LottieViewer is good to. And there should probably be a good deal of documentation, guidance (and possibly AfterEffects templates) for those who wish to create custom icon animations/transitions.

[MarissaMatt]

An AfterEffects template is something I haven't thought of yet so that is a great suggestion. For documentation we are thinking about publishing developer and designer documentation along with guidance on when/where animated icons should be used.

[mdtauk]

An AfterEffects template is something I haven't thought of yet so that is a great suggestion. For documentation we are thinking about publishing developer and designer documentation along with guidance on when/where animated icons should be used.

There is a gradual move from the MDL2 Icons to the new FluentUI Icons. It may be worth coordinating the introduction of this control, its documentation and design guidelines (as well as possibly a set of pre-made AnimatedIcons) to avoid having to re-do any work on them.

I would imagine something like the SymbolIcon would be useful, where there is an enum list of pre-made icons, given names - would be useful - as well as supporting the loading of custom icon animations.

[michael-hawker]

Is there an example of how to use this from start-to-finish with the WinUI 2.6 previews? @nishitha-burman @eliezerpMS

[nishitha-burman]

There is sample code in this branch in the Xaml Controls Gallery repo: https://github.com/microsoft/Xaml-Controls-Gallery/tree/feature/token-experiment/XamlControlsGallery/ControlPages