airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
29.85k stars 2.85k forks source link

Change playmode at runtime #3029

Open martinstender opened 10 months ago

martinstender commented 10 months ago

Hi all,

I know this isn't an issue as such, but I would really like to be able to change the playmode at runtime. Or when clicking an element in an animation etc. By playmode, I mean toggle between normal and bounce (back-and-forth).

Is that possible?

Best regards, Martin

martinstender commented 10 months ago

I've sort of figured it out, using playSegments. (player is the animation object)

We want to bounce between frame 1 and 30, back and forth. It can absolutely be written more flexible, where you pass the frame-range to the function as an array, but something like this works.

let directionForward = false;

let bounceSegment = function(){
   directionForward = !directionForward;
   let segment = directionForward ? [1,30] : [30,1];
   player.addEventListener('complete', function(){
      player.removeEventListener('complete');
      bounceSegment();
   });
   player.playSegments(segment, true);
}
bounceSegment();