Edit

Interactive Segments on an Animation Timeline

  • Article

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