如何用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創建「飛行碎片」效果？

回答

相關問題