-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();
});

对我来说,向上的动画会很快是有道理的;方程是这样说的。但是由于它的动画效果并不流畅。我期待球快速向上上升,在达到其向上(顶点)高度之前减速,然后再次下降。

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

4

1 回答 1

0

向上行程的计算方式有一个错误……现在我解决了。

于 2015-10-25T18:08:07.800 回答