SVG动画vivus.js库使用小结(实例代码)
(编辑：jimmy 日期: 2024/11/20 浏览：3 次 )
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://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 404.7 354" enable-background="new 0 0 404.7 354" id="hi-dynamic" onclick="hiD.reset().play();">
<!-- HI -->
<path data-duration="10" d="M324.6,61.2c16.6,0,29.5-12.9,29.5-29.5c0-16.6-12.9-29.5-29.5-29.5c-16.6,0-29.5,12.9-29.5,29.5C295.1,48.4,308,61.2,324.6,61.2z" style="stroke-dasharray: 186px, 226px; stroke-dashoffset: 0px;"></path>
<path data-duration="130" d="M366.2,204.2c-9.8,0-15-5.6-15-15.1V77.2h-85v28h19.5c9.8,0,8.5,2.1,8.5,11.6v72.4c0,9.5,0.5,15.1-9.3,15.1H277h-20.7c-8.5,0-14.2-4.1-14.2-12.9V52.4c0-8.5,5.7-12.3,14.2-12.3h18.8v-28h-127v28h18.1c8.5,0,9.9,2.1,9.9,8.9v56.1h-75V53.4c0-11.5,8.6-13.3,17-13.3h11v-28H2.2v28h26c8.5,0,12,2.1,12,7.9v142.2c0,8.5-3.6,13.9-12,13.9h-21v33h122v-33h-11c-8.5,0-17-4.1-17-12.2v-57.8h75v58.4c0,9.1-1.4,11.6-9.9,11.6h-18.1v33h122.9h5.9h102.2v-33H366.2z" style="stroke-dasharray: 2216px, 2256px; stroke-dashoffset: 0px;"></path>
<path data-async="" data-delay="20" d="M358.8,82.8c11.1-4.2,18.8-14.7,18.8-27.5c0-8.5-3.4-16-8.9-21.3" style="stroke-dasharray: 60px, 100px; stroke-dashoffset: 0px;"></path>
<path data-async="" d="M124.2,105.7V77c0-11.5,9.1-13.8,17.5-13.8h10.5V44.7" style="stroke-dasharray: 84px, 124px; stroke-dashoffset: 0px;"></path>
<path data-async="" d="M147.9,40.2L171.2,63.2L175.7,63.2" style="stroke-dasharray: 38px, 78px; stroke-dashoffset: 0px;"></path>
<path data-async="" d="M295.1,32.1L275.2,12.2" style="stroke-dasharray: 29px, 69px; stroke-dashoffset: 0px;"></path>
<path data-async="" d="M266.2,204.7V75.9c0-8.5,5.2-12.8,13.7-12.8h18.3V44.7" style="stroke-dasharray: 187px, 227px; stroke-dashoffset: 0px;"></path>
<path data-async="" d="M265.9,105.2L289.2,129.2L293.7,129.2" style="stroke-dasharray: 38px, 78px; stroke-dashoffset: 0px;"></path>
<path data-async="" d="M374.2,204.7L374.2,94.2L358.8,82.8L351.2,77.2" style="stroke-dasharray: 140px, 180px; stroke-dashoffset: 0px;"></path>
<path data-async="" d="M148.2,237.2L171.2,261.2L294.6,261.2L300.5,261.2L402.2,261.2L402.2,228.2L379.2,204.2" style="stroke-dasharray: 331px, 371px; stroke-dashoffset: 0px;"></path>
<path data-async="" d="M124.2,204.7L124.2,157.2L175.7,157.2" style="stroke-dasharray: 99px, 139px; stroke-dashoffset: 0px;"></path>
<path data-async="" d="M147.7,228.2L129.2,204.2" style="stroke-dasharray: 31px, 71px; stroke-dashoffset: 0px;"></path>
<path data-async="" d="M7.2,237.3L30.2,261.2L152.2,261.2L152.2,241.7" style="stroke-dasharray: 175px, 215px; stroke-dashoffset: 0px;"></path>
<path data-async="" d="M1.9,40.2L26,63.2L39.7,63.2" style="stroke-dasharray: 48px, 88px; stroke-dashoffset: 0px;"></path>
<path data-async="" d="M129.2,12.2L148.2,33.2" style="stroke-dasharray: 29px, 69px; stroke-dashoffset: 0px;"></path>
<path data-async="" d="M303.9,53L328.1,77.2" style="stroke-dasharray: 35px, 75px; stroke-dashoffset: 0px;"></path>
<path d="M345.1,10.5L368.7,34" style="stroke-dasharray: 34px, 74px; stroke-dashoffset: 0px;"></path>
<!-- there -->
<path data-delay="30" data-duration="60" stroke-linecap="round" stroke-linejoin="round" d="M76.8,337.3c0,0,1.9,12.2,13.1,12.2c22.1,0,23.8-1.8,59-66.4c-19.7,35.7-36.4,66.2-19.3,66.2c15.2,0,22.9-14.2,28.3-23.7c3.3-0.5,24-3.2,35-25.5c4-8.1,4.1-17.8-8.1-15.2c-5.6,1.2-13.1,14.8-15.7,19.2c-7.6,12.7-22.4,45.2-22.4,45.2s10.3-22.4,21.5-22.4c15.5,0-9.4,22.4,4.7,22.4c4.9,0,11.7-11.4,16.6-20.9c7.5,4.7,19.7,1.7,24.5-8.1c10.1-20.4-14.4-12.8-24.5,8.1c-5.5,11.3-2.2,21.1,11.2,21.1c16.4,0,26.1-28.3,30.5-37.5c9.9,2.5,14,2.5,22.7-1.1c-3.5,5.1-24,38.1-8.3,38.1c6.7,0,11.7-11.4,16.6-20.9c7.5,4.7,19.7,1.7,24.5-8.1c10.1-20.4-14.4-12.8-24.5,8.1c-5.5,11.3-2.2,21.1,11.2,21.1c16.4,0,20.6-4,24.7-10.5" style="stroke-dasharray: 851px, 891px; stroke-dashoffset: 0px;"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M157.3,300.8c3.8-2.3-29,0.8-35.6,3.2" style="stroke-dasharray: 37px, 77px; stroke-dashoffset: 0px;"></path>
</svg>
</div>
<div class="night">
<div>
<p>每个路径元素是一个接一个。这个动画给人最好的印象的绘画。<br>vivus-git/synth.svg</p>
<button onclick="synthD.play();">播放动画</button>
<button onclick="synthD.play(-3);">倒带</button>
</div>
<div id="synth-dynamic" style="max-width: 400px; margin: auto;"></div>
</div>
<!--<script src="/UploadFiles/2021-04-02/vivus.js">总结
以上所述是小编给大家介绍的SVG动画vivus.js库使用小结(实例代码)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
下一篇：浅谈AngularJS中使用$resource（已更新）