This is the second day of my participation in the More text Challenge. For more details, see more text Challenge

Vivus is a lightweight Javascript class that can be used to draw SVG. It can be used to customize paths for various patterns.

To use Vivus, run the following command: NPM install Vivus

It has three animation types: Delayed, Sync, and OneByOne. The following is a detailed description of the three animation types and the application of the specific vivus.js.

Examples of VUE based Demo:

export default { mounted() { this.playCamera(); }, methods: { playCamera() { const test = new Vivus('camera',{ type: 'sync', duration: 200, start: 'manual', animTimingFunction: Vivus.EASE_OUT_BOUNCE }); test.play(2); }}}Copy the code

The above code is written in the context of vue. The structure is of course a bunch of paths for the graphics you want, or you can introduce it by adding file:’xxx. SVG ‘to Vivus.

Next, talk about the meanings and meanings of common parameters:

type

  • Delayed: Each path element is drawn simultaneously at the beginning with a small delay, which is the default animation
  • Sync: Each path is drawn synchronously, starting and ending at the same time
  • OneByOne: each path element is drawn oneByOne, best for live painting

start

  • Autostart: autoplay (default)
  • “Manual” : the event is not played automatically. It is played after the event is triggered

animTimingFunction

  • It’s moving in a LINEAR way at the same speed
  • EASE: Speed in order from start to end: slow –> fast –> slow
  • EASE_IN: The speed changes from slow to fast
  • EASE_OUT: The speed changes from fast to slow
  • EASE_OUT_BOUNCE: The speed changes from fast to slow and ends with a bounce

The control method

play

Different values in play() run differently

  • 0-1: Slow movement
  • > 1: faster
  • <0: reverses the current state

stop

Stop () stops the animation

reset

Reset () initializes to return to the original undrawn state

Compatible with

Compatibility issues can also occur in Internet Explorer, of course, and you can either choose to deprecate outright or copy and replace elements that don’t work.

Vivuus.js and mo.js, as mentioned in the previous article, are only libraries for drawing SVG animations, not necessarily tools for writing SVG.

If you still have some questions when writing, please refer to the official Github address: github.com/maxwellito/… There are also detailed apis and effects.