Javascript 球沿抛物线轨迹反弹

这个问题是由一位专家提出的

在这个问题上，反弹是垂直的

---

CSS动画可以更好地逼近这一点。您需要：

为定时函数（）找到合适的贝塞尔曲线

根据需要更新持续时间因子

通过添加更多动画，添加任意数量的步骤

然后需要根据持续时间正确计算延迟（

上一个动画延迟+2*上一个动画持续时间

）

主要技巧是使用

altenate

并运行每个动画两次，将为您提供镜像效果和完美的抛物线（其中一半由贝塞尔曲线定义）

.box{
宽度：200px；
高度：190px；
边框：1px实心；
显示器：flex；
证明内容：中心；
对齐项目：柔性端；
}
img{
--d:0.8s；/*持续时间系数*/
宽度：30px；
动画计时功能：立方贝塞尔（.17、.76、.58,1）；/*控制此：https://cubic-bezier.com/#.17,.76,.58,1*/
动画迭代计数：2；/*不更改*/
动画方向：交替；/*不更改*/
动画名称：t1、t2、t3、t4、t5；/*除非需要更多步骤，否则不要更改*/
动画持续时间：
var（--d），
计算（var（--d）/2），
计算（var（--d）/3），
计算（var（--d）/4），
计算值（var（--d）/5）；
动画延迟：
计算（var（--d）*-1），
计算（var（--d）），
计算（var（--d）+2*var（--d）/2），
计算（var（--d）*2+2*var（--d）/3），
计算（var（--d）*2+2*var（--d）/3+2*var（--d）/4）；
}
@关键帧t1{to{transform:translateY（-160px）}
@关键帧t2{to{transform:translateY（-110px）}
@关键帧t3{to{transform:translateY（-60px）}
@关键帧t4{to{transform:translateY（-30px）}
@关键帧t5{to{transform:translateY（-10px）}}

---

我在之前的回答（在链接的问题中）中考虑了这种行为。只需将

dx

设置为非零值即可

ball = {x: 82, y: 0, dx: 1, dy: 0};

• x

  和

  y

  是球的起始位置

• dx

  和

  dy

  是球的初始速度

let ballem=document.getElementById（“ball”）；
设重力=40；//重力引起的加速度（像素/秒/秒）
让地板Y=200-25；//地板的Y坐标。这里的25是因为球。y是球的顶部。
让反弹率=0.8；//反弹后保持的速度
let LIMIT=0.1；//保持动画运行所需的最小速度
让ball={}；
设lastFrameTime=null；
Ballem.addEventListener（“点击”，startAnim）；
函数startAnim（）
{
ball={x:82，y:0，dx:1，dy:0}；
lastFrameTime=null；
请求动画帧（animStep）；
}
函数步骤（时间戳）
{
如果（lastFrameTime==null）
lastFrameTime=时间戳；
//自上一步以来已过毫秒
const appeased=时间戳-lastFrameTime；
lastFrameTime=时间戳；
ball.dy+=重力*经过/1000；
ball.y+=ball.dy；
ball.x+=ball.dx；//在本例中未真正使用
如果（球y>地板y）{
//这一步把我们带到了地板下，所以我们需要反弹。
ball.y-=（ball.y-地板y）；
ball.dy=-ball.dy*弹性；
}
//更新元素x和y
ballElem.x.baseVal.value=ball.x；
ballElem.y.baseVal.value=ball.y；
//请求另一个动画步骤
if（Math.abs（ball.y-FLOOR|y）>LIMIT | |//不在地面上
Math.abs（ball.dy）>LIMIT | |//或仍在移动
Math.abs（ball.dx）>极限）{
请求动画帧（animStep）；
}
}

Svg smil解决方案

球的轨迹是从矢量编辑器Inkscape中问题中的图片创建的

对于沿我使用的轨迹移动的动画-

该应用程序响应迅速，全屏显示更有趣

.container{
宽度：60%；
身高：60%；
}

您还没有问任何问题。你为什么不采取另一种解决办法？它可能是最容易修改的，因为您可以进行计算。问题出在哪里？@Emiel Zuurbier谢谢你调整了问题我也不确定你的问题是什么。您正在寻找计算水平位置的公式吗？在我对链接问题的回答中，只需将

dx

设置为非零值。