你会如何​​动画东西，以便它遵循的曲线？ [英] How would you animate something so that it follows a curve?

问题描述

如果我有结果
＆LT; D​​IV ID =曲线的风格=的位置是：相对;高度：100像素;宽度：100像素; /＆GT;

我将如何使它成为一个移动曲线上？我GOOGLE了一切，但似乎无法找到这将要求两个功能同时另一个例子。这是一种code，我想的，但不工作：

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' ); }
    );
});

即使这不是正确的code，我认为动画只需要目的地的东西去，让动态目标是行不通的，我认为。我是什么寻找，使这项工作？

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?

:我一定会拿起插件，但我也想知道为什么，因为我希望它code这一点是行不通的。

: 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 的：previously添加链接感动=>的 HTTP：//foxparker.word$p$pss.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.word$p$pss.com/2009/09/22/bezier -curves和弧，在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屋！