Question

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

其中一个资产'方法是fly()，这意味着如果父爆炸，则飞离父元素。它应该看起来像飞行的碎片，即它应该向上飞走，然后屈服于重力并坠落。 Example

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

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

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

这显然不像飞行碎片一样，因为它只是向上移动而去。 direction变量确定元素应该以哪种方式飞行。因为每个元素相对于其父元素定位，所以左侧的元素向左移动，反之亦然。

我不想实现一个完整的物理引擎，如Box2D。

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

向上飞行（负top）并沿方向设置（负或正left），使某些值衰减以模拟由于风阻等导致的水平移动损失和垂直损失由重力引起的运动。
重力在某个阶段会比爆炸元素的向上力强大，在这种情况下，元素需要坠落。

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

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

Answer 1

（我会将此作为答案发布，因为它实际上就是这样。）

您是否只需要眼睛糖果的碎片动画，还是必须精确计算？我发现使用随机值实际上可以使其变得现实。见http://jsfiddle.net/minitech/fSaGk

Answer 2

您可能需要使用easing调用的animate()属性，并利用jQuery Easing Plugin获得比标准{{1}更微妙的效果在jQuery中默认提供的缓动。

另一个技巧是链接对linear的调用，以获得您所追求的多阶段效果。

这是一个真的（我的意思是真的）快速mockup，这种类型给你一个想法。

它的内涵：

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 }); - 这不是你想要的衰变但是这个模型已足够了
左右动画明确未排队，因此链中的下一个linear会立即启动
上下动画包含两个排队（这是默认设置，但为了清晰起见，我已经指定了它）动画，每次都是左右动画的一半
我使用了Easing Plugin中的animate()缓动函数来做引力效果 - 它远没有完美但你明白了

通过充分排队和链接easeOutQuint这样的调用，您应该能够获得漂亮的衰减 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

如何使用jQuery创建“飞行碎片”效果？

3 个答案: