Une brève discussion sur quelques réflexions sur le mouvement parabolique des images en HTML5

Il est courant que des objets/images se déplacent dans une parabole ou, plus précisément, le long d'une courbe de Bézier. Il s'agit d'une exigence courante dans le développement H5. Ainsi, comment calculer rapidement la trajectoire de mouvement en fonction du projet de conception est le premier problème que rencontrent les développeurs. résoudre.

La taille de brouillon de conception couramment utilisée pour le développement H5 ici est de 640 * 1008, donc l'idée de solution basée sur cette taille est la suivante :

1. Tout d'abord, exportez séparément l'élément à déplacer dans PS vers un png. Si l'itinéraire de déplacement a été planifié dans le projet de conception, vous devez également exporter l'itinéraire au format png ;

2. Créez un nouveau fichier dans AI avec la même taille que le brouillon de conception, puis faites glisser deux fois l'élément de déplacement dans le fichier. S'il existe un itinéraire de mouvement, faites-le également glisser, comme indiqué ci-dessous :

Ce qu'il faut noter ici, c'est le placement de l'image de déplacement. Le point de départ et le point final du chemin doivent correspondre au point de déplacement de l'image. Les situations correspondantes sont les suivantes :

1. Il n'y a pas de traitement de déformation dans la toile, le point mobile est donc le coin supérieur gauche de l'image.
2. Dans Canvas, l'image a été traduite et déplacée car dx et dy dans drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) sont ajoutés en fonction de x1 et y1 dans Translate(x1, y1). décalage final.
3. Si l'élément est positionné par position:absolute et que la position est contrôlée par translation3d(x, y, z) dans la transformation, le décalage doit être x, y. Habituellement, dans la transformation, nous pouvons imiter les marges gauche, supérieure et supplémentaire pour contrôler la. position de l'élément, ajoutez un translation3D(marginLeftX, marginLeftY, 0) supplémentaire dans la transformation. La valeur de cette marge doit également être prise en compte.

3. Dans AI, utilisez les touches ctrl + r pour extraire la ligne de référence et déplacez l'image de l'élément pour extraire ses positions x et y, comme indiqué dans la figure ci-dessous :

Sélectionnez ensuite l'outil Plume et cliquez sur le point de départ et le point final. Ne relâchez pas la souris après avoir cliqué sur le point final. Faites glisser l'IA directement et elle ajoutera automatiquement 2 points de contrôle. position des deux points de contrôle pour ajuster le stylo. Le but du chemin généré par l'outil est jusqu'à ce qu'il soit cohérent avec le chemin de la ligne de référence sur le brouillon de conception, comme indiqué ci-dessous :

Après avoir fait glisser jusqu'à la position souhaitée, relâchez la souris et appuyez sur Entrée sur le clavier pour confirmer le chemin. Si le chemin décrit ne correspond pas à ce que vous souhaitez, vous pouvez continuer à faire glisser les points de contrôle pour effectuer des ajustements.

4. Une fois le réglage terminé, faites glisser deux lignes de référence supplémentaires jusqu'à la position du point de contrôle 1, puis ouvrez le panneau d'informations via la barre de menu - fenêtre - informations et modifiez le point de départ, le point de contrôle, le point final et trois points. respectivement. Retirez les coordonnées.

5. Calculez respectivement la différence de pixels du point de contrôle, du point final et du point de départ, et calculez les coordonnées réelles du point de contrôle et du point final en fonction des valeurs réelles des coordonnées x, y et de la différence de pixels de l'image à déplacer en H5. . Combinez ensuite ces trois coordonnées Cliquez sur Appliquer à la formule.