在 AS3 中从 A 点移动到 B 点的物体后面出现圆圈

Question

我在 AS3 中获得了这段代码，它使一艘船从 A 点移动到 B 点等

tween = new Tween(boat, "x", None.easeNone, boat.x, lastClick.x, 1, true); 
tweenY = new Tween(boat, "y", None.easeNone, boat.y, lastClick.y, 1, true);

(video here)

我想添加一些出现在船后方的圆圈（就像地图上的路径）。

我尝试过使用线条，但它不太适合（因为它立即出现，当然，它不是圆形）。

my_shape.graphics.moveTo(lastClick.x, lastClick.y); 
my_shape.graphics.lineTo(event.currentTarget.x, event.currentTarget.y); 
my_shape.graphics.lineTo(event.currentTarget.x, event.currentTarget.y);

你知道我怎样才能添加一些从 lastClick 到 event.currentTarget 的圆圈吗？ (video of an example here)

Answer 1

由于您使用的是补间，因此您可以在补间更新时绘制您的点。如果您直接在时间轴上编写代码，您可能需要从函数中删除 "private"：

// draw a point every X pixels
private var DISTANCE_BETWEEN_POINTS:int = 20;
private var pointsArray:Array = [];
private var lastPoint:Point;

tween = new Tween(boat, "x", null, boat.x, lastClick.x, 1, true);
tween.addEventListener(TweenEvent.MOTION_CHANGE, onTweenUpdate);
tween.addEventListener(TweenEvent.MOTION_FINISH, onTweenEnd);

tweenY = new Tween(boat, "y", null, boat.y, lastClick.y, 1, true);
tweenY.addEventListener(TweenEvent.MOTION_CHANGE, onTweenUpdate);
tweenY.addEventListener(TweenEvent.MOTION_FINISH, onTweenEnd);

// for the start we assume the last drawn point was at the boat origin
lastPoint = new Point(boat.x, boat.y);    

// called on every tween update
private function onTweenUpdate(e:TweenEvent):void
{
    // draw a point if the distance to the last point is greater than DISTANCE_BETWEEN_POINTS
    if (distance(lastPoint.x, lastPoint.x, boat.y, lastPoint.y) > DISTANCE_BETWEEN_POINTS)
    {
        // pseudocode here. Add your points as movieclips or just draw circles
        // you might adjust the point position as this will draw a point over the boat.
        // you might want to add a layer where you draw points that will be under your boat
        var point:MovieClip = new PointMC();
        point.x = boat.x;
        point.y = boat.y;
        addChild(point);

        // remember the last drawn point position for the next one
        lastPoint = new Point(boat.x, boat.y);

        // add point to array so we can remove them when the tween is done
        pointsArray.push(point);
    }
}

// called when a tween ends
// remove event listeners so your tweens can be garbage collected
private function onTweenEnd(e:TweenEvent):void
{
    tween.removeEventListener(TweenEvent.MOTION_CHANGE, onTweenUpdate);
    tween.removeEventListener(TweenEvent.MOTION_FINISH, onTweenEnd);
    tweenY.removeEventListener(TweenEvent.MOTION_CHANGE, onTweenUpdate);
    tweenY.removeEventListener(TweenEvent.MOTION_FINISH, onTweenEnd);

    removePoints();
}

private function removePoints():void
{
    for (var i:int = 0; i < pointsArray.length; i++)
    {
        removeChild(pointsArray[i]);
    }

    pointsArray = [];
}

// measures the distance between two points
private function distance(x1:Number, x2:Number, y1:Number, y2:Number):Number
{
    var dx:Number = x1 - x2;
    var dy:Number = y1 - y2;
    return Math.abs(Math.sqrt(dx * dx + dy * dy));
}

我强烈建议您切换到 TweenLite 进行补间运动 - 它很容易插入，您可以在一行中完成所有这些操作，而不必弄乱事件监听器诸如此类：

// move the boat to x and y in one go - DONE :)
TweenLite.to(boat, 1, {x: lastClick.x, y: lastClick.y, onUpdate: onTweenUpdate});

此外，它还可以做很多其他事情，例如贝塞尔曲线、反向等。一旦您习惯了它，您就会问自己，以前没有它您是如何生活的:)

在 AS3 中从 A 点移动到 B 点的物体后面出现圆圈

Making circle appears behind object that's moving from Point A to Point B in AS3

flash

shape

actionscript-3