Bring Beautiful Lottie Animation to Your Galaxy Watch Apps
Kangho Hur
Principal Engineer
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile devices and on the web.
In this blog, I'll introduce how to use Lottie animation with Tizen .NET to create beautiful animations for your Galaxy Watch apps.
What is ElottieSharp
ElottieSharp is a library for Tizen .NET that parses and renders Lottie animation natively on Galaxy Watch.
ElottieSharp is distributed through NuGet. To use Lottie animation in your apps, add the ElottieSharp package to your projects.
Because the platform version of Galaxy Watch and Gear S-series has been upgraded to version 4.0.0.4, ElottieSharp 0.9.0-preview is now compatible with Galaxy Watch Active, Galaxy Watch, and Gear S-series. Other products, including previous Gear S series and Samsung Smart TV, are not yet compatible.
Get Started
Let's add animations to Tizen .NET applications on your Galaxy Watch.
Install the ElottieSharp package
nuget.exe
nuget.exe install ElottieSharp -Version 0.9.0-preview
.csproj
<PackageReference Include="ElottieSharp" Version="0.9.0-preview" />
Quick Start
ElottieSharp supports Tizen 4.0 (tizen40) and above. The simplest way to use it is with LottieAnimationView:
// Create the LottieAnimationView
var animation = new new LottieAnimationView(window)
{
AlignmentX = -1,
AlignmentY = -1,
WeightX = 1,
WeightY = 1,
AutoPlay = true,
};
animation.Show();
// Loading the animation file from a file path
animation.SetAnimation(Path.Combine(DirectoryInfo.Resource, "lottie.json"));
// Play the animation
animation.Play();
LottieAnimationView
LottieAnimationView is a EvasObject (TizenFX) subclass that displays animation content.
Create animation views
var animation = new LottieAnimationView(window)
{
AutoPlay = true,
AutoRepeat = false,
Speed = 1.0,
MinumumProgress = 0,
MaximumProgress = 1.0
};
Animation views can be allocated with or without animation data. Some convenience initializers are available for initializing with animations.
Properties:
- AutoPlay: Indicates whether this animation is played automatially or not. The default value is
false. - AutoRepeat: The loop behavior of the animation. The default value is
false. - Speed: The speed of the animation playback. Higher speed equals faster time. The default value is
1.0. - MinimumProgress: The start progress of the animation (0 ~ 1.0). The default value is
0. - MaximumProgress: The end progress of the animation (0 ~ 1.0). The default value is
1.0.
Load from a filepath
animation.SetAnimation(Path.Combine(DirectoryInfo.Resource, "lottie.json"));
Loads an animation model from a filepath. After loading an animation successfully, you can get the duration time and total frame count by using the TotalFrame and DurationTime properties.
Parameters:
: filepath: The absolute filepath of the animation to load.
Play the animation
animation.Play();
Plays the animation from its current state to the end of its timeline. The Started event occurs when the animation starts, and the Finished event occurs when the animation finishes.
Stop the animation
animation.Stop();
Stops the animation. The Stopped event occurs when the animation stops.
Pause the animation
animation.Pause();
Pauses the animation. The Paused event occurs when the animation is paused.
Is animation playing
bool isPlaying = anumation.IsPlaying;
Returns true if the animation is currently playing, false if it is not.
Current frame
int currentFrame = anumation.CurrentFrame;
Returns the current animation frame count.
Note: -1 is returned if the animation is not playing.
Total frame
int totalFrame = anumation.TotalFrame;
Returns the total animation frame count.
Note: Load the animation file before using it.
Duration
double duration = anumation.DurationTime;
Returns the animation duration time.
Note: Load the animation file before using it.
What will your Tizen .NET apps look like with Lottie animation? Find out today!
