PhysicsJS -角度位置动画

Question

我正在使用PhysicsJS创建一个杂耍游戏。我只有一个球(圆形)和一只鞋(正方形使用凸多边形)。将鞋设置为固定，并在鼠标移动上沿x轴移动。

正方形：

square = Physics.body('convex-polygon', {
    x: 250,
    y: 400,
    vertices: [
        { x: -68, y: 29 },
        { x: 68, y: 29 },
        { x: 69, y: -29 },
        { x: -68, y: -29 }
    ],
    angle: -0.2,
    view: shoeImage,
    fixed: true,
    restitution: 1
});

world.add(square);

Mousemove事件：

jQuery('canvas').on('mousemove', function (e) {
    var offset = $(this).offset();
    var relativeX = (e.pageX - offset.left);
    square.state.pos.set(relativeX, 400);
});

我还在鞋子上添加了一个点击事件，以获得“踢脚效果”。到目前为止，我已经通过使用setTimeout函数更改square.state.angular.pos并将其设置回以前的角度位置来完成此操作。

jQuery('canvas').on('click', function (e) {
    if (square.state.angular.pos == -0.2) {
        square.state.angular.pos = 0.3;
    }
    else {
        square.state.angular.pos = -0.2;
    }

    setTimeout(function() { resetShoe(square); }, 500);
});

function resetShoe(square) {
    if (square.state.angular.pos == -0.2) {
        square.state.angular.pos = 0.3;
    }
    else {
        square.state.angular.pos = -0.2;
    }
}

你可以在here上看到它的工作原理。它工作得很好，但我希望它是动画的，而不是定格的东西。我就是想不出一个办法。

Answer 1

好的，我想出了一个方法来解决这个问题。我遵循了文档中显示的示例，在该示例中，用户可以创建new subtypes并拥有自己的functions。

我使用kick函数为convex-polygon创建了一个鞋子类型

Physics.body('shoe', 'convex-polygon', function( parent ){

    return {

        kick: function (operator) {
            if (operator == "add") {
                if (this.state.angular.pos < 0.3) {
                    this.state.angular.pos += 0.1;
                    timer = setTimeout(function() { square.kick("add"); }, 20);
                }
                else {
                    timer = setTimeout(function() { square.kick("subtract"); }, 20);
                }
            }

            if (operator == "subtract") {
                if (this.state.angular.pos > -0.2) {
                    this.state.angular.pos -= 0.1;
                    timer = setTimeout(function() { square.kick("subtract"); }, 20);
                }
                else {
                    clearTimeout(timer);
                }
            }
        }
    };
});

kick函数将角度增加到0.3，并将角度减小到原始角度-0.2。也许有一种更好的方法可以做到这一点。

因此，当触发单击事件时，将调用kick函数：kick("add");

jQuery('canvas').on('click', function (e) {

    clearTimeout(timer);

    world.subscribe('step', function( data ){
        square.kick("add");
        // only execute callback once
        world.unsubscribe( 'step', data.handler );
    });
});

clearTimeout用于消除鞋子的重复动画，以防重复单击鼠标。

Answer 2

你的想法是正确的，但还有一种更好的方法来做到这一点。

如果您订阅了“integrate: position”事件(这就是behaviors所做的)，您可以在每一步上增量地更改位置，直到它成为您想要的位置。

rotate: function( endAng, vel ){

    var shoe = this; // depending on how you implement this...

    if ( vel === 0 ){
        return; // ... you'll never get there
    }

    // stop any previous animation attempt
    world.unsubscribe('integrate:positions', this.rotateCallback);

    this.endAng = endAng % (Math.PI * 2); // mod by 2Pi since it's circular position
    this.vel = vel;

    world.subscribe('integrate:positions', this.rotateCallback, this);
},

rotateCallback: function( data ){
    var shoe = this; // depending on how you implement this...
    var pos = shoe.state.angular.pos % (Math.PI * 2); // mod by 2Pi since it's circular position

    pos = shoe.state.angular.pos = pos + this.vel * data.dt; // change in pos = velocity x change in time

    // stop at the end
    if ( 
        this.vel > 0 && pos > this.endAng || // increasing
        this.vel < 0 && pos < this.endAng // decreasing
    ){
        world.unsubscribe(data.topic, data.handler);
    }
}

这些是一些对象上的方法...但这取决于您如何实现它。我假设你在鞋身上使用这些参数，但你也可以做一个“踢”行为，并将它作为参数传递给鞋子……但这可能是不必要的。

尚未测试，因此可能存在边缘情况错误。但应该是大体的想法。

注意:在physicsjs的beta版本中，将会有更好的方法来实现这一点……但在此之前，这是一个很好的方法。