如何使用javascript在曲线上移动对象答案

【问题标题】：How to move an object over a curve using javascript如何使用javascript在曲线上移动对象
【发布时间】：2013-02-15 12:20:53
【问题描述】：

我想使用 javascript 在这些曲线上移动一个对象。当我单击一个对象时，该对象在曲线上移动。我尝试了 jquery 插件的动画方法，但它不起作用。我找不到使用 javascript 的方法。是否可以使用 SVG 或使用 javascript 来完成。

请任何人指导我

【问题讨论】：

标签： javascript jquery svg jquery-animate

【解决方案1】：

使用 jquery path 你可以定义几个 javascript 动画： https://github.com/weepy/jquery.path

【讨论】：

【解决方案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>

【讨论】：

你做得很好，但你的代码实际上是在创建一个路径，然后对象在它上面移动。我想要的是我展示的图片是我想在这条曲线图像上移动对象的图像@user2015930