SVG动画vivus.js库使用小结(实例代码)

时间：2021-05-26

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: none;stroke: currentColor;stroke-width:4;} .sunrise {color: #f037a5; background-color: #f8c72c;} .matrix {color: #86e0c4; background-color: #181f21;} .electric {color: #78C9DB; background-color: #E4175B;} .night {color: #D3D679; background-color: #316BD2;} i{ font-style:normal; color:#f00;} span{ color:#316BD2;} </style> </head> <body> <div> <p> <span>var synthD</span> = new Vivus('<i>synth-dynamic</i>', {<br> 　　<i>file: </i>'vivus-git/synth.svg',<br> 　　<i>type: </i>'oneByOne',<br> 　　duration: 200,<br> 　　<i>start: </i>'manual',<br> 　　<i>animTimingFunction:</i> Vivus.EASE_OUT_BOUNCE<br> }); </p> <p> <span>synth-dynamic：</span>SVG的ID 或 加载外部SVG文件的父标签 </p> <p> <span>file:</span><i>vivus-git/synth.svg</i>，如果是SVG的ID则可省略此设置，如果是加载外部SVG文件的父标签，对应的值则是SVG文件的路径 </p> <p> <span>type:</span><br> 　　对就值：<i>delayed</i> 每条路径元素绘制在同一时间用小延迟开始。这是目前默认动画。<br> 　　对就值：<i>scenario-sync</i> 每一行都是同步的。他们都在同一时间开始和结束,因此得名“同步”。<br> 　　对就值：<i>oneByOne</i> 每个路径元素是一个接一个。这个动画给人最好的印象的绘画。 </p> <p> <span>start:</span>是否自动播放，可省略此设置，不设置则默认自动播放<br> 　　对就值：<i>autostart</i> 默认值，自动播放<br> 　　对就值：<i>manual</i> 不自动播放，需要事件触发播放 </p> <p> <span>animTimingFunction:</span>动画效果<br> 　　对就值：<i>LINEAR</i> 动画从头到尾的速度是相同的<br> 　　对就值：<i>EASE</i> 动画以低速开始，然后加快，在结束前变慢。<br> 　　对就值：<i>EASE_IN</i> 动画以低速开始。<br> 　　对就值：<i>EASE_OUT</i> 动画以低速结束。<br> 　　对就值：<i>EASE_OUT_BOUNCE</i> 动画弹性结束 </p> </div> <div> <p> <span>synthD</span><i>.play();</i> 播放动画<br> <span>synthD</span><i>.reset().play();</i> 重新播放动画<br> <span>synthD</span><i>.play(-3);</i> 倒带，反向收回之前完成的动画 </p> </div> <div class="matrix"> <div> <p>每条路径元素绘制在同一时间用小延迟开始。这是目前默认动画。<br>vivus-git/obturateur.svg</p> <button onclick="obt1.reset().play();">重新播放动画</button> <button onclick="obt1.play(-3);">倒带</button> </div> <!-- <div id="obt"></div> --> <div> <object id="obt" data="vivus-git/obturateur.svg" type="image/svg+xml" style="width: 100%; max-height: 250px;"></object> </div> </div> <div class="sunrise"> <div> <p>每一行都是同步的。他们都在同一时间开始和结束,因此得名“同步”。<br>vivus-git/polaroid.svg</p> <button onclick="polaroidD.reset().play();">重新播放动画</button> <button onclick="polaroidD.play(-3);">倒带</button> </div> <div id="polaroid-dynamic"></div> </div> <div class="electric"> <div> <p>每一行都是同步的。他们都在同一时间开始和结束,因此得名“同步”。<br>vivus-git/hi-there.svg</p> <button onclick="hiD.play();">播放动画</button> <button onclick="hiD.play(-3);">倒带</button> </div> <!--<div id="hi-dynamic" style="max-width: 300px; margin: auto;"></div>--> <svg height="300" xmlns="http://monJS-like environments that support module.exports, // like Node. module.exports = Vivus; } else { // Browser globals window.Vivus = Vivus; } }(window, document));

总结

以上所述是小编给大家介绍的SVG动画vivus.js库使用小结(实例代码)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章