Question

暂时解决这个问题并在网上寻找解决方案无效。

基本上如果我有一个精灵位于（10,10），我想把它移到说（50,100），整个过程需要2秒或我指定的任何持续时间。这背后的确切数学是什么？我使用基于距离的解决方案来确定速度，但只是使用随机修改器来控制过程。我需要更精确的东西才能在一段时间内完全执行。

非常感谢有关此问题的任何帮助！

Answer 1

假设线性插值（即以恒定速率从起始位置直线移动到终点位置）：

从开始到目的地的向量是目的地 - 开始，即您的示例（40,90）。

如果您希望在两秒钟内完成此操作，则需要将其除以2以获得每秒行进的距离，因此您的示例为每秒（20,45）。

要在任何给定时间获取位置，首先记录开始时间并计算当前时间减去开始时间（以秒为单位）。因此，如果动画从12：01：30.000开始，现在是12：01：31.500，那么自动画开始以来已经过了1.5秒。

要获取当前位置，请将起始位置添加到每秒移动矢量*经过的时间，因此在我的示例中：

（10,10）+（20,45）* 1.5 =（10,10）+（30,67.5）=（40,77.5）

Answer 2

这只是插值和时间的事情。有线性，窦，二次，......

以下是actionscript中的更多信息和示例：link

Answer 3

仔细研究jQuery的动画算法......也许你可以使用一些代码。

http://code.jquery.com/jquery-1.6.1.js（搜索“自定义：”作为起点）。

Answer 4

您需要一些信息才能执行此操作，开始位置，结束位置，持续时间和已用时间。

这是动作中的一个例子：

package {
    import flash.utils.getTimer;
    import flash.events.Event;
    import flash.display.Shape;
    import flash.geom.Point;
    import flash.display.Sprite;

    public class Mover extends Sprite {

        private var circle      :Shape;
        private var start       :Point;
        private var end         :Point;
        private var duration    :int;

        public function Mover() {

            // first we create something to move, like, a circle
            circle = new Shape();
            circle.graphics.beginFill(0xff00ff);
            circle.graphics.drawCircle(0, 0, 20);
            addChild(circle);

            // start and end positions
            start = new Point(0, 0);
            end = new Point(100, 100);

            // and finally, the duration, i'm using milliseconds
            duration = 2000;

            // this event handler will run each frame
            addEventListener(Event.ENTER_FRAME, handleEnterFrame);
        }

        private function handleEnterFrame(event:Event):void {
            // we figure out how much of the animation has elapsed by using getTimer
            // should you want to use a start time, add it here 
            var progress:Number = getTimer() / duration;

            // we need to clamp our progress so we don't under- or overshoot the target
            if(progress < 0) progress = 0;
            if(progress > 1) progress = 1;


            // then it's a matter of setting the position
            // we use the start position as a base and then gradually add in 
            // the difference between the start and the end
            circle.x = start.x + (end.x - start.x) * progress;
            circle.y = start.y + (end.y - start.y) * progress;  
        }
    }
}

如果你不是对如何感兴趣而只是想要结果，我会全心全意地推荐一个补间引擎，如TweenLite或其他任何一个。请远离闪光灯附带的那个，这有点废话。

根据持续时间将对象从一个点移动到另一个点

4 个答案: