Hyperloop

Lottie and Hyperloop

Lottie can be used in Hyperloop, too:

Android example:

• Place the lottie-release.aar into app/platform/android/ (get it from maven.org)
• Put an animation json in app/assets/animation.json

var LottieAnimationView = require('com.airbnb.lottie.LottieAnimationView');
var Animator = require('android.animation.Animator');
var ValueAnimator = require('android.animation.ValueAnimator');
var ScaleType = require('android.widget.ImageView.ScaleType');
var lottieView = new LottieAnimationView(Ti.Android.currentActivity);
var animation = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, '/animation.json').read().text;

$.index.add(lottieView);
lottieView.addAnimatorListener(new Animator.AnimatorListener({
	onAnimationStart: function() {
		console.log("start");
	},
	onAnimationEnd: function() {
		console.log("end");
	},
	onAnimationRepeat: function() {
		console.log("repeat");
	}
}));

lottieView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener({
	onAnimationUpdate: function(ani) {
		console.log("Percentage", lottieView.getProgress().toFixed(2));
	}
}));
lottieView.setAnimationFromJson(animation);
lottieView.setScaleType(ScaleType.CENTER_INSIDE);
lottieView.loop(true);
lottieView.playAnimation();

$.index.open();

iOS Example

• Add pod 'lottie-ios' to your Podfile
• Put an animation in app/assets/animation.json

var LOTAnimationView = require('Lottie/LOTAnimationView');
var NSBundle = require('Foundation/NSBundle');
var NSData = require('Foundation/NSData');
var NSJSONSerialization = require('Foundation/NSJSONSerialization');
var UIViewContentModeScaleAspectFill = require('UIKit').UIViewContentModeScaleAspectFill;

// If in a sub-directory, include that one, but not the "assets" one
var filePath = NSBundle.mainBundle.pathForResourceOfType('animation', 'json', null);
var data = NSData.dataWithContentsOfFile(filePath);

if (!data) {
  Ti.API.error('The specified file could not be loaded.');
  return;
}

var jsonFile = NSJSONSerialization.JSONObjectWithDataOptionsError(data, 0, null);
var animationView = LOTAnimationView.animationWithFilePath(filePath);
    
animationView.setLoopAnimation(true);
animationView.contentMode = UIViewContentModeScaleAspectFill;
$.index.add(animationView);

animationView.play();