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

前端之家收集整理的这篇文章主要介绍了如何使用jQuery创建“飞行碎片”效果?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在研究一些动画并使用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);

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

我不想实现一个完整的物理引擎,比如Box2D.

我知道我的代码应该基本上做什么,我相信…

>将元素向上(负顶部)和方向设置(负向或正向左),使某些值衰减以模拟由于风阻等导致的水平移动损失以及由于重力导致的垂直移动损失.
>在某些阶段,重力会比爆炸元素的向上力强大,在这种情况下,元素将需要下降.

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

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

最佳答案
(我会将此作为答案发布,因为它实际上就是这样.)

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

原文链接:https://www.f2er.com/jquery/428016.html

猜你在找的jQuery相关文章