android svg指纹录取动画_SVG指纹动画

JavaScript

const options = {

duration: 200,

type: "oneByOne",

dashGap: 1,

reverseStack: false,

progress: 0,

direction: 1,

speed: 1,

frame: 0,

pause: 1200

};

const vivus = new Vivus(document.querySelector("svg"), { ...options });

vivus.reset();

vivus.stop();

const progress = document.querySelector('[type="range"]');

function animate() {

let pause = 0;

if (options.frame === options.speed) {

options.progress += options.direction;

if (options.progress < 0 || options.progress > 100) {

options.direction = -options.direction;

options.progress += options.direction;

pause = options.progress === 0 ? options.pause / 10 : options.pause;

}

vivus.setFrameProgress(options.progress / 100);

options.frame = 0;

}

progress.value = options.progress / 100;

options.frame++;

setTimeout(() => {

requestAnimationFrame(animate);

}, pause);

}

requestAnimationFrame(animate);