Блог

Я создаю игру 2048 с помощью react. Проблема, с которой я сталкиваюсь, заключается в том, что я использую transform translate для создания движущейся анимации, которая работает нормально. Проблема в том, что после выполнения перемещения я повторно рендерю совершенно новую доску с плитками в новых позициях, и хотя это новая доска без какого-либо стиля, есть доля секунды, когда преобразование как бы «отменяется» и начинает возвращаться в исходное положение, что делает анимацию своего рода щелчком. Исходный код находится здесь: https://github.com/mudale222/2048 Живая версия здесь: https://agile-brushlands-91124.herokuapp.com / Любая помощь приветствуется. спасибо

РЕДАКТИРОВАТЬ: как и предлагалось, я попытаюсь изложить основной код, касающийся проблемы.

Это логика перемещения:

 let boardAfterChange = renderBoardChanged(keyPressed(e, board))

    if (boardAfterChange) {
        setTimeout(() => {
            board.squares = addAtRandomPosition(boardAfterChange)
            setBoard(board)
        }, 60)
    }
  

Это функция перемещения:

 moved.forEach(movedItem => {
        let boardSquareClassName = ".boardSquare"   movedItem.from
        let gap = parseFloat(window.getComputedStyle(document.querySelector(".game")).rowGap)
        let movingDistance = ($(boardSquareClassName).width()   gap) * movedItem.steps
        //blink joined position
        // joinedPos.forEach(joinedItemPos => {
        //     arr[joinedItemPos] = {"tranform": "scale(1.2)"}
        // });

        if (movedItem.direction === "up")
            arr[movedItem.from] = { "transform": "translateY(-"   movingDistance   "px)" }
        else if (movedItem.direction === "down")
            arr[movedItem.from] = { "transform": "translateY("   movingDistance   "px)" }
        else if (movedItem.direction === "right")
            arr[movedItem.from] = { "transform": "translateX("   movingDistance   "px)" }
        else if (movedItem.direction === "left")
            arr[movedItem.from] = { "transform": "translateX(-"   movingDistance   "px)" }
    });

    setBoard({ squares: board.squares, styles: arr })
  

И это функция рендеринга платы:

 const renderBoard = (boardArr) => {
    let counter = -1
    const jsx = (
        <div className="game">
            {boardArr.squares.map(number => {
                counter  
                return (
                    <div className="boardSquareWrapper" key={counter}>
                        <div key={counter} className={"boardSquare"   counter} style={boardArr.styles[counter] !== false ? boardArr.styles[counter] : { transform: "none" }} >
                            <div className={"boardSquareTextWrapper color"   number}>
                                <label className={"numberText"  
                                    (number.toString().length === 3 ? " threeDigitNumber" : "")  
                                    (number.toString().length === 4 ? " fourDigitNumber" : "")}>{number}</label>
                            </div>
                        </div>
                    </div>
                )
            })}
        </div>
    )

    return jsx
}
  

Как вы можете видеть, я в основном выполняю преобразование, и после завершения настройки я повторно визуализирую доску с новыми позициями. Вот где возникает проблема, когда преобразование на долю секунды начинает возвращаться, хотя это полностью новая плата.