如何使用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. 将元素向上(负top)和方向设置(负或正left)飞行,使某些值衰减以模拟由于风阻等导致的水平移动损失以及由于重力导致的垂直移动损失.
2. 在某个阶段,重力将比爆炸元素的向上力更强,在这种情况下元素将需要下降.

我真的不知道如何处理这个问题.我希望我可以利用jQuery animate(),但我不知道要包含衰减值.

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

Answer 1

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

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