Gostaria de iniciar um projeto com React e TypeScript, com o objetivo de criar um jogo simples. Pretendo utilizar uma folha de sprite para criar os movimentos do personagem. Para animar a mudança de direção ao caminhar, irei validar uma propriedade chamada isFlipped.

O primeiro movimento será o "Idle" (parado), que será repetido algumas vezes antes de o personagem assumir uma das posições.

O segundo movimento será o "StartWalk" (iniciar caminhada), que sempre será acionado antes do movimento "Walk" (caminhada), mas apenas quando o personagem já estiver na posição atual para iniciar a caminhada.

O terceiro movimento será o "Walk" (caminhada), que será iniciado sempre após o movimento "StartWalk" e "ChangeSideWhenWalk" (mudança de lado durante a caminhada), repetindo várias vezes até parar.
Teria como refazer com a lógica da animação de caminhada (Walk) é que ela funcione apenas enquanto a tecla estiver pressionada (keydown) e pare quando a tecla for solta (keyup). Essa animação ocorre após as animações StartWalk e ChangeSideWhenWalk serem finalizadas?

O quarto movimento será o "ChangeSideWhenWalk" (mudança de lado durante a caminhada), que será acionado somente quando o personagem mudar de direção. Se estiver virado para a esquerda e o jogador clicar para a direita, ou se estiver virado para a direita e o jogador clicar para a esquerda, a animação correspondente será iniciada.
Ira ser executada sempre que a direção atual for oposta à direção que o jogador pressionou. Por exemplo, se o jogador pressionar a seta para a esquerda (ArrowLeft) e a animação estiver voltada para a direita (Right), a animação será iniciada. Da mesma forma, se o jogador pressionar a seta para a direita (ArrowRight) e a animação estiver voltada para a esquerda (Left), a animação também será iniciada.