为什么向上旅行动画很快?

why is the upward trip animation fast?

我正在 KonvaJS 中试验一维球反弹问题,损失为零。因此,看起来球应该只是在摆动。

有关此的方程式可用 here. (Click here 用于阅读说明)。

完整代码可在 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();
});

对我来说,向上动画 会很快 是有道理的;方程式是这样说的。但是由此产生的动画并不流畅。我希望球快速向上上升,在达到向上(顶点)高度之前减速,然后再次下降。

从理论上讲,两次旅行所花费的时间应该是一样的。然而,对于这个动画,情况并非如此。所以,要么我的方程式一定是错误的,要么我需要在动画中调整一些东西。

向上行程的计算方式存在错误...现在我解决了。