Estoy tratando de animar un círculo desde el punto a hasta el punto b en un mapa hexadecimal. Estoy usando redux para manejar el estado del juego. Puedo hacer que la forma se mueva en el mapa hexadecimal, pero no puedo hacer que la forma se anime hasta la ubicación final, simplemente vuelve a mostrarse en la parte superior del hexágono en el que hice clic. Aquí está el código de renderizado principal:

 const root = document.getElementById("game") const ctx = root.getContext("2d") store.dispatch(generateMap(6)) render() function render() { cleanup() const state = store.getState() Map(ctx, state.game.map) Player(ctx, state.game.player.location) // a circle shape requestAnimationFrame(render) // } store.subscribe(render) window.addEventListener('resize', render) root.addEventListener('click', event => { const {x, y} = getMousePos(ctx, event) store.dispatch(movePlayer(point(x, y))) }) function cleanup() { root.width = window.innerWidth root.height = window.innerHeight ctx.translate(root.width * 0.5, root.height * 0.5) ctx.clearRect(0, 0, root.width, root.height) }

Cada vez que el jugador hace clic en el lienzo, obtengo el centro de hexágonos más cercano y establezco la ubicación de los jugadores en el estado. Cuando esto sucede, la tienda redux activa una nueva representación del lienzo.

Estoy configurando la ubicación de los jugadores con esta función reductora:

 movePlayer: (state, action) => { const map = state.map const start = state.player.location const end = action.payload state.player.location = selectNearestHex(map, point(x, y)).center }

Player y Map son las formas del lienzo:

Mapa:

 const {corners, isTraversable} = hex ctx.moveTo(0, 0) ctx.beginPath(); corners.forEach(corner => { ctx.lineTo(corner.x, corner.y) }) ctx.lineTo(corners[0].x, corners[0].y) ctx.lineWidth = 2 ctx.strokeStyle = '#3f3f3f' ctx.stroke() ctx.fillStyle = 'rgba(42, 160, 216, 0)' if (isTraversable) ctx.fillStyle = hex.color ctx.fill() ctx.closePath()

Jugador

 ctx.beginPath() ctx.arc(x, y, radius, 0, 2 * Math.PI, false) ctx.moveTo(x, y) if (fill) { ctx.fillStyle = fill ctx.fill() } if (stroke) { ctx.lineWidth = strokeWidth ctx.strokeStyle = stroke ctx.stroke() }

¡Gracias de antemano por cualquier ayuda!