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:
Resources
- Source code for sample: interactive segments on an animation timeline
- The resulting page in the Lottie Samples application
- AnimatedVisualPlayer API reference
- Help + feedback
Commentaires
https://aka.ms/ContentUserFeedback.
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultezEnvoyer et afficher des commentaires pour