Interactive Segments on an Animation Timeline

Lottie-Windows may be used to create interactive controls such as animated icons or first-run experiences which may be comprised of several behaviors that depend upon the user's input. Instead of using multiple JSON files, it’s possible to use a single Lottie animation with multiple segments designed into its timeline. For instance, the following ToggleButton behaviors are contained in the LightBulb Lottie animation timeline:

• Unchecked: static frame at progress 0.
• Pointer Hovered: animation segment between 0 and 0.35, looped.
• Pointer Clicked: animation segment between 0.35 and 1, play once.
• Checked: static frame at progress 1.

To configure the playback of the relevant animation segments based on PointerEntered / Exited / Pressed events, we build upon the previous scenarios as follows:

 <Border Style="{StaticResource LottiePlayer}">
 <!--AnimatedVisualPlayer with AutoPlay disabled-->
 <controls:AnimatedVisualPlayer x:Name="player"
 AutoPlay="False"
 x:Name="player"
 PointerEntered="Player_PointerEntered"
 PointerExited="Player_PointerExited"
 PointerPressed="Player_PointerPressed">
 <!--Codegen class AnimatedVisuals/LightBulb.cs-->
 <animatedvisuals:LightBulb/>
 </controls:AnimatedVisualPlayer>
 </Border>

 private static readonly (double fromProgress, double toProgress, bool looping) s_hoveredSegment = (0, 0.35, true);
 private static readonly (double fromProgress, double toProgress, bool looping) s_clickedSegment = (0.35, 1, false);
 private bool _isChecked;

 private void Player_PointerEntered(object sender, PointerRoutedEventArgs e)
 {
 if (player.IsPlaying)
 {
 // Must be playing "Clicked": do nothing.
 }
 else
 {
 if (!_isChecked)
 {
 // Play "Hovered" segment of the animation.
 _ = player.PlayAsync(s_hoveredSegment.fromProgress, s_hoveredSegment.toProgress, s_hoveredSegment.looping);
 }
 }
 }

 private void Player_PointerExited(object sender, PointerRoutedEventArgs e)
 {
 if (player.IsPlaying && !_isChecked)
 {
 // Stop playing "Hovered" segment, which also resets the animation to its initial frame.
 player.Stop();
 }
 }

 private void Player_PointerPressed(object sender, PointerRoutedEventArgs e)
 {
 if (_isChecked)
 {
 // Reset to Unchecked state if already Checked.
 _isChecked = false;
 player.SetProgress(0);
 }
 else
 {
 // Play "Clicked" segment of the animation.
 _isChecked = true;
 _ = player.PlayAsync(s_clickedSegment.fromProgress, s_clickedSegment.toProgress, s_clickedSegment.looping);
 }
 }

This results in the following interactive animated ToggleButton icon:

👁 Segments Gif

Resources

• Source code for sample: interactive segments on an animation timeline
• The resulting page in the Lottie Samples application
• AnimatedVisualPlayer API reference
• Help + feedback