Ti.Animation

Titanium module to support smooth and scalable animations using Airbnb Lottie and Rive (Android only).

Requirements

• Titanium SDK 12.0.0+

Library versions:

The Titanium modules use external libraries

Library	Platform	Version
Airbnb Lottie	Android	6.4.0
Airbnb Lottie	iOS	4.5.0
Rive	Android	5.1.5

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

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

• At LottieFiles you will find a list of free Lottie animations.
• Elephant animation by LottieFiles - weejkqwjlkejlk2

Authors

• Hans Knöchel (@hansemannnn / Web)
• Michael Gangolf (@MichaelGangolf / Web)