A brief discussion on some thoughts on the parabolic motion of images in HTML5

It is common for objects/pictures to move in a parabola or, more accurately, along a Bezier curve. This is a common requirement in H5 development. So how to quickly calculate the movement path based on the design draft is the first problem that developers solve.

The commonly used design draft size for H5 development here is 640 * 1008, so the solution idea based on this size is as follows:

1. First, export the element to be displaced in PS to a png separately. If the movement route has been planned in the design draft, you also need to export the route as png;

2. Create a new file in AI with the same size as the design draft, and then drag the displacement element into the file twice. If there is a motion route, also drag it in, as shown below:

What needs to be noted here is the placement of the displacement image. The starting point and end point of the path should correspond to the moving point of the image. The corresponding situations are as follows:

1. There is no deformation processing in canvas, so the moving point is the upper left corner of the picture.
2. In canvas, the image has been translated and moved because dx and dy in drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) are added based on x1 and y1 in translate(x1, y1). final offset.
3. If the element is positioned by position:absolute and the position is controlled by translate3d(x, y, z) in transform, the offset should be x, y. Usually, in transform we may imitate left, top and additional margin To control the position of the element, add an additional translate3D(marginLeftX, marginLeftY, 0) in the transform. The value of this margin also needs to be taken into account.

3. In AI, use the ctrl + r keys to pull out the reference line, and move the element picture to pull out its x and y positions, as shown in the figure below:

Then select the pen tool and click at the starting point and end point. Do not release the mouse after clicking the end point. Drag the AI ​​directly and it will automatically add 2 control points. By moving the mouse, you can adjust the position of the two control points to adjust the pen. The purpose of the path generated by the tool is until it is consistent with the reference line path on the design draft. As shown below:

After dragging to the desired position, release the mouse and press Enter on the keyboard to confirm the path. If the outlined path is not what you want, you can continue to drag the control points to make adjustments.

4. After the adjustment is completed, drag two additional reference lines to the position of control point 1, then open the information panel through the menu bar - window - information, and change the starting point, control point, end point, and three points respectively. Take out the coordinates.

5. Calculate the pixel difference of the control point, end point and starting point respectively, and calculate the real control point and end point coordinates based on the real x, y coordinate values ​​and pixel difference of the picture to be displaced in H5. Then combine these three coordinates Click Apply to the formula.