平滑SVG折線指向動畫以創建動態金融股票圖表

Question

我正在嘗試使用svg折線創建動態金融股票線性圖表。 我能夠每隔一秒鍾添加一次新坐標來更新圖表。 但我希望它為每個坐標設置動畫，而不是在一秒鍾后跳轉到新坐標

我嘗試使用jquery關鍵幀庫，但動畫不是我想要的。 我希望折線從初始坐標變為新坐標

$.keyframe.define([{
name: 'myfirst',
  from: {
    'stroke-dashoffset': '1000'
  },
  to: {
    'stroke-dashoffset': '0'
  }

  }]);
 $("#path").css({"stroke-dasharray":'1000',"stroke-dashoffset":'1000'});

 $("#path").playKeyframe({
   name: 'myfirst',
     duration: '5s',
timingFunction: 'linear',
iterationCount: '1'


 });

HTML

<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px" height="600px" class="logo-outline" viewBox="0 0 1000 600" enable-background="new 0 0 1000 600" xml:space="preserve">
<polyline id="path" style="fill:none;stroke:black;stroke-width:3" />

</svg></body>

JAVASCRIPT

  $(document).ready(function() {

     var x = 0;
     var y1 = 0;
     var y2 = 0;
     var y = 0;
     var point = 0+","+Math.round(Math.random()*1000);

     function upD() {
        x+=40;
        y2 = y1;
        y1=y;
        y = Math.round(Math.random()*100);
        point+=" "+x+","+y;
        document.getElementById('path').setAttribute('points',point);
        // jquery keyframe library
     $.keyframe.define([{
        name: 'myfirst',
        from: {
            'stroke-dashoffset': '80%'
        },
        to: {
           'stroke-dashoffset': '0'
        }

    }]);
    $("#path").css({"stroke-dasharray":'100%',"stroke-dashoffset":'100%'});

    $("#path").playKeyframe({
        name: 'myfirst',
        duration: '5s',
     timingFunction: 'linear',
          iterationCount: '1'


   });
   }
     window.setInterval(upD,3000);

  });

我的目標是制作帶有折線動畫的圖表，如olymp交易，二元交易圖表或類似刻度線的圖表

Answer 1

通常，這種類型的動畫是在CSS中通過對stroke-dashoffset屬性進行動畫處理來完成的

首先，您需要計算路徑的長度。 在這種情況下，您可以使用path.getTotalLength()獲得折線的長度。 這也應該是#path{stroke-dasharray: 1697.5px;}的初始值#path{stroke-dasharray: 1697.5px;}這意味着折線的破折號和間隔長度相等：1697.5px。 stroke-dashoffset為1697.5像素；這意味着該路徑是隱藏的，因為虛線之間的間隙覆蓋了整個折線。

@keyframes動畫開始將筆划破折號偏移量從1697.5px設置為0，直到破折號覆蓋整個路徑。

我希望這是您所需要的。

 svg{border:1px solid} #path{ stroke-dasharray: 1697.5px; stroke-dashoffset: 1697.5px; animation:test 6.5s forwards } @keyframes test { from { stroke-dashoffset: 1697.5px;} to { stroke-dashoffset: 0;} }

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px" height="600px" class="logo-outline" viewBox="0 0 1000 600" enable-background="new 0 0 1000 600" xml:space="preserve"> <polyline id="path" style="fill:none;stroke:black;stroke-width:3" points="0,518 40,68 80,2 120,63 160,17 200,42 240,75 280,99 320,44 360,59 400,34 440,28 480,56 520,68 560,54 600,26 640,74 680,78 720,27 760,9 800,45 840,72 880,73 920,70 960,13 1000,35"></polyline> </svg>

平滑SVG折線指向動畫以創建動態金融股票圖表

問題描述

1 個解決方案

解決方案1
0 2019-01-04 20:18:20

平滑SVG折線指向動畫以創建動態金融股票圖表

問題描述

1 個解決方案

解決方案1 0 2019-01-04 20:18:20

解決方案1
0 2019-01-04 20:18:20