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

Animating a list of points to move away from a given touch location

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

1) 我有一个列表,其中包含我正在制作动画的二维平面(左)上的点。

2)在位置x处进行了触摸,并绘制了一个不可见的圆圈(中间)。我希望该圆圈中包含的所有点都远离中心 (x)。

3) 最终结果示例(右)

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

由于我计划在屏幕触摸上实现此功能,因此有可能在第一个触摸动画已经在进行时发生另一个触摸。我该如何处理这些冲突?

图一:

这是我的 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;
}

那么你需要一个在每一帧都调用 move 并在没有移动点时最终停止的动画

你可以找到完整的例子 here