当前位置:首页 >> 网络编程

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

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: 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库使用小结(实例代码),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!