Tengo una imagen, quiero mover la imagen desde su lugar actual (donde se colocó inicialmente) a otro lugar donde el usuario hace clic . Quiero decir, cuando el usuario hace clic en cualquier parte de la página Html, la imagen debe moverse allí y necesito hacer que esta sea una animación de movimiento para que la imagen se mueva de su lugar actual a otro lugar en 3 segundos (por ejemplo). ¿Cómo puedo hacer eso? ¿Puede vanilla JavaScript o jQuery ayudar a hacerlo? Solo quiero hacer esta animación de todos modos, pero React no funciona en mi computadora portátil de manera eficiente, así que responda en jQuery o en plain JavaScript .
En mi página html:
<img src="./wolf.png" alt="wolf" style="width:3%;" id="wolf">
En mi archivo css:
#wolf { animation-name: move; animation-duration: 3s; animation-fill-mode: forwards; } @keyframes move { /* Need help */ }En el archivo .js:
$(document).ready(function() { // Need help })Para averiguar dónde está el cursor del mouse al hacer clic en el usuario, puede usar
document.onclick= function(event) { pointerX = event.pageX; pointerY = event.pageY; } console.log('Cursor at: '+pointerX+', '+pointerY);Puede combinar esto con traducir en element.style.translate y mover el elemento desde la posición actual hasta donde el usuario ha hecho clic.
En https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API aprendemos que un DOMelement tiene un método animado.
var dX = 150, dY = 50; // TODO: proper distance between current and target location document.getElementById("wolf").animate( [ { transform: `translate(${dX}px, ${dY}py)` }, ], { duration: 3000 // should be linked to distance - 3px in 3s is **SLOW** } );Para que la duración dependa de la distancia, debe designar qué distancia debe tomar esos tres segundos (o lo que sea) y luego calcular la distancia de viaje. Pitágoras nos mostró cómo. Aquí hay un jsfiddle que hace todo eso: disfrute: https://jsfiddle.net/flowtron/0qkuvtd7/
En el núcleo hay los siguientes cálculos:
// once on pageload: screendiagonal = Math.sqrt( screen.width * screen.width + screen.height * screen.height ); // Pythagoras // every move - what are the X and Y distances to travel? let delta = { x: targetCoord.x - pos.x, y: targetCoord.y - pos.y }; let curdur = ( Math.sqrt(delta.x*delta.x+delta.y*delta.y) / screendiagonal ) * 3000; // Pythagoras - travel distance in time relative to screendiagonalEsto es para que la diagonal de la pantalla tome tres segundos.