playSegments runs whole animation

[jscontrust]

I am implementing ng-lottie in my angular 4 app. I am trying to play a segment when the animation is created. But on creation, it plays the whole animation at first then loop through the segment. Here is my code -

//Lottie configuration in component.
this.lottieConfig = {
    renderer: 'svg',
    loop: true,
    prerender: false,
    autoplay: false,
    autoloadSegments: false,
    path: './assets/content/data_3.json'
};

//HTML code
<lottie-animation-view [options]="lottieConfig" (animCreated)="handleAnimation($event)" (click)="onAnimationClick()"></lottie-animation-view>

//Handle animation function on animation create
handleAnimation(anim: any) {
	this.anim = anim;
	this.anim.playSegments([[0,479]],true);
} 

Although I am able to find a solution by adding timeout in handleAnimation function. But I do not know if this is the correct way to solve this issue.

//Handle animation function code with timeout
handleAnimation(anim: any) {
	this.anim = anim;

	setTimeout(() => {
		this.anim.playSegments([[0,479]],true);
	} , 1);
}

Just think that it has something to do with this issue https://github.com/bodymovin/bodymovin/issues/398

[chenqingspring]

I just made the config autoloadSegments: false work in v0.2.1

Can you please try it, and give me some feedback? Thanks!

[jscontrust]

I have tried with that version but still same result. My lottieConfig is still same with autoloadSegments: false and version 0.2.1.

[email protected] node_modules/ng-lottie

[chenqingspring]

Thanks for your feedback!

I repeated your case, and then I checked bodymovin's code.

The reason is that this.totalFrames is overrided by asyn configAnimation

So, on consumer side setTimeout could make the function wait after the overrides..

My suggestion is to replace load json file into module.exports js object, and set it to animationData.

let animationData = require('./assets/pinjump.js');
....
this.lottieConfig = {
       animationData: animationData,
       autoplay: false,
       autoloadSegments: false,
       loop: true
 }

which will avoid the overriding..

I'm thinking how to make a patch of bodymoin#playAnimation to avoid this inconsistent.

[chenqingspring]

But If you still need external path to load json, setTimeout is a correct choice :-)

[1pocketaces1]

Hi I am curious if this issue has been fixed to work properly yet? I am having the same issue

[1pocketaces1]

Also I cannot get the proper syntax for playSegments(). Console is telling me I need ':' instead of a comma?