Skip to content

m1ga/ti.animation

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
ios
 
 
 
 
 
 
 
 
 
 

Ti.Animation

Buy Me A Coke donate button

gif

Titanium module to support smooth and scalable animations using Airbnb Lottie.

Requirements

  • Android: Titanium SDK 9.0.0+
  • iOS: Titanium SDK 11.0.0+

Library versions:

The Titanium modules use external libraries

Library Platform Version Build Date
Airbnb Lottie Android 5.2.0 2022/05/31
Airbnb Lottie iOS 4.1.2 2023/01/26

Create a View

var animation = TiAnimation.createAnimationView({
  file: '/file.json',
  loop: false,
  autoStart: false
});

or in Alloy:

<AnimationView id='view_lottie' module='ti.animation' />

Update native Libraries

  • iOS: Use Carthage and carthage update to compile the framework automatically. Then, copy the output from ios/Carthage/Build/iOS to ios/platform/.
  • Android: change the version number in build.gradle

Features/Documentation

Methods

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
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

Properties

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. 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

Events

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

Constants

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

Example

<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

Issue

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

Resources

Authors