Bezier點動畫

Question

我需要很多不同的路徑來爲幻燈片圖片設置動畫效果。動畫將在Bezier曲線定義的點上進行。但我沒有找到任何畫廊或這條道路的例子。 第二種方法是轉換點的SVG路徑，但它如何實現？ 沿途有任何現成的動畫畫廊嗎？

Answer 1

這是一個起點。這是直接從the Mozilla Developer Network site for the SVG animateMotion function複製的。

<svg width="120" height="120" viewBox="0 0 120 120" 
 
    xmlns="http://www.w3.org/2000/svg" version="1.1" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" > 
 

 
    <!-- Draw the outline of the motion path in grey, along 
 
     with 2 small circles at key points --> 
 
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" 
 
      stroke="lightgrey" stroke-width="2" 
 
      fill="none" id="theMotionPath"/> 
 
    <circle cx="10" cy="110" r="3" fill="lightgrey" /> 
 
    <circle cx="110" cy="10" r="3" fill="lightgrey" /> 
 

 
    <!-- Here is a red circle which will be moved along the motion path. --> 
 
    <circle cx="" cy="" r="5" fill="red"> 
 

 
     <!-- Define the motion path animation --> 
 
     <animateMotion dur="6s" repeatCount="indefinite"> 
 
      <mpath xlink:href="#theMotionPath"/> 
 
     </animateMotion> 
 
    </circle> 
 
</svg>