我在 KonvaJS 中试验一维球反弹问题，损失为零。因此，看起来球只是在振荡。
完整代码可在github上找到（检查 README.md 进行设置）。
下面的代码负责动画部分：
stage.on('contentClick', function(e){
var pos = stage.getPointerPosition();
var circle = new Konva.Circle({
x: pos.x,
y: pos.y,
fill: 'red',
radius: 20
});
var h = bounds.max.y - pos.y - circle.radius();
layer.add(circle).draw();
var last,
start,
u = 0,
distance = function(time) {
var ts = time/1000;
return u * ts + 0.5 * g * ts * ts;
},
lastPos;
var anim = new Konva.Animation(function(frame){
if(!start) { start = getTime(); }
var now = getTime();
var diff = now - start;
if(diff > params.delay) {
var y = distance(diff);
//debug({state: 'before', u: u, g: g, y: circle.position().y, dist: y});
if(u === 0) {
var cl = circle.y() + circle.radius();
circle.y(pos.y + y);
if(cl >= bounds.max.y) {
circle.move({
y: bounds.max.y - cl
});
layer.draw();
console.log('reverse u > 0');
u = Math.sqrt(2 * g * h);
g = -g;
start = null;
return false;
}
}
else { // when u < 0
console.log(diff, y, circle.y());
var cc = circle.y()
cc = cc - y;
circle.y(cc);
if(cc <= pos.y) {
circle.y(pos.y);
layer.draw();
console.log('reverse u = 0');
u = 0;
g = -g;
start = null;
return false;
}
}
return;
}
return false;
}, layer);
start = getTime();
anim.start();
});
对我来说，向上的动画会很快是有道理的；方程是这样说的。但是由于它的动画效果并不流畅。我期待球快速向上上升，在达到其向上（顶点）高度之前减速，然后再次下降。
从理论上讲，两次旅行所花费的时间应该是相同的。然而，对于这个动画来说，情况并非如此。所以，要么我的方程式一定是错误的，要么我需要在动画中调整一些东西。