2
我想通过使用JavaScript这些曲线移动对象的移动对象。当我点击一个对象时,对象在曲线上移动。我尝试了jquery插件的动画方法,但它不起作用。 我无法找到使用javascript的方法。可以使用SVG,也可以使用javascript来完成。
请任何一个能指导我
我想通过使用JavaScript这些曲线移动对象的移动对象。当我点击一个对象时,对象在曲线上移动。我尝试了jquery插件的动画方法,但它不起作用。 我无法找到使用javascript的方法。可以使用SVG,也可以使用javascript来完成。
请任何一个能指导我
与jQuery路径,你可以定义一些JavaScript的动画: https://github.com/weepy/jquery.path
你可以看到我的代码在这里工作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 – ana 2013-02-16 08:05:21