Question

我正在尝试使用SVG和HTML创建简单的动画。目标是：

拍摄第一张照片并将其从位置（80,100）移动到（100,100）
拍摄第二张照片并将其从位置（80,100）移动到（95,100）
拍摄第三张照片并将其从位置（80,100）移动到（90,100）
隐藏所有三张图片
重复步骤1-4

我有这样的事情：

recorder.stopRecording(() => {
    var blob = recorder.getBlob(); 
    console.log(this) // <= this refers to component
});

在这种情况下，第一张照片从（80,100）移动到（100,100）但是一旦到达最终位置，它就会从（80,100）开始再次移动。

如何让所有后续照片“等待”所有其余照片，然后再次从（80,100）开始移动第一张照片？

Answer 1

我不确定第4步是什么意思，因为它意味着第5步会移动不可见的项目，但是你通过将它们的开始设置为上一个动画结束事件来制作动画等等......

<svg width="500" height="500">
    <defs>
        <path id="path1" d="M 0 0 l 20 0"/>
    </defs>
    <rect width="50" height="50" fill="blue">
      <animateMotion id="motion1" begin="0s;motion2.end" dur="1" rotate="0" fill="freeze">
         <mpath xlink:href="#path1"/>
      </animateMotion>
    </rect>
    <rect y="80" width="50" height="50" fill="blue">
      <animateMotion id="motion2" begin="motion1.end" dur="1" rotate="0" fill="freeze">
         <mpath xlink:href="#path1"/>
      </animateMotion>
    </rect>
</svg>

Answer 2

请注意，如果您只是直线移动，则无需使用<animateMotion>。您只需为x和y属性设置动画。

<svg width="500" height="500" viewBox="0 0 150 150">

   <image xlink:href="http://lorempixel.com/output/cats-q-c-30-30-1.jpg" height="30" width="30" x="80" y="100">
     <animate id="one" attributeName="x" begin="0s;three.end+2s" dur="1s" fill="freeze"
              from="80" to="100"/>
     <animate attributeName="y" begin="0s;three.end+2s" dur="1s" fill="freeze"
              from="100" to="100"/>
     <set attributeName="opacity" to="1" begin="0s;three.end+2s" fill="freeze"/>
     <set attributeName="opacity" to="0" begin="three.end+1s"/>
   </image>
   
   <image xlink:href="http://lorempixel.com/output/food-q-c-30-30-3.jpg" height="30" width="30" x="80" y="100"
          opacity="0">
     <animate id="two" attributeName="x" begin="one.end" dur="1s" fill="freeze"
              from="80" to="100"/>
     <animate attributeName="y" begin="one.end" dur="1s" fill="freeze"
              from="100" to="70"/>
     <set attributeName="opacity" to="1" begin="one.end" fill="freeze"/>
     <set attributeName="opacity" to="0" begin="three.end+1s"/>
   </image>

   <image xlink:href="http://lorempixel.com/output/people-q-c-30-30-3.jpg" height="30" width="30" x="80" y="100"
          opacity="0">
     <animate id="three" attributeName="x" begin="two.end" dur="1s" fill="freeze"
              from="80" to="100"/>
     <animate attributeName="y" begin="two.end" dur="1s" fill="freeze"
              from="100" to="40"/>
     <set attributeName="opacity" to="1" begin="two.end" fill="freeze"/>
     <set attributeName="opacity" to="0" begin="three.end+1s"/>
   </image>

</svg>

HTML svg动画问题

2 个答案: