es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Mi animación de JS reinicia su margen superior (marginTop), pero no su margen izquierdo (marginLeft).

Mi animación de JS reinicia su margen superior (marginTop), pero no su margen izquierdo (marginLeft).

11 Jul, 2023 Programación

Soy súper novato en las animaciones de JavaScript. Acabo de descubrir cómo agregar el segundo movimiento a mi animación.
Al ejecutar la función funk(), la pelota se mueve hacia abajo y hacia la derecha. Cuando se activa la función funktre(), la pelota vuelve a su posición inicial de marginTop pero conserva su posición de marginLeft.
¿Por qué vuelve a la parte superior? Quiero que la segunda animación, funktre(), mueva la pelota desde la posición final de funk().

const ball = document.querySelector("#en");
ball.addEventListener("click", funk);

function funk() {
    let id = null;
    let position = 0;
    clearInterval(id);
    id = setInterval(funkto, 5);
        function funkto() {
            if (position == 450) {
                clearInterval(id);
                funktre();
                // agregar nueva función aquí
            }
            else {
                stop();
                position++;
                ball.style.marginLeft = position + "px";
                ball.style.marginTop = position + "px";
            }
        }
};

function stop() {
    ball.removeEventListener("click", funk);
};

function funktre() {
    let idd = null;
    let pos = 0;
    clearInterval(idd);
    idd = setInterval(funkfire, 5);
        function funkfire() {
            if (pos == 200) {
                clearInterval(idd);
                // agregar nueva función aquí
            }
            else {
                pos++;
                ball.style.marginTop = pos + "px";
            }
        }
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que la función funktre() mueva la pelota desde la posición final de la función funk(), debes actualizar la posición inicial de la pelota en la función funktre(). Actualmente, empieza en la parte superior de la pantalla porque pos se inicializa en 0.

    Para solucionar esto, puedes pasar la posición final de la función funk() a la función funktre() y actualizar la posición inicial de la pelota en la función funktre() para que sea la posición final de la función funk(). Así es cómo puedes hacerlo:

    const ball = document.querySelector("#en");
ball.addEventListener("click", funk);

function funk() {
  let id = null;
  let position = 0;
  clearInterval(id);
  id = setInterval(funkto, 5);
  function funkto() {
    if (position == 450) {
      clearInterval(id);
      funktre(position); // pasa la posición final de funk() a funktre()
    } else {
      stop();
      position++;
      ball.style.marginLeft = position + "px";
      ball.style.marginTop = position + "px";
    }
  }
}

function stop() {
  ball.removeEventListener("click", funk);
}

function funktre(startPos) { // toma la posición inicial como parámetro
  let idd = null;
  let pos = startPos; // usa la posición final de funk() como posición inicial
  clearInterval(idd);
  idd = setInterval(funkfire, 5);
  function funkfire() {
    if (pos == 200) {
      clearInterval(idd);
    } else {
      pos++;
      ball.style.marginTop = pos + "px";
    }
  }
}

    Con estos cambios, la función funktre() moverá la pelota desde la posición final de la función funk() en lugar de comenzar en la parte superior de la pantalla.

Comments are closed.