Una breve discusión sobre algunas reflexiones sobre el movimiento parabólico de imágenes en HTML5

Es común que los objetos/imágenes se muevan en una parábola o, más exactamente, a lo largo de una curva de Bézier. Este es un requisito común en el desarrollo de H5. Entonces, cómo calcular rápidamente la ruta de movimiento basándose en el borrador del diseño es el primer problema que enfrentan los desarrolladores. resolver.

El tamaño de borrador de diseño comúnmente utilizado para el desarrollo H5 aquí es 640 * 1008, por lo que la idea de solución basada en este tamaño es la siguiente:

1. Primero, exporte el elemento que se desplazará en PS a un png por separado. Si la ruta de movimiento se planificó en el borrador del diseño, también debe exportar la ruta como png;

2. Cree un nuevo archivo en AI con el mismo tamaño que el borrador del diseño y luego arrastre el elemento de desplazamiento al archivo dos veces. Si hay una ruta de movimiento, arrástrelo también, como se muestra a continuación:

Lo que hay que tener en cuenta aquí es la ubicación de la imagen de desplazamiento. El punto inicial y el punto final del camino deben corresponder al punto en movimiento de la imagen. Las situaciones correspondientes son las siguientes:

1. No hay procesamiento de deformación en el lienzo, por lo que el punto en movimiento es la esquina superior izquierda de la imagen.
2. En lienzo, la imagen se ha traducido y movido porque dx y dy en drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) se agregan en función de x1 e y1 en Translate(x1, y1). compensación final.
3. Si el elemento está posicionado por posición: absoluta y la posición está controlada por traducir3d (x, y, z) en transformación, el desplazamiento debe ser x, y. Por lo general, en transformación podemos imitar el margen izquierdo, superior y adicional para controlar el. posición del elemento, agregue un Translate3D(marginLeftX, marginLeftY, 0) adicional en la transformación. El valor de este margen también debe tenerse en cuenta.

3. En AI, use las teclas Ctrl + r para extraer la línea de referencia y mueva la imagen del elemento para extraer sus posiciones xey, como se muestra en la siguiente figura:

Luego seleccione la herramienta de lápiz y haga clic en el punto inicial y final. No suelte el mouse después de hacer clic en el punto final. Arrastre la IA directamente y automáticamente agregará 2 puntos de control. posición de los dos puntos de control para ajustar el lápiz. El propósito de la ruta generada por la herramienta es hasta que sea consistente con la ruta de la línea de referencia en el borrador del diseño.

Después de arrastrar a la posición deseada, suelte el mouse y presione Entrar en el teclado para confirmar la ruta. Si la ruta delineada no es la que desea, puede continuar arrastrando los puntos de control para realizar ajustes.

4. Una vez completado el ajuste, arrastre dos líneas de referencia adicionales a la posición del punto de control 1, luego abra el panel de información a través de la barra de menú - ventana - información y cambie el punto de inicio, el punto de control, el punto final y los tres puntos. respectivamente. Saque las coordenadas.

5. Calcule la diferencia de píxeles del punto de control, el punto final y el punto inicial respectivamente, y calcule las coordenadas reales del punto de control y del punto final en función de los valores reales de las coordenadas x, y y la diferencia de píxeles de la imagen que se desplazará en H5. Luego combine estas tres coordenadas. Haga clic en Aplicar a la fórmula.