动画一个点列表以远离给定的触摸位置

Question

我正在努力实现的动画如下图1所示。

1）我有一个列表，其中包含我正在制作动画的2D平面（左）上的点。

2）在位置x处进行触摸，并绘制不可见的圆（中间）。我希望该圆圈中包含的所有点都远离中心（x）。

3）最终结果示例（右）

我打算以一种方式应用它，我可以提供每帧每个点上应用的任何点列表，触摸位置，numFrames和力。返回一个长度为numFrames的数组，每个数组项都是一个已经动画的列表。

由于我计划在屏幕触控上实现此功能，因此在第一次触摸动画正在进行时，可能会发生另一次触摸。我该如何处理这些碰撞？

图1：

Answer 1

这是我的2美分，你需要一个点列表，这些点应该有一个位置，一个速度和一个更新位置的方法。像这样的东西

public class Point {
    public float x, y;
    public boolean isMoving;
    private float dx,dy;

    public Point(float x, float y){
        this.x = x;
        this.y = y;
    }

    public boolean move(float maxWidth, float maxHeight){
        if(!isMoving) return false;

        // update the position 
        x += dx;
        y += dy;

        dx /= FRICTION;
        dy /= FRICTION;

        // bounce...?
        if(x < 0 || x > maxWidth){
            dx *= -1;
        }
        if(y < 0 || y > maxHeight){
            dy *= -1;
        }

        if(Math.abs(dx) < MOVEMENT_THRESHOLD && Math.abs(dy) < MOVEMENT_THRESHOLD){
            isMoving = false;
        }

        return isMoving;
    }
}

在每个触摸事件中，您将力施加到半径内的每个点并设置其速度

for(Point point : mPoints){
    float distance = point.distance(x,y);

    if(distance > mTouchRange) continue;

    float force = (float) Math.pow(1 - (distance / mTouchRange), 2) * mForceFactor;
    float angle = point.angle(x,y);

    point.dx -= Math.cos(angle) * force;
    point.dy -= Math.sin(angle) * force;
    point.isMoving = true;
}

然后你需要一个动画，在每一帧上调用移动，并在没有移动点时最终停止

你可以找到完整的例子here