Home

Awesome

Ti.Animation

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

gif

Requirements

Library versions:

The Titanium modules use external libraries

LibraryPlatformVersion
Airbnb LottieAndroid6.4.0
Airbnb LottieiOS4.5.0
RiveAndroid5.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

Features/Documentation

Methods

NameParameterInfoPlatforms
start()Starts an animation from the beginningiOS, Android
start(int from, int to)Startframe, EndframePlays an animation from frame from to toAndroid
start({string animationName, bool loop})Plays the rive animationAndroid (Rive only)
pause()Pause an animationiOS, Android
resume()Resumes an animation from the current pointiOS, Android
stop()Stops an animation an resets itiOS, Android
addEventListener(String event, Callback function)Event name as string<br>Callback functionAdds events to the animation viewiOS, Android
setFile(String path)File path as stringSets the current animation, Files go into app/assets/ (Alloy)iOS, Android
setText(String layer, String text)Layer, TextSets the text in the layer layer to textAndroid

Properties

NameParameterInfoFrameworkPlatforms
progressfloatGet/set the current progress (in percentage)LottieAndroid
loopbooleanGet/set if the animation should loopLottieAndroid
speedfloatGet/set the speed of the animationLottieAndroid
durationfloatGet/set the duration of the animationLottieAndroid
isPlayingbooleanGet the animation statusLottieAndroid
cache()boolean-LottieiOS
animationNameString or ArraySets the Rive animation nameRiveAndroid
newRenderingEngineEnabledbooleanUse the core animation background rendering engine instead of the main threadLottieiOS

creation (tss) only:

NameParameterInfoPlatforms
assetFolderStringIf your animation contains images put the folder inside the assetFolder (e.g. images/ and put the image files inside app/assets/images/)Android
fileStringJSON file or URL to a file. Files go into app/assets/ (Alloy)<br/>Android: Support for dotLottie files in 4.1.0+iOS, Android
jsonStringStringPass a raw JSON string to the moduleiOS
loopbooleanloop the animationiOS, Android
autoStartbooleanautomatically start the animationiOS, Android
animationTypeintOne of the constants ANIMATION_LOTTIE or ANIMATION_RIVEiOS, Android

Events

NameInfoPropertiesPlatforms
completeWhen the animation is doneStatus:int, Loop:booleaniOS, Android
updateFires during the animationFrame:int, status:int (ANIMATION_START, ANIMATION_END, ANIMATION_CANCEL, ANIMATION_REPEAT, ANIMATION_RUNNING)Android

Constants

NamePlatforms
ANIMATION_RIVEAndroid
ANIMATION_LOTTIEAndroid

used in setValueDelegateForKeyPath.type (iOS):

NamePlatforms
CALLBACK_COLOR_VALUEiOS
CALLBACK_NUMBER_VALUEiOS
CALLBACK_POINT_VALUEiOS
CALLBACK_SIZE_VALUEiOS
CALLBACK_PATH_VALUEiOS

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