-1
我在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();
});
對我來說,是有道理的,向上的動畫將是快速;方程式如此說。但由於它的動畫並不平坦。我期待着球快速上升,在達到其頂部(頂點)高度之前減速,然後再次下降。
從理論上講,兩次旅行的時間應該是一樣的。但是,對於這種動畫,情況並非如此。所以,無論我的方程必須是錯的,還是我需要調整動畫中的某些內容。
我請求你接受你自己的答案,並關閉以獲得更多答案。 – divy3993