Titanium module to support smooth and scalable animations using Airbnb Lottie and Rive (Android only).
- Android: Titanium SDK 12.6.0+
- iOS: Titanium SDK 12.0.0+
- iOS: Use Carthage and
carthage updateto compile the framework automatically. Then, copy the output fromios/Carthage/Build/iOStoios/platform/. - Android: change the version number in
build.gradle - At LottieFiles you will find a list of free Lottie animations.
- Elephant animation by LottieFiles - weejkqwjlkejlk2
- Hans Knöchel (@hansemannnn / Web)
- Michael Gangolf (@MichaelGangolf / Web)
The Titanium modules use external libraries
| Library | Platform | Version |
|---|---|---|
| Airbnb Lottie | Android | 6.6.6 |
| Airbnb Lottie | iOS | 4.5.0 |
| Rive | Android | 10.1.4 |
var animation = TiAnimation.createAnimationView({
file: '/file.json',
loop: false,
autoStart: false
});or in Alloy:
<AnimationView id='view_lottie' module='ti.animation' />| Name | Parameter | Info | Platforms |
|---|---|---|---|
| start() | Starts an animation from the beginning | iOS, Android | |
| start(int from, int to) | Startframe, Endframe | Plays an animation from frame from to to |
Android |
| start({string animationName, bool loop}) | Plays the rive animation | Android (Rive only) | |
| pause() | Pause an animation | iOS, Android | |
| resume() | Resumes an animation from the current point | iOS, Android | |
| stop() | Stops an animation an resets it | iOS, Android | |
| addEventListener(String event, Callback function) | Event name as string Callback function |
Adds events to the animation view | iOS, Android |
| setFile(String path) | File path as string | Sets the current animation, Files go into app/assets/ (Alloy) | iOS, Android |
| setText(String layer, String text) | Layer, Text | Sets the text in the layer layer to text |
Android |
| Name | Parameter | Info | Framework | Platforms |
|---|---|---|---|---|
| progress | float | Get/set the current progress (in percentage) | Lottie | Android |
| loop | boolean | Get/set if the animation should loop | Lottie | Android |
| speed | float | Get/set the speed of the animation | Lottie | Android |
| duration | float | Get/set the duration of the animation | Lottie | Android |
| isPlaying | boolean | Get the animation status | Lottie | Android |
| cache() | boolean | - | Lottie | iOS |
| animationName | String or Array | Sets the Rive animation name | Rive | Android |
| newRenderingEngineEnabled | boolean | Use the core animation background rendering engine instead of the main thread | Lottie | iOS |
creation (tss) only:
| Name | Parameter | Info | Platforms |
|---|---|---|---|
| assetFolder | String | If your animation contains images put the folder inside the assetFolder (e.g. images/ and put the image files inside app/assets/images/) |
Android |
| file | String | JSON file or URL to a file. Files go into app/assets/ (Alloy) Android: Support for dotLottie files in 4.1.0+ |
iOS, Android |
| jsonString | String | Pass a raw JSON string to the module | iOS |
| loop | boolean | loop the animation | iOS, Android |
| autoStart | boolean | automatically start the animation | iOS, Android |
| animationType | int | One of the constants ANIMATION_LOTTIE or ANIMATION_RIVE |
iOS, Android |
| Name | Info | Properties | Platforms |
|---|---|---|---|
| complete | When the animation is done | Status:int, Loop:boolean | iOS, Android |
| update | Fires during the animation | Frame:int, status:int (ANIMATION_START, ANIMATION_END, ANIMATION_CANCEL, ANIMATION_REPEAT, ANIMATION_RUNNING) | Android |
| Name | Platforms |
|---|---|
| ANIMATION_RIVE | Android |
| ANIMATION_LOTTIE | Android |
used in setValueDelegateForKeyPath.type (iOS):
| Name | Platforms |
|---|---|
| CALLBACK_COLOR_VALUE | iOS |
| CALLBACK_NUMBER_VALUE | iOS |
| CALLBACK_POINT_VALUE | iOS |
| CALLBACK_SIZE_VALUE | iOS |
| CALLBACK_PATH_VALUE | iOS |
<AnimationView id='view_lottie' module='ti.animation' />'#view_lottie': {
file: 'data.json',
assetFolder: 'images/', // Android-only
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
borderColor: '#000',
borderWidth: 1
}Please see the basic example in example/app.js. More examples can found in the wiki
If you scale your view bigger and you have some jagged lines you need to add disableHardwareAcceleration:true to your tss file. Performance will be slower in most cases but quality is better
