SVG动画vivus.js库使用总结(示例代码)

使用并整理了SVG动画vivus.js库，具体示例代码如下：

使用如图所示的方法：

示例HTML代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '/meta http-equiv=' X-UA-Compatible ' content=' IE=edge，chrome=1 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' title vivus . js-test/title style type=' text/CSS ' SVG * { fill 3360 none；stroke: currentColor笔画宽度：4；} .日出{ color : # f 037 a5；背景-color : # f8c 72c；} .matrix { color : # 86e 0 C4；背景-color : # 181 f21；} .电动{ color: # 78C9DB背景-color : # e 4175 b；} .夜间{ color: # D3D679背景-color : # 316 bd2；} I { font-style : normal；color: # f00} span { color: # 316BD2}/style/head body div p span var synth HD/span=new Vivus(' isynth-dynamic/I '，{ br ifile :/I ' Vivus-git/synth . SVG '，br itype: /i'oneByOne '，br duration: 200，br istart: /i'manual '，br ianimtimingfunctions :/I Vivus。EASE _ OUT _ bounchebr })；/p p span synth-dynamic:/span SVG的ID或加载外部SVG文件的父标签/p p span file 3360/span VIV us-git/synth . SVG/I，如果是SVG的ID，可以省略此设置；如果是外部SVG文件的父标签，并且对应的值是SVG文件的路径/p p spantype:/spanbr。对应的值是：I显示/i每个路径元素绘图同时以小延迟开始。这是当前的默认动画。Br对值：iscenario-sync/i每一行都是同步的。它们都同时开始和结束，因此得名“同步”。Br对值：ionebeyone/I每个路径元素都是一个接一个的。这部动画给人最好的绘画印象。/p p spanstart:/span，可以省略此设置。如果没有设置，默认情况下会自动播放。br匹配值：iautostart/i默认值，br匹配值：imanal/I不自动播放。需要事件触发才能播放/p p spanantimingfunction :/span动画效果br匹配值：I lear/I动画从开始到结束的速度相同br匹配值：iEASE/i动画从低速开始，然后在结束前加速和减速。Br对值：iEASE_IN/i动画低速启动。Br匹配值：iEASE_OUT/i动画低速结束。Br匹配值：iEASE_OUT_BOUNCE/i动画弹性结束/p/div div p spansyncthd/spani . play()；/i播放动画br spansynthd/spani . reset()。play()；/i重播动画br spansynthd/spani . play(-3)；/i倒带和反转在/p /div div class='matrix' div p之前完成的动画