javascript - 用 jQuery 模拟一个物体摔倒

Question

我正在用 jQuery 模拟保龄球比赛。所以，我扔球(通过动画函数)，当它碰到一个大头针时，我模拟它掉下来(也通过动画函数)。但我只能让它旋转。我希望它原地倒下，向左或向右。喜欢this .这是图钉动画的 jQuery 代码:

this.animation = function (pinID) {
    var rdm = ((Math.random()*10)+1);
    var degree;
    if (rdm <= 5)
        degree = -90;
    else
        degree = 90;
    $(pinID).animate({ deg: degree },
    {
        duration: 1000,
        step: function (now) {
            // In the step-callback (that is fired each step of the animation),
            // the pin will rotate to the current degree of the animation
            $(pinID).css({
                transform: 'rotate(' + now + 'deg)'
            });
        },
        complete: function () {
            // When the animation is complete, removes the pin from play
            $(pinID).css({
                "left": -200, "top": -200
            });
        }
    });
}

我试着在动画函数的开头有一个 left 和 top，它只是模拟了一个奇怪的运动。如果有人能帮助我，我将不胜感激。谢谢。

编辑结果如下(感谢 Zs V):

this.animation = function (pinID) {
    if (knockedPins.indexOf(pinID) == -1) {
        var rdm = ((Math.random() * 10) + 1);
        var degree;
        var transFormOrigin;
        if (rdm <= 5) {
            degree = -90;
            transFormOrigin = '0% 100%';
        }
        else {
            degree = 90;
            transFormOrigin = '100% 100%';
        }
        $(pinID).css({ "transform-origin": transFormOrigin });
        knockedPins.push(pinID);

        $(pinID).animate({ deg: degree },
        {
            duration: 1000,
            step: function (now) {
                // In the step-callback (that is fired each step of the animation),
                // the pin will rotate to the current degree of the animation
                $(pinID).css({
                    transform: 'rotate(' + now + 'deg)'
                });
            },
            complete: function () {
                // When the animation is complete, removes the pin from play
                $(pinID).css({
                    "left": -200, "top": -200
                });
            }
        });
    }
}

我添加了 transform-origin 属性，必须使用一个数组来存储已经被敲过的引脚的 id，否则它会摇晃直到它被放置。呵呵

Answer 1

您必须围绕其 Angular 而不是中心旋转对象(图片)。这里讨论如何做到这一点:https://stackoverflow.com/a/6633676/6624619