Some experiences on the parabolic motion of images in html5,

Some experiences on the parabolic motion of images in html5,

Commonly, objects/images are parabolic or more accurately moving along the besell curve is a common requirement in H5 development, so how to quickly calculate the motion path based on the design draft is the primary problem for developers.

The size of a commonly used design draft for H5 development on my side is 640*1008, so the solution based on this size is as follows:

1. First, export the element to be displaced in PS to a png image. If the motion route has been planned in the design draft, export the path to png;

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

Note the placement position of the displacement image. The starting and ending points of the path correspond to the moving points of the image. There are the following situations:

1. If no deformation is performed on the canvas, the moving point is the upper left corner of the image.
2. In the canvas, the image is moved by translate, because the drawImage (image, sx, sy, sWidth, sHeight, dx, dy, the final offset of dx and dy in dWidth, dHeight.
3. If the element is located by position: absolute and the position is controlled by translate3d (x, y, z) In transform, the offset should be x, y. normally, in the transform, we may mimic left, top, and additional margin to control the position of the element, and add an additional translate3D (marginLeftX, marginLeftY, 0) to the transform ). you also need to consider the value of this margin.

3. Press ctrl + r in AI to pull the reference line and move the element image to the x and y positions, as shown in:

Select the pen tool and click the start and end points successively. Do not release the mouse after you click the end point. If you drag AI directly, two control points are automatically added. by moving the mouse, you can adjust the positions of the two control points to adjust the path generated by the pen tool until it is consistent with the reference line path on the design draft. as follows:

Drag it to the desired location, loosen the mouse, and press enter to determine the path. If the path is not the same, you can continue to drag the control point for adjustment.

4. After the adjustment, drag two reference lines to the position of control point 1, and then open the information panel through the menu bar -- window -- Information, the coordinates of the three points are obtained.

5. Calculate the pixel difference between the control point, the end point, and the start point respectively. Calculate the actual control point based on the actual x and y coordinate values and pixel difference of the image to be displaced in H5, end coordinate. apply the three coordinate points to the formula.

The Code is as follows:
Var path = getBezierPath ([278 + 119,572-32], [278-4,572-137], [278 + 119,572-32], [278,572], 50 );

The parameters are getBezierPath (endpoint, control point 1, control point 2, start point, and number of motion). If there is no control point 2, enter the coordinates of the end point. _ getBezierPath:

function getBezierPath(p1, p2, p3, p4, times) {    function Point2D(x,y){          this.x = x || 0.0;          this.y = y ||0.0;      }          function PointOnCubicBezier( cp, t ) {          var   ax, bx, cx;          var   ay, by, cy;          var   tSquared, tCubed;          var   result = new Point2D ;          cx = 3.0 * (cp[1].x - cp[0].x);          bx = 3.0 * (cp[2].x - cp[1].x) - cx;          ax = cp[3].x - cp[0].x - cx - bx;                cy = 3.0 * (cp[1].y - cp[0].y);          by = 3.0 * (cp[2].y - cp[1].y) - cy;          ay = cp[3].y - cp[0].y - cy - by;                tSquared = t * t;          tCubed = tSquared * t;                result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;          result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;                return result;      }      function ComputeBezier( cp, numberOfPoints, curve ){          var   dt;          var   i;                dt = 1.0 / ( numberOfPoints - 1 );           for( i = 0; i < numberOfPoints; i++)              curve[i] = PointOnCubicBezier( cp, i*dt );      }            var cp=[          new Point2D(parseInt(p4[0]), parseInt(p4[1])), new Point2D(p2[0], p2[1]), new Point2D(p3[0], p3[1]), new Point2D(p1[0], p1[1])      ];      var numberOfPoints = times;      var curve=[];      ComputeBezier( cp, numberOfPoints, curve );      return curve;}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.