如何触发svg animate元素开始通过javascript与任意事件动画?我想象的东西begin="mySpecialEvent",然后我可以发送mySpecialEvent并且动画将开始(或者如果它已经播放则再次开始).
如果我有
<div id="curve" style="position:relative; height:100px; width:100px; />
我怎么能让它在曲线上移动?我用谷歌搜索了一切但似乎无法找到另一个可以同时调用两个函数的例子.这是我想要的代码,但不起作用:
$('#curve').click(function () {
$(this).animate(
{
top: 400,
left = $(this).left() + $(this).left()*$(this).left()
},
'slow',
function() { $(this).animate( { left: 600 }, 'fast' ); }
);
});
Run Code Online (Sandbox Code Playgroud)
即使这不是正确的代码,我相信动画只需要"目的地"来进行某些操作,因此我认为动态目的地不起作用.我想要做些什么呢?
编辑::我肯定会拿起那个插件,但我也想知道为什么这些代码不能像我期望的那样工作.
这是使用for循环和延迟方法的另一种尝试
$('#curve').click(function () {
for (var i=0; i<400; i++ )
{
$(this).delay(1000);
$(this).css( { top: i, left: i*1.5 } );
}
});
Run Code Online (Sandbox Code Playgroud)
除了它只是立即到那个位置,没有延迟或任何东西.所以,如果它是从[0,0]开始,一旦我点击它就会传送到[400,600].为什么延迟不起作用?
我对画布有点新意,如果这是一个微不足道的问题,请原谅.
我希望能够在路径(定义为bezier路径)后设置对象的动画,但我不知道该怎么做.
我看过拉斐尔,但我无法弄清楚如何随着时间的推移走这条路.
Cake JS在演示中看起来很有前途,但我真的很难在文档中挣扎,或者在这种情况下缺乏文档.
有没有人有这方面的实例?