主页 / 问题 / 1226470
Accepted
Monkey Mutant
Asked:2022-01-02 23:25:24 +0000 UTC2022-01-02 23:25:24 +0000 UTC

能达到同样的效果吗？

  • 772

有一个离题的 SVG 问题 =>如何按顺序对 UIBezier 线进行动画处理

当然这个可以在smil上实现

这就是我所做的

<svg viewBox="0 0 500 150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="#fff" stroke="red" stroke-width="1" />
    </marker>
  </defs>
  <path d="" fill="none" stroke="#000" stroke-width="1.2" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)">
    <animate attributeName="d" begin="0s" dur="4s" attributeType="XML" values="
    M20,120 50,130 120,120 180,100 220,130 300,120 340,125 410,90 490,140;
    M20,120 50,50 120,120 180,100 220,130 300,120 340,125 410,90 490,140;
    M20,120 50,50 120,120 180,20 220,130 300,120 340,125 410,90 490,140;
    M20,120 50,50 120,40 180,20 220,130 300,120 340,125 410,90 490,140;
    M20,120 50,50 120,40 180,20 220,50 300,120 340,125 410,90 490,140;
    M20,120 50,50 120,40 180,20 220,50 300,70 340,125 410,90 490,140;
    M20,120 50,50 120,40 180,20 220,50 300,70 340,55 410,90 490,140;
    M20,120 50,50 120,40 180,20 220,50 300,70 340,55 410,90 490,30;
    M20,120 50,50 120,40 180,20 220,50 300,70 340,55 410,40 490,30;
    M20,120 50,50 120,40 180,20 220,50 300,70 340,85 410,40 490,30;
    M20,120 50,130 120,120 180,100 220,130 300,120 340,125 410,90 490,140;" repeatCount="indefinite" keyTimes="0; 0.1; 0.15; 0.27; 0.30; 0.40; 0.45; 0.80; 0.90; 0.97; 1"/>
  </path>
</svg>

但正如你从他们的动画图片中看到的那样，存在某种抖动

在此处输入图像描述

是否可以使用 SVG 动画 - smil 来实现这种行为？

javascript

1 个回答

  1. Best Answer

    以相等的间隔为点设置动画看起来像这样：

    <svg viewBox="0 0 600 278" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <marker id="dot" viewBox="0 0 20 20" refX="10" refY="10" markerWidth="10" markerHeight="10">
      <circle cx="10" cy="10" r="3" fill="#fff" stroke="#485d7e" stroke-width="2" />
    </marker>
  </defs>
  <path d="" fill="none" stroke="#485d7e" stroke-width="3" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)">
    <animate attributeName="d" begin="0s" dur="2s" repeatCount="indefinite" attributeType="XML" 
             values="
    M19,250 70,250 121,250 171,250 222,250 273,250 323,250 374,250 424,250 475,250 526,250 576,250;
    M19,185 70,250 121,250 171,250 222,250 273,250 323,250 374,250 424,250 475,250 526,250 576,250;
    M19,202 70,14  121,250 171,250 222,250 273,250 323,250 374,250 424,250 475,250 526,250 576,250;
    M19,198 70,76  121,212 171,250 222,250 273,250 323,250 374,250 424,250 475,250 526,250 576,250;
    M19,199 70,60  121,222 171,181 222,250 273,250 323,250 374,250 424,250 475,250 526,250 576,250;
    M19,199 70,64  121,219 171,199 222,67  273,250 323,250 374,250 424,250 475,250 526,250 576,250;
    M19,199 70,64  121,220 171,195 222,115 273,67  323,250 374,250 424,250 475,250 526,250 576,250;
    M19,199 70,64  121,220 171,196 222,103 273,115 323,179 374,250 424,250 475,250 526,250 576,250;
    M19,199 70,64  121,220 171,196 222,106 273,103 323,198 374,218 424,250 475,250 526,250 576,250;
    M19,199 70,64  121,220 171,196 222,106 273,106 323,193 374,227 424,247 475,250 526,250 576,250;
    M19,199 70,64  121,220 171,196 222,106 273,106 323,194 374,224 424,248 475,43  526,250 576,250;
    M19,199 70,64  121,220 171,196 222,106 273,106 323,194 374,225 424,248 475,98  526,94  576,250;
    M19,199 70,64  121,220 171,196 222,106 273,106 323,194 374,225 424,248 475,83  526,135 576,209;
    M19,199 70,64  121,220 171,196 222,106 273,106 323,194 374,225 424,248 475,87  526,124 576,220;
    M19,199 70,64  121,220 171,196 222,106 273,106 323,194 374,225 424,248 475,87  526,127 576,217;
    M19,199 70,64  121,220 171,196 222,106 273,106 323,194 374,225 424,248 475,87  526,127 576,218;" 
             keyTimes="
    0; 0.066; 0.133; 0.2; 0.266; 0.333; 0.4; 0.466; 0.533; 0.6; 0.666; 0.733; 0.8; 0.866; 0.933; 1"
    />
  </path>
</svg>

    我认为反弹是最简单的脚本：

    document.querySelector('div.calc').addEventListener('input', function(ev) {
  p1.value = Math.round(+pe.value - (+pb.value - +pe.value) / 3.72);
  p2.value = Math.round(+pe.value + (+pb.value - +pe.value) / 15.5);
  p3.value = Math.round(+pe.value - (+pb.value - +pe.value) / 46.5);
});
    .calc { display: flex; flex-flow: column nowrap; width: 400px; }
    <div class="calc">
  <label>Исходная точка <input id="pb" type="number" max=250 value=250></label>
  <label>Точка отскока 1 <input id="p1" type="number" value=0 readonly></label>
  <label>Точка отскока 2 <input id="p2" type="number" value=0 readonly></label>
  <label>Точка отскока 3 <input id="p3" type="number" value=0 readonly></label>
  <label>Конечная точка <input id="pe" type="number" max=250 value=100></label>
</div>

    当然，基于此，您可以自动计算坐标和时间，并且只传输最终值的数组。这已经是一个完整的插件，但这样的任务不是问题;-)

    • 4

相关问题