如何通過曲線使用JavaScript

Question

我想通過使用JavaScript這些曲線移動對象的移動對象。當我點擊一個對象時，對象在曲線上移動。我嘗試了jquery插件的動畫方法，但它不起作用。 我無法找到使用javascript的方法。可以使用SVG，也可以使用javascript來完成。

請任何一個能指導我

Answer 1

與jQuery路徑，你可以定義一些JavaScript的動畫： https://github.com/weepy/jquery.path

Answer 2

你可以看到我的代碼在這裏工作Demo jsFFidle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <line class="line_svg" x1="75" y1="100" x2="275" y2="100" /> 
    <line class="line_svg" x1="75" y1="250" x2="275" y2="250" /> 
    <line class="line_svg" x1="75" y1="100" x2="75" y2="400" /> 
    <line class="line_svg" x1="175" y1="100" x2="175" y2="400" /> 
    <line class="line_svg" x1="275" y1="100" x2="275" y2="400" /> 
    <line class="line_svg" x1="75" y1="400" x2="275" y2="400" /> 
    <path id="path1" 
    d="M75,250 C 100,50 250,50 275,250" 
    d="M 275,250 C 250,400 100,400 75,250" fill="none" stroke="blue" stroke-width="7.06" /> 
     <circle cx="75" cy="250" r="18" fill="blue" /> 
     <circle cx="175" cy="100" r="18" fill="blue" /> 
     <circle cx="275" cy="250" r="18" fill="blue" /> 
     <circle cx="175" cy="400" r="18" fill="blue" /> 

<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > 
    <animateTransform 
      attributeName="transform" 
      begin="0s" 
      dur="10s" 
      type="rotate" 
      from="0 -100 -110" 
      to="360 150 150" 
      repeatCount="1" /> 
    <animateMotion dur="11s" repeatCount="1" rotate="auto" > 
     <mpath xlink:href="#path1"/> 
    </animateMotion> 

    <circle id="pointA" cx="75" cy="250" r="5" /> 
</svg>