v2.0.4

Complete rewrite and new props + methods

Added Vue 3 support + Typescript and will continue to target Vue 3. Those using Vue 2.x you must use v1.2.1. The new plugin will continue to improve on Vue 3 now that it has been officially launched.

Summary

• Added new props, methods, and events
• Vue 3 support

New Props:

• speed to set playback speed

New Methods:

• setSpeed [number: speed]
  Using this.$refs.anim.setSpeed(2) you can set the playback speed to 2. Default speed is set to 1.

• goToAndStop [Position: frame number or seconds, isFrame: boolean]
  Using this.$refs.anim.goToAndStop(10, true you can set the specific frame you wish the animation to stop at. Pass in the frame number or seconds to play and if the first value is a frame or a time as true/false. This function will raise an emit (add @stopped="Yourfunction()" to your lottie-animation listen for it).

• goToAndPlay [Position: frame number or seconds, isFrame: boolean]
  Using this.$refs.anim.goToAndPlay(50, true) allows you to specify the start time of the animation in either frame number (passing isFrame true/false if value is a frame or in seconds).

• setDirection [Direction: -1: reverse, 1: forwards]
  Using this.$refs.anim.setDirection(-1) you can reverse your animation. You can pass in either AnimationDirection. to reverse the animation or 1 to play forwards. Default playback is 1.

• getDuration [inFrames: true/false] (Using this.$refs.anim.getDuration(true) you can retrieve the current duration of the animation in frames or seconds (false). If you pass true, function returns duration in frames, if false, duration is passed back in seconds. Default is false (returned in seconds).

• destroy
  Using this.$refs.anim.destroy() you can destroy the animation from the DOM.

New Events:

• @segmentStart (Event is fired when the animation enters each animation segment)
• @stopped (Playing the animation using goToAndStop() function will raise an event once the animation has stopped at the designated frame.)