Unity Lottie Animation Plugin
Welcome to the Unity Lottie Animation plugin! This Unity library enables you to play Lottie animations as Texture2D in your Unity projects. It's a powerful and easy-to-use solution that leverages Samsung's rlottie library to bring smooth Lottie animations to your games and applications.
Lottie loads and renders animations and vectors exported in the bodymovin JSON format. Bodymovin JSON can be created and exported from After Effects with bodymovin, Sketch with Lottie Sketch Export, and from Haiku.
For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. Since the animation is backed by JSON they are extremely small in size but can be large in complexity!
Features
- Play Lottie animations as Texture2D in Unity
- Easy integration and usage
- High performance and low memory footprint
- Uses Samsung's rlottie library internally
- Compatible with Unity 2019.4 and later
Supported Platforms
- Android
- iOS
- Windows
- OSX
- Linux
Installation
To install the Unity Lottie Animation to Texture2D plugin using the Unity Package Manager, follow these steps:
- Open your Unity project and navigate to
Window
>Package Manager
. - Click the
+
button in the top-left corner and selectAdd package from git URL...
. - Enter the following URL and click
Add
:https://github.com/gindemit/unity-rlottie.git?path=/unity/RLottieUnity/Assets/LottiePlugin/#0.2.2
Quick Start
The LottiePlugin.UI
namespace includes a AnimatedImage
class which allows you to use Lottie animations as RawImage
in your Unity game.
Here are the steps to use the AnimatedImage
class in your Unity project:
-
Import the Class: First, make sure the
AnimatedImage
class is included in your Unity project. -
Create an RawImage: In your Unity scene, create a new RawImage UGUI game object and attach the
AnimatedImage
script to it. -
Assign Parameters: In the
AnimatedImage
component, you will see several parameters:- Animation Json: A
TextAsset
representing the JSON data for your Lottie animation. You can drag and drop it from your Assets folder. - Texture Width: Defines the width of the texture for the animation. Increasing this value will improve the quality of the animation by increasing the number of pixels, but it may also impact performance, especially on lower-end hardware.
- Texture Height: Defines the height of the texture for the animation. Similar to Texture Width, increasing this value enhances the quality of the animation by adding more pixels, but it could potentially degrade performance on less powerful devices.
- Animation Speed: Speed at which animation plays. 1 is normal speed.
- Play On Awake: If checked, the animation will start playing as soon as the scene starts.
- Loop: If checked, the animation will keep playing in a loop.
Fill these in according to your needs.
- Animation Json: A
-
Play/Stop the Animation: You can use the
Play()
andStop()
methods to control the animation at runtime. You can call these from any other script.// Get a reference to the AnimatedImage AnimatedImage animatedImage = gameObject.GetComponent<AnimatedImage>(); // Play the animation animatedImage.Play(); // Stop the animation animatedImage.Stop();
And that's it! You are now able to use Lottie animations in your Unity projects using the AnimatedImage
class.
Example
Here's an example of how to use the AnimatedImage
class:
// Attach this script to a GameObject with AnimatedImage component
using UnityEngine;
using LottiePlugin.UI;
public class AnimationController : MonoBehaviour
{
private AnimatedImage animatedImage;
private void Awake()
{
animatedImage = GetComponent<AnimatedImage>();
}
private void Start()
{
animatedImage.Play(); // Start the animation
}
private void OnDisable()
{
animatedImage.Stop(); // Stop the animation
}
}
This script, when attached to the same GameObject as the AnimatedImage
component, will start the animation when the game starts and stop it when the GameObject is disabled.
Other Examples
Check out the 'Scene UI' Sample in Unity Package manager.
- Open your Unity project and navigate to
Window
>Package Manager
. - Select the installed Lottie Animation package on the left
- Fold out the Samples section
- Click 'Import' button on the Scene UI sample
- After importing it will ask you to copy the sample animations to the Assets/StreaminAssets folder
- Click 'Copy' button in the 'Missing lottie animations' dialog
- Open the 'SampleScene' from the sample in 'Assets/Samples/Lottie Animation/[version]/Scene UI/Scenes/' folder
- Hit play in Unity editor
2023-05-12.11-39-49.mp4
Support
If you encounter any issues or have questions, please create an issue on GitHub.
Credits
This plugin is built on top of Samsung's rlottie library, which is used internally for Lottie animation rendering.
License
This project is licensed under the MIT License. See the LICENSE file for details.