如何制造“飞行碎片”？与jQuery的效果？

Question

我正在制作一些动画并使用 jQuery 库。

资源的方法之一是 fly()，这意味着如果父元素刚刚爆炸，就会飞离父元素。它应该看起来像飞行的碎片，即它应该向上飞走，然后屈服于重力并落下。 示例。

到目前为止，这是我的方法...

var parent = this.element.parent(),
    direction = this.element.position().left < parent.width() / 2 ? '-' : '+';

this.element.animate({
    left: direction + '=300',
    top: '-=200'
}, duration);

这显然看起来根本不像飞行碎片，因为它只是向上移动。 direction 变量决定元素的飞行方向。由于每个元素相对于其父元素定位，因此左侧的元素会向左移动，反之亦然。

我不想实现一个成熟的物理引擎，例如 Box2D。

我知道我的代码本质上应该做什么，我相信是......

1. 将元素向上（负顶部）并按照设置的方向（负或正左），一些值衰减以模拟由于风阻等导致的水平运动损失和由于重力导致的垂直运动损失。
2. 在某个阶段，重力将变得比爆炸产生的元素向上的力更强，在这种情况下，元素将需要下落。

我真的不知道如何解决这个问题。我希望我可以利用 jQuery 的 animate()，但我不知道如何合并衰减价值。

创造这种效果的最佳方法是什么？

Answer 1

（我会将其作为答案发布，因为这就是它的实际情况。）

您是否只需要一个美观的碎片动画，或者是否必须精确计算？我发现使用随机值实际上可以使其变得现实。请参阅http://jsfiddle.net/minitech/fSaGk

Answer 2

您可能需要使用 animate() 调用的 easing 属性，并利用 jQuery 缓动插件 以获得比 jQuery 默认提供的标准线性缓动更微妙的效果。

另一个技巧是链接对 animate() 的调用以获得您想要的多阶段效果。

这是一个真的（我的意思是真的）快速模型 这有点给你一个想法。

它的核心：

debris.animate({
    left: direction + '=150',
    easing: 'linear',
}, {
    queue: false,
    duration: duration
})
.animate({
    top: '-=100',
    easing: 'easeOutQuint',
}, {
    queue: true,
    duration: vduration
})
.animate({
    top: '+=100',
    easing: 'easeInQuint',
}, {
    queue: true,
    duration: vduration
});

关键元素是：

• 左右动画是线性 - 这不是您正在寻找的衰减，但对于这个模型来说已经足够了
• 左右动画明确地 未排队，因此链中的下一个animate()立即开始
• 上下动画由两个排队组成（这是默认设置，但我已经为了清楚起见无论如何指定它）动画，每个定时在左右动画的一半时，
• 来理解

我使用了 Easing 插件中的 easeOutQuint 缓动函数来实现重力效果 - 它远非完美，但您可以通过足够的排队和链接 <像这样的 code>animate() 调用，您应该能够得到一个非常漂亮的衰减 x 以及一个漂亮的受重力启发的 y...

Answer 3

我最终广泛修改了 minitech 的代码......

var element = $('div'),
    parent = element.parent(),
    position = element.position(),
    offset = element.offset(),
    directionOver180 = false,
    flyAnimation;

$('body').css('overflow', 'hidden');

var angle = (Math.random() * 180) + (directionOver180 ? 180 : 0),
    angleCalc = angle * Math.PI / 180,
    velocityX = Math.cos(angleCalc),
    velocityY = Math.sin(angleCalc),
    currentX = offset.left,
    currentY = offset.top,
    gravity = -20;

flyAnimation = setInterval(function() {

    currentX += velocityX * 5 * (directionOver180 ? -1 : 1);
    currentY += velocityY * 3 + ++gravity;

    velocityX += 0.02;
    velocityY += 0.1 * Math.random();

    element.css({
        left: currentX,
        top: currentY
    });

    if (currentY + element.height() > $(window).height()) {
        $('body').css('overflow', 'visible');
        clearInterval(flyAnimation);
        element.remove();
    }

}, 20);

jsFiddle.