抛物线运动图像,平抛运动图像是抛物线吗
一般来说，一个物体/图片沿着抛物线运动，或者更准确地说，沿着贝塞尔曲线运动，是H5开发中的常见要求，因此如何根据设计草图快速计算出运动路径，是开发人员首先要解决的问题。
这里H5开发常用的设计稿尺寸是640 * 1008，所以基于这个尺寸的解决思路如下：
1.首先，将PS中要替换的元素分别导出到png中。如果设计稿中已经规划了运动路线，还需要将路线导出到png
2.在AI中新建一个与设计草图大小相同的文件，然后将位移元素拖动到文件中两次，如果有运动路线就拖动进去，如下图：
这里要注意的是位移图的摆放位置。路径的起点和终点应该与图片的移动点相对应。对应的情况如下：
在画布中没有变形的情况下，移动点是图片的左上角。在canvas中，图片已经被平移，因为根据translate(x1，y1)中的x1，y1，绘制图像(image，sx，sy，swidth，highlight，dx，dy，d width，dHeight中dx和dy的最终偏移量)。如果元素在transform中是通过position:absolute定位的，并且位置是由translate3d(x，y，z)控制的，那么偏移量应该是x，y，通常我们可以在transform中模仿left，Top和extra margin来控制元素的位置，在transform中增加一个额外的Translate3D (Marginleftx，Marginlefty，0)。你还需要考虑到这个保证金的价值。3.在AI中通过ctrl r拉出参考线，元素图片移动时拉出其x，y位置，如下图所示：
然后选择钢笔工具，连续单击起点和终点。点击终点后，不要松开鼠标，直接拖动AI自动添加两个控制点。通过移动鼠标，可以调整两个控制点的位置，从而达到调整钢笔工具生成的路径，直到与设计草图上的参考线路径一致的目的。如下图所示：
拖动到所需位置后，释放鼠标并按enter键确定路径。如果轮廓路径不令人满意，您可以继续拖动控制点进行调整。
4.调整完毕后，再拖动两条参考线到控制点1的位置，然后通过菜单栏-窗口-信息打开信息面板，分别取出起点、控制点、终点、三点的坐标。
5.分别计算控制点、终点和起点的像素差，根据待位移图片在H5的实际X、Y坐标值和像素差计算实际控制点和终点坐标。然后将这三个坐标点应用到公式中。
复制代码如下：
var path=getBezierPath([278 119，572 - 32]，[ 278 - 4，572 - 137]，[278 119，572 - 32]，[278，572]，50)；
其中，参数为getBezierPath(终点，控制点1，控制点2，起点，移动次数)。如果没有控制点2，只需填写终点的坐标即可。_ getbezierpath的最终公式如下：
function getBezierPath(p1，p2，p3，p4，times) { function Point2D(x，y){ this。x=x 0.0this.y=y 0.0}函数PointOnCubicBezier( cp，t ) { var ax，bx，CX；var ay，by，cy；var tSquared，tCubedvar result=new point 2d 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 squared=t * ttCubed=t squared * t result。x=(ax * t的立方)(bx * t的平方)(CX * t)CP[0].x；结果。y=(ay * t的立方)(by * t的平方)(cy * t)CP[0].y；返回结果；}函数ComputeBezier( cp，numberOfPoints，curve){ var dt；var I；dt=1.0/(点数-1)；for(I=0；我点数；I)curve[I]=PointOnCubicBezier(CP，I * dt)；} var CP=[新点2d(parse int(P4[0])，parseInt(p4[1]))，新点2D(p2[0]，p2[1])，新点2D(p3[0]，p3[1])，新点2D(p1[0]，P1[1])]；var numberOfPoints=timesvar曲线=[];ComputeBezier( cp，numberOfPoints，curve)；返回曲线；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。