Ti.Animation

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

⚠️ The versions iOS 2.0.0 and Android 3.0.0 contain a breaking change that removed the Facebook Keyframes library. We decided to go with a Lottie only library for the future, since it made the race for the best animation library. Also, the deprecated method addViewToLayer is now removed. Please continue to use addViewToKeypathLayer.

Migrate from iOS < 2.0.0 and Android < 3.0.0

Instead of using createLottieView, simply use createAnimationView now. That's it!

Requirements

• Axway Titanium SDK 7.0.0+
• Axway Titanium SDK 9.0.0+ for Ti.Animation 4.0.0+

Library versions:

The Titanium modules use external libraries

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:

Properties:

creation (tss) only:

Events:

iOS Constants

used in setValueDelegateForKeyPath.type

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)