如何仅为连接的播放器设置动画，不为新播放器或页面刷新设置动画

Question

我正在为浏览器创建一个多人棋盘游戏，棋子可以在方块之间移动，类似于国际象棋。每当玩家移动时，都会将其发送到服务器，将新位置计算为新状态，并将此新状态通过websocket广播给所有玩家。我已经创建了基本的UI，并且工作正常。

现在，我要为片段的移动设置动画。由于董事会是国家的职能，因此，如果我只是在新状态下发送新职位，该作品就会消失并出现在新位置，而不会产生动画过渡。为此，我不仅要发送职位，还要发送以前的职位，就像这样：

export const Piece = ({ piece, cellSize }) => {
    const pieceRef = useRef(null);

    useEffect(() => {
        if (piece.previousLocation) { // Move piece from previousLocation to end location
            const deltaX = (piece.location.x - piece.previousLocation.x) * cellSize;
            const deltaY = (piece.location.y - piece.previousLocation.y) * cellSize;
            pieceRef.current.to({ x: deltaX, y: deltaY, duration: 0.2, });// to() is a method of `Konva.Node` instances
        }
    }, [piece.location]);

    const initialLocation = piece.previousLocation || piece.location;

    return (
        <Group ref={pieceRef}>
            {/* ... draw the piece with Konva at initialLocation */}
        </Group>
    );
}

这很好用，但是我有一个问题：如果玩家刷新页面（或者如果有新玩家加入游戏），动画也会显示出来，在这种情况下是没有意义的。

您能建议仅在更新时显示动画而不在页面的第一次加载时显示动画的任何方法吗？