AnimatedIcon

[MarissaMatt]

Initial Commit of AnimatedIcon spec

[MarissaMatt]

@mdtauk yes I plan on providing more examples that describe what you are looking for with custom states in he visual state manager. An example of how we plan to use this within WinUI is with the CheckBox control. The Checkbox control has states that include PressedOn and PressedOff and PointerOver On/Off states and we update the template for checkbox to look for the markers with these state transitions so AnimatedIcon will play the correct animation segment that translates to the visual state transition. @StephenLPeters Martin's comment about a custom state (like BluetoothOff) is an interesting one. If a developer puts a custom state string in to the template would AnimatedIcon still play the correct segment?

To answer your theming question, you can update the Lottie file json to specify a themable color but we do not have a way to animate the custom color to a different color. In AnimatedIcon we are exposing a few color names (foreground and accent) through the interface but the developer could set any color in the lottie file via the c++/c# type rather than using the interface. Depending on the amount of customization you want to do with the colors it might make more sense to use AnimatedVisualPlayer since that has more customizations than this control.

Do you mind expanding on your progress ring example? Progress animations are interesting because we explored creating a custom progress control that will give the developer a way to add their own animation but have all of the same properties and accessibility behaviors as the ProgressRing/ProgressBar.

[mdtauk]

@mdtauk yes I plan on providing more examples that describe what you are looking for with custom states in he visual state manager. An example of how we plan to use this within WinUI is with the CheckBox control. The Checkbox control has states that include PressedOn and PressedOff and PointerOver On/Off states and we update the template for checkbox to look for the markers with these state transitions so AnimatedIcon will play the correct animation segment that translates to the visual state transition. @StephenLPeters Martin's comment about a custom state (like BluetoothOff) is an interesting one. If a developer puts a custom state string in to the template would AnimatedIcon still play the correct segment?

As an illustration here is the Bluetooth Icon, and the off state has a line through it, and an area cut off. Plus there is a Searching and Connected state - so if this were an Animated Icon, it would need to transition through these.

https://user-images.githubusercontent.com/7389110/104635682-2cb5db00-569a-11eb-8dfc-ce0d136295de.mp4 Example from Material Design

To answer your theming question, you can update the Lottie file json to specify a themable color but we do not have a way to animate the custom color to a different color. In AnimatedIcon we are exposing a few color names (foreground and accent) through the interface but the developer could set any color in the lottie file via the c++/c# type rather than using the interface. Depending on the amount of customization you want to do with the colors it might make more sense to use AnimatedVisualPlayer since that has more customizations than this control.

When I saw the new control transitions for Sliders, and ToggleSwitches, I guessed the Checkbox would be ideal for this control.

Do you mind expanding on your progress ring example? Progress animations are interesting because we explored creating a custom progress control that will give the developer a way to add their own animation but have all of the same properties and accessibility behaviors as the ProgressRing/ProgressBar.

The ProgressRing does use a Lottie player now. But something like this example found on pintrest

The progress ring animation would keep looping until the loading is complete, where it transitions into the tick icon animation

[mdtauk]

Will you consider adding support for Looping animations within a visual state. So for example, the Settings gear could continuously rotate while it is in the PointerOver state, as you hover over it.

[MarissaMatt]

Will you consider adding support for Looping animations within a visual state. So for example, the Settings gear could continuously rotate while it is in the PointerOver state, as you hover over it.

That is something I haven't thought about for the first version of this but I could definitely see the use case for it! Or maybe having a property that you can control the number of times the segment is played? So the settings gear could rotate 4 times then stop?

[mdtauk]

Will you consider adding support for Looping animations within a visual state. So for example, the Settings gear could continuously rotate while it is in the PointerOver state, as you hover over it.

That is something I haven't thought about for the first version of this but I could definitely see the use case for it! Or maybe having a property that you can control the number of times the segment is played? So the settings gear could rotate 4 times then stop?

Yea, so maybe something like:

<AnimatedIcon>
    <AnimatedIcon.StateProperty="PointerOver" Loop="4" />
</AnimatedIcon>

AnimatedIcon.StateProperty.Loop

• null = no loop
• int = number of loops
• "Forever" = keep looping whilst in this state

---

Also there could be a Loop.Behavior

• "Smooth" = waits for an animation loop to finish before changing to the next state
• "Immediate" = switches state immediately which may exhibit frame jumps

[MikeHillberg]

Completing this PR that got dropped. Moved most of the open issues into "issue:" text in the doc.