如何用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);

这显然不看都像飞溅的碎片，因为它只是移动起来了。变量direction决定了元素应该飞行的方式。因为每个元素相对于其父元素相对定位，所以左侧的元素向左移动，反之亦然。

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

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

飞的elment了（负top）和方向设置（负或正left），具有一定的价值衰减模拟由于风阻等导致的水平运动损失以及由于重力引起的垂直运动损失。
在某个阶段，重力的作用力会比来自爆炸元素的向上的力更强，在这种情况下元素将需要下降。

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

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

来源

2011-11-09 alex

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

@minitech：只有眼睛的糖果。我会看看我是否可以拨弄那个小提琴在我的项目中工作。谢谢。 – alex

@minitech这是一个很酷的小提琴，我会说！ –

（我将在此为答案，因为这’正是它实际上是。）

你只需要眼睛糖果碎片动画，或者它必须精确计算？我发现使用随机值实际上可以使其变得切合实际。请参阅http://jsfiddle.net/minitech/fSaGk

来源

2011-11-09 18:50:35 Ryan

我只是看着这个。非常酷的大型'烟花'像爆炸！ –

你可能会需要使用animate()呼叫easing财产，并利用jQuery Easing Plugin得到的效果一定程度上比标准linear更微妙的默认jQuery中提供的宽松政策。

另一个窍门是链调用animate()来获得你所追求的多重效果。

这里是一个真正（我说的是真的）快速mockup这kinda-八九不离十给你一个想法。

它的胆量：

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 - 这是不是你要找的衰减，但它足以让这个样机
左右动画显式为未排队，所以下一个animate()在链中立即启动
上下动画由两排队（这是默认的，但我无论如何指定它的清晰度）的动画，每一个定时在左右动画的一半
我用缓和功能从缓解插件做的引力作用 - 它远不及完美的，但你的想法

有了足够的排队和animate()电话这样的链接，你应该能够得到一个相当不错的衰减X连同一个好看的重力启发y ...

来源

2011-11-09 04:34:19 millhouse

我最后修改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。

来源

2011-11-09 05:06:13 alex

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

回答

相关问题