diff --git a/docs/lottie/assets/lottiedocs-async.gif b/docs/lottie/assets/lottiedocs-async.gif new file mode 100644 index 00000000..54df41d4 Binary files /dev/null and b/docs/lottie/assets/lottiedocs-async.gif differ diff --git a/docs/lottie/assets/lottiedocs-autoplay.gif b/docs/lottie/assets/lottiedocs-autoplay.gif new file mode 100644 index 00000000..02745ac6 Binary files /dev/null and b/docs/lottie/assets/lottiedocs-autoplay.gif differ diff --git a/docs/lottie/assets/lottiedocs-buildaction.png b/docs/lottie/assets/lottiedocs-buildaction.png new file mode 100644 index 00000000..90bd61c5 Binary files /dev/null and b/docs/lottie/assets/lottiedocs-buildaction.png differ diff --git a/docs/lottie/assets/lottiedocs-playback.gif b/docs/lottie/assets/lottiedocs-playback.gif new file mode 100644 index 00000000..485c63e8 Binary files /dev/null and b/docs/lottie/assets/lottiedocs-playback.gif differ diff --git a/docs/lottie/assets/lottiedocs-segments.gif b/docs/lottie/assets/lottiedocs-segments.gif new file mode 100644 index 00000000..65db3ea2 Binary files /dev/null and b/docs/lottie/assets/lottiedocs-segments.gif differ diff --git a/docs/lottie/assets/lottiedocs-workflow.png b/docs/lottie/assets/lottiedocs-workflow.png new file mode 100644 index 00000000..1877721b Binary files /dev/null and b/docs/lottie/assets/lottiedocs-workflow.png differ diff --git a/docs/lottie/async-play.md b/docs/lottie/async-play.md new file mode 100644 index 00000000..bb4a03fc --- /dev/null +++ b/docs/lottie/async-play.md @@ -0,0 +1,72 @@ +--- +title: The Asynchronous Play Method +author: sohchatt +description: Sample of the asynchronous play method for Lottie-Windows. +keywords: lottie, lottie-windows, animatedvisualplayer, bodymovin, aftereffects, windows 10, uwp, uwp community toolkit +--- + +# The Asynchronous Play Method + +So far, we’ve ignored the return value of the AnimatedVisualPlayer’s [PlayAsync](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.playasync) method: it returns an [IAsyncAction](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.playasync#returns) that completes when the animation reaches [toProgress](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.playasync#parameters) (if it isn’t also [looped](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.playasync#parameters)), or if the play is interrupted by the [Stop](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.stop) or [SetProgress](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.setprogress) methods, or if another [Source](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.source) is loaded into the player. By `await`ing the completion of PlayAsync, we can trigger application logic or playback other animation sequences in coordination with the current Lottie animation. + +To demonstrate this, we use two AnimatedVisualPlayer instances with _LightBulb.json_ to create the following pattern of animation sequences: + +![Async Gif](./assets/lottiedocs-async.gif) + +```csharp + private async Task PlayAnimationSequencesAsync() + { + // We await the completion of the PlayAsync method to create + // the following order of animation sequences: + // 1. A Hovered, then + // 2. B Hovered, then + // 3. A Clicked, then + // 4. B Clicked, then + // 5. A Hovered & B Hovered together, then + // 6. A Clicked & B Clicked together. + + PlayerABorder.BorderBrush = _highlightedBrush; + PlayerBBorder.BorderBrush = _disabledBrush; + await PlayerA.PlayAsync(s_hoveredSegment.fromProgress, s_hoveredSegment.toProgress, s_hoveredSegment.looping); + + PlayerABorder.BorderBrush = _disabledBrush; + PlayerBBorder.BorderBrush = _highlightedBrush; + await PlayerB.PlayAsync(s_hoveredSegment.fromProgress, s_hoveredSegment.toProgress, s_hoveredSegment.looping); + + PlayerABorder.BorderBrush = _highlightedBrush; + PlayerBBorder.BorderBrush = _disabledBrush; + await PlayerA.PlayAsync(s_clickedSegment.fromProgress, s_clickedSegment.toProgress, s_clickedSegment.looping); + + PlayerABorder.BorderBrush = _disabledBrush; + PlayerBBorder.BorderBrush = _highlightedBrush; + await PlayerB.PlayAsync(s_clickedSegment.fromProgress, s_clickedSegment.toProgress, s_clickedSegment.looping); + + PlayerABorder.BorderBrush = _highlightedBrush; + PlayerBBorder.BorderBrush = _highlightedBrush; + await Task.WhenAll(PlayerA.PlayAsync(s_hoveredSegment.fromProgress, s_hoveredSegment.toProgress, s_hoveredSegment.looping).AsTask(), + PlayerB.PlayAsync(s_hoveredSegment.fromProgress, s_hoveredSegment.toProgress, s_hoveredSegment.looping).AsTask()); + + PlayerABorder.BorderBrush = _highlightedBrush; + PlayerBBorder.BorderBrush = _highlightedBrush; + await Task.WhenAll(PlayerA.PlayAsync(s_clickedSegment.fromProgress, s_clickedSegment.toProgress, s_clickedSegment.looping).AsTask(), + PlayerB.PlayAsync(s_clickedSegment.fromProgress, s_clickedSegment.toProgress, s_clickedSegment.looping).AsTask()); + + PlayerABorder.BorderBrush = _disabledBrush; + PlayerBBorder.BorderBrush = _disabledBrush; + } + +``` + +If your scenario doesn’t require you to `await` the completion of PlayAsync, you may simply start the play and not keep track of it. In order to avoid a Visual Studio CS1998 compiler warning, we intentionally ignore the IAsyncAction returned from the PlayAsync method by using a [C# 7 discard](/dotnet/csharp/discards#a-standalone-discard) as follows: + +```csharp + // Play the animation once. + _ = player.PlayAsync(fromProgress: 0, toProgress: 1, looped: false); +``` + +## Resources + +* [Source code](https://github.com/windows-toolkit/Lottie-Windows/blob/rel/7.1.0/samples/LottieSamples/Scenarios/AsyncPage.xaml.cs) for sample: the asynchronous play method +* The resulting page in the [Lottie Samples application](https://aka.ms/lottiesamples) +* [PlayAsync](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.playasync) method +* [Help + feedback](https://github.com/windows-toolkit/Lottie-Windows/issues) diff --git a/docs/lottie/fallback.md b/docs/lottie/fallback.md new file mode 100644 index 00000000..c3057cb1 --- /dev/null +++ b/docs/lottie/fallback.md @@ -0,0 +1,41 @@ +--- +title: Handling Failure and Down-level +author: sohchatt +description: How to handle failure and down-level using the FallbackContent property in AnimatedVisualPlayer. +keywords: lottie, lottie-windows, animatedvisualplayer, bodymovin, aftereffects, windows 10, uwp, uwp community toolkit +--- + +# Handling Failure and Down-level + +The AnimatedVisualPlayer has a [FallbackContent](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.fallbackcontent) property that allows you to provide custom XAML to be displayed in cases where Lottie-Windows is unable to render the animation, such as: + +* a Lottie source that fails to load due to a malformed JSON file, incorrect URI, etc. +* your application running on a Windows 10 OS version **prior to 1809** (10.0.17763). + +The FallbackContent is of type [DataTemplate](/uwp/api/Windows.UI.Xaml.DataTemplate) — this ensures that your custom XAML tree is only instantiated when the AnimatedVisualPlayer needs to fallback. +In the example below, we use an Image as fallback for the Lottie animation: + +```xaml + + + + + + + + + + + + + +``` + +## Resources + +* [Source code](https://github.com/windows-toolkit/Lottie-Windows/blob/rel/7.1.0/samples/LottieSamples/Scenarios/FallbackPage.xaml) for sample: handling failure and down-level +* The resulting page in the [Lottie Samples application](https://aka.ms/lottiesamples) +* [FallbackContent](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.fallbackcontent) property +* [Help + feedback](https://github.com/windows-toolkit/Lottie-Windows/issues) diff --git a/docs/lottie/getting-started-codegen.md b/docs/lottie/getting-started-codegen.md new file mode 100644 index 00000000..e7fed4b4 --- /dev/null +++ b/docs/lottie/getting-started-codegen.md @@ -0,0 +1,69 @@ +--- +title: Using Codegen +author: sohchatt +description: How to use codegen in Lottie-Windows. +keywords: lottie, lottie-windows, animatedvisualplayer, bodymovin, aftereffects, windows 10, uwp, uwp community toolkit +--- + +# Using Codegen + +Consuming [Bodymovin](https://aescripts.com/bodymovin/) JSON files is the standard way of displaying Lottie animations on Web, Android, and iOS. However, this approach comes with the overhead of having to parse and translate JSON in your application’s process. You can get significant performance benefits by having Lottie-Windows generate the animation code as a C# or C++ class ahead of time, which may be used instead of the [LottieVisualSource](/dotnet/api/microsoft.toolkit.uwp.ui.lottie.lottievisualsource). Both approaches, JSON and Codegen, have the same visual outcome but [different workflows and benefits](./json-codegen.md). + +## Generating a C# or C++ class from JSON + +To generate a C# or C++ file from JSON use the [LottieGen](https://aka.ms/lottiegen) command-line tool. + +1. In your command-line interface, install the LottieGen tool from nuget: + + ``` + dotnet tool install -g LottieGen + ``` + +2. Generate classes in your desired language as follows: + + ``` + LottieGen -InputFile LottieLogo1.json -Language cs + ``` + +For additional information about additional options including optimizations, use `LottieGen -Help`. + +## Using the Codegen File + +1. Add the generated file, _LottieLogo1.cs_, to your project by following steps similar to those outlined previously. Ensure that the [Build Action](/visualstudio/ide/build-actions) for all codegen C# or C++ files is set to **Compile**. + +2. By default, all codegen classes are generated in the _AnimatedVisuals_ namespace. Modify your Page.xaml to include the namespace: + + ```xaml + xmlns:animatedvisuals="using:AnimatedVisuals" + ``` + +3. Install the [Microsoft.UI.Xaml nuget package](https://www.nuget.org/packages/Microsoft.UI.Xaml/) which contains the [AnimatedVisualPlayer](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer) element. Modify your Page.xaml to include the namespace: + + ```xaml + xmlns:controls="using:Microsoft.UI.Xaml.Controls" + ``` + +4. Instantiate the [AnimatedVisualPlayer](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer) element and configure its [Source](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.source) as follows: + + ```xaml + + + + + + + + ``` + +This should result in a looping Lottie animation that is visually identical to our earlier approach of using a JSON file: + +![Autoplay Gif](./assets/lottiedocs-autoplay.gif) + +## Resources + +* [Source code](https://github.com/windows-toolkit/Lottie-Windows/blob/rel/7.1.0/samples/LottieSamples/Scenarios/CodegenPage.xaml) for sample: getting started with Codegen +* The resulting page in the [Lottie Samples application](https://aka.ms/lottiesamples) +* [LottieGen](https://aka.ms/lottiegen) CLI tool +* [Lottie Viewer](https://aka.ms/lottieviewer) application for codegen and previewing JSON files +* A comparison of [JSON verus Codegen](./json-codegen.md) +* [Help + feedback](https://github.com/windows-toolkit/Lottie-Windows/issues) diff --git a/docs/lottie/getting-started-json.md b/docs/lottie/getting-started-json.md new file mode 100644 index 00000000..70603c42 --- /dev/null +++ b/docs/lottie/getting-started-json.md @@ -0,0 +1,59 @@ +--- +title: Getting Started with Lottie-Windows +author: sohchatt +description: How to use LottieVisualSource to load JSON in Lottie-Windows. +keywords: lottie, lottie-windows, animatedvisualplayer, bodymovin, aftereffects, windows 10, uwp, uwp community toolkit +--- + +# Getting Started with Lottie-Windows + +You probably have a JSON file that was exported from [Adobe AfterEffects](https://www.adobe.com/products/aftereffects.html) using the [BodyMovin](https://aescripts.com/bodymovin/) plugin. If not, you can find many from the [fantastic community](https://lottiefiles.com/) of Lottie designers and creators. Let’s bring these animations to your Windows applications with the following steps: + +1. _(Optional but Recommended)_ Install the [Lottie Viewer](https://aka.ms/lottieviewer) application from the Store and validate that the JSON file — _LottieLogo1.json_ in this example — works as expected. If there are any known issues due to unsupported AfterEffects features, the warning icon may light up and provide more context. + +2. Install the [Microsoft.UI.Xaml nuget package](https://www.nuget.org/packages/Microsoft.UI.Xaml/) which contains the [AnimatedVisualPlayer](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer) element. In your VisualStudio project: + * Go to the Nuget Package Manager by navigating to Project > Manage Nuget Packages. + * Check the _Include prerelease_ box and search for “Microsoft.UI.Xaml” in nuget.org. + * Install the latest prerelease version of the nuget package available. + + Modify your Page.xaml to include the namespace: + + ```xaml + xmlns:muxc="using:Microsoft.UI.Xaml.Controls" + ``` + +3. Install the latest [Microsoft.Toolkit.Uwp.UI.Lottie nuget package](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Lottie/) by following steps similar to those listed above. Modify your Page.xaml to include the namespace: + + ```xaml + xmlns:lottie="using:Microsoft.Toolkit.Uwp.UI.Lottie" + ``` + +4. Add the JSON file to your project: + * Add _LottieLogo1.json_ to the /AnimatedVisuals folder and include by right-clicking > Add > Existing Item. + * Set its [Build Action](/visualstudio/ide/build-actions) to **Content** in the Properties window. + + BuildAction + +5. Instantiate the [AnimatedVisualPlayer](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer) element and configure the [LottieVisualSource](/dotnet/api/microsoft.toolkit.uwp.ui.lottie.lottievisualsource) to be consumed: + + ```xaml + + + + + + + + ``` + +Since the [AutoPlay](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.autoplay) property is set to True by default, the result will be this looping animation: + +![Autoplay Gif](./assets/lottiedocs-autoplay.gif) + +## Resources + +* [Source code](https://github.com/windows-toolkit/Lottie-Windows/blob/rel/7.1.0/samples/LottieSamples/Scenarios/JsonPage.xaml) for sample: getting started with a JSON file +* The resulting page in the [Lottie Samples application](https://aka.ms/lottiesamples) +* [LottieVisualSource](/dotnet/api/microsoft.toolkit.uwp.ui.lottie.lottievisualsource) API reference +* [Lottie Viewer application](https://aka.ms/lottieviewer) for previewing JSON files +* [Help + feedback](https://github.com/windows-toolkit/Lottie-Windows/issues) diff --git a/docs/lottie/json-codegen.md b/docs/lottie/json-codegen.md new file mode 100644 index 00000000..b6ba68e4 --- /dev/null +++ b/docs/lottie/json-codegen.md @@ -0,0 +1,19 @@ +--- +title: JSON versus Codegen +author: sohchatt +description: Tradeoffs between JSON and Codegen in Lottie-Windows. +keywords: lottie, lottie-windows, animatedvisualplayer, bodymovin, aftereffects, windows 10, uwp, uwp community toolkit +--- + +# JSON versus Codegen + +Whether you choose to use a Bodymovin JSON file with a [LottieVisualSource](/dotnet/api/microsoft.toolkit.uwp.ui.lottie.lottievisualsource) or a codegen’ed C# or C++ class depends on your application’s requirements. Both types of sources are ultimately consumed by the [AnimatedVisualPlayer](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer) element, but with slightly different workflows. Here’s an overview of how the pieces fit in: + +Workflow + +The tradeoffs between using JSON and Codegen are as follows: + +| JSON | Codegen | +| -------- | ----------- | +| Can be loaded from a URI at run-time — this enables Lottie animations to be updated over the network, without updating the application. | Better performance: there is no need to parse and translate JSON at run-time on the application’s UI thread, and, since the resulting Windows.UI.Composition tree is generated ahead of time, it can be better optimized. | +| | Allows dynamic modification of Lottie animations by editing the generated Windows.UI.Composition Visual tree. This is useful for theming, branding, accessibility, etc. (see [related scenario sample](https://github.com/windows-toolkit/Lottie-Windows/blob/rel/7.1.0/samples/LottieSamples/Scenarios/ModifyPage.xaml)). diff --git a/docs/lottie/playback.md b/docs/lottie/playback.md new file mode 100644 index 00000000..bd7e8b51 --- /dev/null +++ b/docs/lottie/playback.md @@ -0,0 +1,106 @@ +--- +title: Configuring Animation Playback +author: sohchatt +description: Sample of configuring animation playback in Lottie-Windows. +keywords: lottie, lottie-windows, animatedvisualplayer, bodymovin, aftereffects, windows 10, uwp, uwp community toolkit +--- + +# Configuring Animation Playback + +The [AnimatedVisualPlayer](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer) XAML element is responsible for controlling the playback of its Lottie animation source through the following properties and methods: + +* [AutoPlay](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.autoplay) plays a Lottie animation as soon as it is loaded. +* [IsPlaying](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.isplaying) indicates whether a play is currently underway. +* [PlaybackRate](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.playbackrate) is a live property that modifies the rate of the animation; negative values change the direction of playback. +* [PlayAsync(Double, Double, Boolean)](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.playasync) plays a Lottie animation asynchronously between two specified progress values, looping or once. +* [Pause()](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.pause) pauses the animation. +* [Resume()](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.resume) resumes a paused animation. +* [Stop()](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.stop) stops and completes the current play. +* [SetProgress(Double)](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer.setprogress) moves the animation to the specified progress value. + +Let’s set up a Lottie animation that plays in response to an event, for instance on ButtonClicked. Load the AnimatedVisualPlayer and configure its Source as before, but disable AutoPlay: + +```xaml + + + + + + + +``` + +Next, let’s configure the PlayAsync method with the from and to progress values and no looping enabled. We won’t `await` the PlayAsync because we don’t want to wait until the animation has finished playing. Since we’re intentionally ignoring the IAsyncAction returned from PlayAsync in this case, we assign the result to a [C# 7 discard](/dotnet/csharp/discards#a-standalone-discard) to avoid a CS1998 compiler warning. + +```csharp + private void PlayButton_Click(object sender, RoutedEventArgs e) + { + _ = player.PlayAsync(fromProgress: 0, toProgress: 1, looped: false); + } + +``` + +Now, let's introduce Pause, Stop, and Reverse Buttons and update the method above to account for these other states. Our desired end result is as follows: + +![Playback Gif](./assets/lottiedocs-playback.gif) + +```csharp + private void PlayButton_Click(object sender, RoutedEventArgs e) + { + // Set forward playback rate. + // NOTE: This property is live -- it takes effect even if the animation is playing. + player.PlaybackRate = 1; + EnsurePlaying(); + } + + private void PauseButton_Checked(object sender, RoutedEventArgs e) + { + // Pause the animation, if playing. + player.Pause(); + } + + private void PauseButton_Unchecked(object sender, RoutedEventArgs e) + { + // Resume playing current animation. + player.Resume(); + } + + private void StopButton_Click(object sender, RoutedEventArgs e) + { + // Stop the animation, which completes PlayAsync and resets to initial frame. + player.Stop(); + PauseButton.IsChecked = false; + } + + private void ReverseButton_Click(object sender, RoutedEventArgs e) + { + // Set negative playback rate in order to change the animation's direction. + player.PlaybackRate = -1; + EnsurePlaying(); + } + + private void EnsurePlaying() + { + if (PauseButton.IsChecked.Value) + { + // Resume playing the animation, if paused. + PauseButton.IsChecked = false; + } + else + { + if (!player.IsPlaying) + { + // Play the animation at the currently specified playback rate. + _ = player.PlayAsync(fromProgress: 0, toProgress: 1, looped: false); + } + } + } + +``` + +## Resources + +* [Source code](https://github.com/windows-toolkit/Lottie-Windows/blob/rel/7.1.0/samples/LottieSamples/Scenarios/PlaybackPage.xaml.cs) for sample: configuring animation playback +* The resulting page in the [Lottie Samples application](https://aka.ms/lottiesamples) +* [AnimatedVisualPlayer](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer) API reference +* [Help + feedback](https://github.com/windows-toolkit/Lottie-Windows/issues) diff --git a/docs/lottie/segments.md b/docs/lottie/segments.md new file mode 100644 index 00000000..954ac0c3 --- /dev/null +++ b/docs/lottie/segments.md @@ -0,0 +1,92 @@ +--- +title: Interactive Segments on an Animation Timeline +author: sohchatt +description: Sample of interactive segments on an animation timeline in Lottie-Windows. +keywords: lottie, lottie-windows, animatedvisualplayer, bodymovin, aftereffects, windows 10, uwp, uwp community toolkit +--- + +# 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: + +```xaml + + + + + + + +``` + +```csharp + 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](./assets/lottiedocs-segments.gif) + +## Resources + +* [Source code](https://github.com/windows-toolkit/Lottie-Windows/blob/rel/7.1.0/samples/LottieSamples/Scenarios/SegmentPage.xaml.cs) for sample: interactive segments on an animation timeline +* The resulting page in the [Lottie Samples application](https://aka.ms/lottiesamples) +* [AnimatedVisualPlayer](/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer) API reference +* [Help + feedback](https://github.com/windows-toolkit/Lottie-Windows/issues)