Some Experiences on Parabolic Motion of Pictures in HTML 5

Time:2019-9-8

Generally speaking, parabola or Bessel curve motion of objects/pictures is a common requirement in H5 development, so how to quickly calculate the motion path according to the design draft is the first problem for developers to solve.

The size of the design draft commonly used in H5 development is 640 * 1008. Then, according to this size solution ideas are as follows:

1. Firstly, the elements to be displaced in PS are separately deduced into a png. If the motion route has been planned in the design draft, it is also necessary to deduce the route into a png.

2. Create a new file in AI with the same size as the design draft. Then drag the displacement element into the file twice. If there is a motion path, drag it in as follows:

Here we need to pay attention to the position of the displacement picture. The starting point and the end point of the path should correspond to the moving point of the picture. The corresponding situations are as follows:

  1. Canvas does not do deformation, so the moving point is the top left corner of the picture.
  2. In canvas, the image is translated because the final offset of DX and dy in drawImage (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) is added according to X1 and Y1 in translate (x1, y1).
  3. If the element is positioned by position: absolute and controlled by translation 3D (x, y, z) in transformation, the offset should be x, y. Usually, in transformation, we may imitate left, top and additional margin to control the position of the element, and add an additional translation 3D (margin Left X, margin Left) in transformation. Y, 0). This margin value also needs to be taken into account.

3. Pull out the reference line in AI by Ctrl + R key, and pull out the position of x, y by moving the element picture, as shown in the following figure:

Then choose the pen tool, click at the beginning and the end point, do not release the mouse after clicking the end point, drag AI directly to add two control points automatically. By moving the mouse, you can adjust the position of the two control points, so as to achieve the purpose of adjusting the path generated by the pen tool until the reference path on the design draft. Consistent. As follows:

Drag to the desired position, release the mouse, keyboard return to determine the path, if the outlined path is not desirable, you can continue to drag the control point to make adjustments.

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

5. Calculate the pixel difference of control point, endpoint and starting point respectively. According to the real x, y coordinate value and pixel difference of the image to be displaced in H5, calculate the real control point and endpoint coordinate. Then apply these three coordinate points to the formula.

Copy code

The code is as follows:

var path = getBezierPath([278 + 119, 572 – 32], [ 278 – 4, 572 – 137] , [278 + 119, 572 – 32] , [278, 572], 50);

Among them, the parameters are getBezierPath (endpoint, control point 1, control point 2, starting point, number of motions), if there is no control point 2, just fill in the coordinates of the endpoint directly. _getBezierPath’s final formula is as follows:


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 the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.