Full Example

• place img_0.png into app/assets/images/
• place Name.json into app/assets/
• place sample_lottie.json into app/assets/
• place WeAccept.json into app/assets/

var TiAnimation = require('ti.animation');
var isAndroid = (Ti.Platform.osname == 'android');
var isDouble = false;
var offset = 0;

var win = Ti.UI.createWindow({
	backgroundColor: '#fff',
	title: 'Ti.Animation Demo',
	fullscreen: true
});

var lbl = Ti.UI.createLabel({
	bottom: 40,
	color: "#000",
	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
	font: {
		fontSize: 12
	}
});

var view = TiAnimation.createLottieView({
	file: 'sample_lottie.json',
	loop: false,
	top: 120,
	height: 120,
	width: 120,
	autoStart: false,
	update: onUpdate
});

var view2 = TiAnimation.createLottieView({
	file: 'sample_lottie.json',
	loop: false,
	top: 180,
	height: 120,
	width: 120
});

var view3 = TiAnimation.createLottieView({
	file: 'WeAccept.json',
	loop: true,
	autoStart: true,
	top: 250,
	height: 100,
	width: 100,
	assetFolder: "images/"
});
var view4 = TiAnimation.createLottieView({
	file: 'Name.json',
	loop: true,
	top: 400,
	height: 100,
	width: 100,
	autoStart: true
});

var slider = Ti.UI.createSlider({
	value: 0,
	min: 0,
	max: 1,
	bottom: 10,
	width: 300
});

win.add(view);
win.add(view2);
win.add(view3);
win.add(view4);
win.add(lbl);
win.add(createButtonWithAction('Start animation', startAnimation));
win.add(createButtonWithAction('Pause animation', pauseAnimation));
win.add(createButtonWithAction('Resume animation', resumeAnimation));
win.add(createButtonWithAction('Double speed', doubleSpeed));
win.add(slider);

function onOpen(e) {
	var dur = (isAndroid) ? view.getDuration() : (Math.floor(view.getDuration() * 1000));
	lbl.text = "Lottie: Duration: " + dur + "ms\n";
	view4.setText("Name", "titanium rocks!");
}

function onUpdate(e) {
	slider.setValue(e.percentage);
}

function onClickView(e) {
	alert("LottieView clicked");
}

slider.addEventListener('change', seekToProgress);
view.addEventListener("click", onClickView);
win.addEventListener("open", onOpen);

if (isAndroid) {
	win.open();
} else {
	var nav = Ti.UI.iOS.createNavigationWindow({
		window: win
	});
	nav.open();
}

function doubleSpeed(e) {
	if (isDouble) {
		e.source.title = "Double speed";
		view.setSpeed(1);
	} else {
		e.source.title = "Normal speed";
		view.setSpeed(2);
	}
	isDouble = !isDouble;
}

function seekToProgress(e) {
	view.setProgress(e.value);
}

function createButtonWithAction(title, action) {
	var btn = Ti.UI.createButton({
		title: title,
		top: offset,
		height: 35,
		width: 200,
		borderRadius: 4,
		borderWidth: 1,
		borderColor: "#000",
		color: "#000",
		backgroundColor: "#fff"
	});

	btn.addEventListener('click', action);

	offset += 36;
	return btn;
}

function startAnimation() {
	view.start();
	view2.start(50, 100);
}

function pauseAnimation() {
	view.pause();
}

function resumeAnimation() {
	view.resume();
}