您将如何为某些内容设置动画以使其遵循曲线? [英] How would you animate something so that it follows a curve?

问题描述

如果我有
<div id="curve" style="position:relative; height:100px; width:100px;/>

如何让它在曲线上移动?我已经用谷歌搜索了一切，但似乎找不到另一个可以同时调用两个函数的例子.这是我想要的那种代码，但不起作用:

How would I make it move on a curve? I've googled and everything but can't seem to find another example that would call two functions at once. This is the kind of code I would like, but doesn't work:

$('#curve').click(function () {
    $(this).animate(
        { 
            top: 400,
            left = $(this).left() + $(this).left()*$(this).left()
        },
        'slow',
        function() { $(this).animate( { left: 600 }, 'fast' ); }
    );
});

即使这不是正确的代码，我相信 animate 只需要目的地"才能到达目的地，所以我认为动态目的地是行不通的.我在寻找什么来完成这项工作?

Even if that's not correct code, I believe animate only takes "destinations" for something to go to, so a dynamic destination wouldn't work I think. What am I looking for to make this work?

我肯定会选择那个插件，但我也想知道为什么这段代码不能像我期望的那样工作.

: I'll definitely pick up that plugin, but I'm also wonder why this bit of code doesn't work as I'd expect it to.

这是使用 for 循环和延迟方法的另一种尝试

Here's another attempt using a for loop and the delay method

$('#curve').click(function () {
    for (var i=0; i<400; i++ )
    {
        $(this).delay(1000);
        $(this).css( { top: i, left: i*1.5 } );
    }
});

除非它立即进入那个位置，没有延迟或任何东西.所以如果它从 [0,0] 开始，只要我点击它，它就会传送到 [400,600].为什么延迟不起作用?

Except it just instantly goes to that position, no delay or anything. so if it was starting at [0,0], as soon as I click it it teleports to [400,600]. Why doesn't the delay work?

推荐答案

我觉得这一次，你必须在 js 中一点一点地重新计算动画曲线，然后一点一点地移动来完成(=你可能会找到插件或者你必须自己做所有的数学计算)

I think that this time, you have to recalculate animated curve part by part in js and then do it by moving by little parts (= you probably could find plugin OR you'll have to do all the math by yourself)

编辑 2:之前添加的链接已移动=> http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/.谢谢，扎克.

Edit 2: Previously added link was moved=> http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/. Thanks, Zach.

编辑 1:这引起了我的兴趣，所以我做了很少的谷歌研究 - 就像我想的那样:插件准备好在这里使用:http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/

Edit 1: this intrigued me, so I did little google research - just as I thought: plugin ready for use here: http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/

这篇关于您将如何为某些内容设置动画以使其遵循曲线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！