search

chenqingspring / ng-lottie

Render After Effects animations on Angular based on lottie-web
MIT License
340 stars 100 forks source link

Stop animation after one loop and display the last frame #1479 #43

Open ofirrifo opened 5 years ago

ofirrifo commented 5 years ago

I want to stop animation after one loop and display the last frame here is a StackBlitz example

when I use the lottie-web it does work as should example

I was open this issue first to lottie-web https://github.com/airbnb/lottie-web/issues/1479

it seems that need to update the package lottie-web to 5.4.3

marcjulian commented 5 years ago

https://github.com/fivethree-team/lottie give this a try. It uses lottie-web in version 5.4.3.

Snowbases commented 4 years ago

@marcjulian it's possible to stop/resume at any point?

marcjulian commented 4 years ago

@SnowBases you need a reference to the LottieAnimation

<fiv-lottie
  [params]="lottieParams"
  [width]="250"
  [height]="250"
  (animationCreated)="onAnimationCreated($event)"
></fiv-lottie>

You can keep an instance of the animation in your component and play and pause at any point.

onAnimationCreated(animation: LottieAnimation) {
    animation.play();
    animation.setSpeed(0.8);
}