通常在H5开发中，物体/图片做抛物线运动或者更准确地说是贝塞尔曲线运动是H5开发中的常见需求，那么如何根据设计稿快速计算出运动路径是开发者的首要问题。我这边H5开发常用的设计稿尺寸是640*1008，所以根据这个尺寸，解决思路如下：1.首先将PS中需要置换的元素单独导出为png。如果设计稿中已经规划好运动路线，还需要将路线导出为png；2、在AI中新建一个与设计稿大小相同的文件，然后两次将位移元素拖入文件中，如果有运动路线，也拖进去，如下图：这里需要注意的是即位移图片的位置，路径的起点和终点要对应图片的移动点。对应的情况是：canvas中没有做变形处理，那么移动的点就是canvas中图片的左上角，图片已经平移移动了，因为drawImage中dx和dy的最终偏移量(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)是根据x1,y1intranslate(x1,y1)添加的。如果元素通过position:absolute定位，位置由translate3d(x,y,z)在transform中，offset应该是x,y。通常，我们可能会在transformmargin中模仿left,top,extra来控制元素的位置，在transform中添加一个额外的translate3D(marginLeftX,marginLeftY,0)。这个保证金的价值也需要考虑在内。3、在AI中，用ctrl+r键拉出参考线，在元素图片的移动拉出它的x，y位置，如下图：然后选择钢笔工具，依次点击起点和终点，点击终点后鼠标不要松开，直接拖动AI自动添加2个控制点。可以通过移动鼠标来调整两个控制点的位置，从而达到调整钢笔工具生成的路径，直到与设计稿上的参考线路径一致的目的。如下图：拖动到需要的位置后，松开鼠标和键盘确定路径。如果勾勒出的路径不满意，可以继续拖动控制点进行调整。4、调整完成后，将另外两条参考线拖到控制点1的位置，然后通过菜单栏--窗口--信息，打开信息面板，分别设置起点，控制点，终点，3个取出每个点的坐标。5、计算控制点、终点和起点的像素差，根据待位移图片的真实x、y坐标值和像素差计算出真实的控制点和终点坐标假设5。然后将这三个坐标点应用到公式中。varpath=getBezierPath([278+119,572-32],[278-4,572-137],[278+119,572-32],[278,572],50);其中，参数为getBezierPath(终点、控制点1、控制点2、起点、移动次数)，如果没有控制点2，则填入终点坐标即可。_getBezierPath最后公式如下：functiongetBezierPath(p1,p2,p3,p4,times){functionPoint2D(x,y){this.x=x||0.0;这个.y=y||0.0;}函数PointOnCubicBezier(cp,t){varax,bx,cx;varay,by,cy;vartSquared,tCubed;varresult=newPoint2D;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;t平方=t*t;tCubed=tSquared*t;r结果.x=(ax*tCubed)+(bx*tSquared)+(cx*t)+cp[0].x;结果.y=(ay*tCubed)+(by*tSquared)+(cy*t)+cp[0].y;返回结果；}functionComputeBezier(cp,numberOfPoints,curve){vardt;变量我；dt=1.0/(numberOfPoints-1);for(i=0;i
