Lottie: Play animations states

In this example you can play an animation up to a certain time, pause the animation and resume it from this point (e.g. animation states)

I use the Beating Heart animation in this example.

index.js:

var isPaused = false;

function onClickGo(e) {
	if (isPaused) {
		$.view_lottie.resume();
	} else {
		$.view_lottie.start();
	}
}

function onUpdate(e){
	if (e.time >= 900 && !isPaused) {
		// pause at a certain point
	 	$.view_lottie.pause();
	 	isPaused = true;
	}
}

function onComplete(e){
	isPaused = false;
}

$.view_lottie.addEventListener("update",onUpdate);
$.view_lottie.addEventListener("complete",onComplete);
$.btn_go.addEventListener("click",onClickGo);
$.index.open();

index.xml

<Alloy>
	<Window class="container">
		<LottieView id="view_lottie" module="ti.animation" />
		<Button id="btn_go" title="Start"/>
	</Window>
</Alloy>

index.tss:

".container": {
	backgroundColor:"white"
}

"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
}

"#label": {
	font: {
		fontSize: 12
	}
}

"#view_lottie": {
	file:"animation.json",
	width:300,height:300
}

"#btn_go": {
	bottom:0
}

When you press "START" it will play until the heart is big and pause the animation. Once you press the "START" button again it will continue with the exploding heart animation. At the end (complete event) it will reset and start from the beginning.