Bounce.JS：輕鬆創(chuàng)建流暢CSS動(dòng)畫的利器

Bounce.JS，由Joel Besada創(chuàng)建，是一個(gè)簡單易用的工具，可幫助開發(fā)者快速生成流暢、優(yōu)雅的CSS動(dòng)畫。它屬於新興的JavaScript庫和生成器浪潮中的一員，有效簡化了複雜動(dòng)畫的創(chuàng)建過程。

自1995年誕生以來，JavaScript——這門最初旨在增強(qiáng)網(wǎng)頁動(dòng)態(tài)效果的簡單腳本語言——已經(jīng)取得了長足的進(jìn)步。由Mozilla聯(lián)合創(chuàng)始人Brendan Eich發(fā)明，JavaScript在過去五年中逐漸取代Adobe Flash，成為網(wǎng)頁動(dòng)畫、遊戲和應(yīng)用程序的首選技術(shù)。

JavaScript的興起催生了一批新的庫和生成器，使開發(fā)者能夠更輕鬆地訪問更複雜的動(dòng)畫功能。 Bounce.JS正是其中之一。

Bounce.JS允許您通過簡單的界面生成平滑、優(yōu)雅的CSS動(dòng)畫，並進(jìn)行預(yù)覽、共享和導(dǎo)出。其操作非常直觀！如果您喜歡精巧的動(dòng)畫效果，不妨試試Bounce.JS。

接下來，我們將探討B(tài)ounce.JS的功能和動(dòng)畫工作流程，並創(chuàng)建一個(gè)自定義動(dòng)畫。相信您會覺得很有趣！

界面

Bounce.JS的界面簡潔明了，使動(dòng)畫創(chuàng)建過程變得非常簡單。

左側(cè)是組件列表，您可以在這裡添加各種效果到動(dòng)畫鏈中，並進(jìn)行調(diào)整。它還提供一系列動(dòng)畫預(yù)設(shè)，您可以查看和修改這些預(yù)設(shè)，從而節(jié)省添加組件的時(shí)間。 “Road Runner”動(dòng)畫預(yù)設(shè)非常有趣，作者對細(xì)節(jié)的處理令人讚嘆。許多預(yù)設(shè)可用作模板，方便您混合自定義動(dòng)畫並節(jié)省時(shí)間。

屏幕中央是動(dòng)畫預(yù)覽區(qū)域，一個(gè)正方形作為佔(zhàn)位符，顯示動(dòng)畫的所有動(dòng)作。

預(yù)覽屏幕下方有三個(gè)按鈕：播放動(dòng)畫、循環(huán)動(dòng)畫和慢動(dòng)作。

慢動(dòng)作功能尤其有助於詳細(xì)分析動(dòng)畫的運(yùn)動(dòng)軌跡。

您創(chuàng)建的每個(gè)動(dòng)畫都擁有一個(gè)唯一的URL，點(diǎn)擊“GET SHORT URL”可以獲取簡短鏈接。

免責(zé)聲明：與大多數(shù)代碼生成器一樣，精心編寫的代碼通常會遠(yuǎn)遠(yuǎn)優(yōu)於自動(dòng)生成的代碼。但是，手動(dòng)編寫代碼會更費(fèi)時(shí)費(fèi)力。如果您不打算事後手動(dòng)調(diào)整代碼，建議不要過度依賴Bounce.JS。 Bounce.JS大量使用矩陣變換，這並非所有動(dòng)畫場景的最佳方法。

我在製作這個(gè)動(dòng)畫時(shí)親身體會到了這一點(diǎn)。不過，您的動(dòng)畫可能不會像這個(gè)一樣複雜，這是一件好事。記?。簞?dòng)畫時(shí)間線越長，生成的代碼就越多，所以不要過度使用。

這就是基礎(chǔ)知識。整個(gè)過程在技術(shù)上並不復(fù)雜——其餘部分取決於您的想像力。

動(dòng)手製作

讓我們創(chuàng)建一個(gè)自定義動(dòng)畫。在下面的示例中，我將展示如何創(chuàng)建一個(gè)降落傘動(dòng)畫——通常在卡通中看到的誇張動(dòng)畫類型——從上往下看。

在Bounce.JS中，動(dòng)畫被分解成“組件”。您可以將組件視為舞蹈動(dòng)作的不同部分。請記住，我們只設(shè)計(jì)動(dòng)畫的行為，而不是它所動(dòng)畫的對象，也不是背景/舞臺。當(dāng)然，一旦我們的動(dòng)作完成，將其應(yīng)用於任何設(shè)置中的任何對像都是微不足道的。

動(dòng)畫組件1

問：跳傘者跳傘後會做什麼？

答：當(dāng)然，他們會打開降落傘。所以讓我們把它轉(zhuǎn)換成動(dòng)畫。

要模擬降落傘的打開，最好的方法是使用Scale組件。參考預(yù)覽中正方形的原始大小，我這裡使用了0.2的原始大小，最終大小為4?；旧?，它在動(dòng)畫結(jié)束時(shí)會變大20倍。

由於降落傘的寬度和長度（從上面看的高度）相同，我們保持兩個(gè)維度的縱橫比相同。我們?yōu)?em>Easing選擇Bounce屬性，因?yàn)樗罘衔覀兊男枨?。在持續(xù)時(shí)間中，我們指定動(dòng)畫應(yīng)涵蓋的時(shí)間範(fàn)圍。由於降落傘的打開速度很快，我這裡設(shè)置了2000毫秒。

無論動(dòng)畫組件的順序如何，所有組件都會在動(dòng)畫開始時(shí)立即激活，因此如果您希望組件稍後啟動(dòng)，則需要在延遲字段中指定延遲。

提示：如果您創(chuàng)建複雜的動(dòng)畫，最好保持組件的順序與它們激活的順序相同，這樣就不會輕易混淆。

Bounces字段指定元素在動(dòng)畫過程中彈跳的次數(shù)。在本例中，我輸入了16，這是一個(gè)相對較高的數(shù)字，但對於降落傘動(dòng)畫來說是合理的。

Stiffness值也是如此。讓我們?yōu)榇嗽O(shè)置一個(gè)最小值。

動(dòng)畫組件2

接下來，我們將模擬降落傘的運(yùn)動(dòng)，就像風(fēng)以微妙的隨機(jī)方式改變其路徑一樣。為此，我們將使用Translate組件。我在這裡添加了一個(gè)細(xì)微的移動(dòng)（向右25個(gè)單位，向下15個(gè)單位），這應(yīng)該足夠了。我建議再次使用Bouncing作為Easing，因?yàn)閯?dòng)畫的流暢性。

由於此組件將在整個(gè)動(dòng)畫過程中播放，我讓它播放20000毫秒，這應(yīng)該覆蓋其整個(gè)長度。降落傘將從時(shí)間線的開始移動(dòng)，因此我們這裡不需要延遲。由於降落傘的運(yùn)動(dòng)會更多地受到風(fēng)的影響，但比第一個(gè)組件更硬，我在這裡給了它22個(gè)Bounces和3的Stiffness。

動(dòng)畫組件3

最後，我們將添加動(dòng)畫的最後一個(gè)組件。

如果您從上方觀察跳傘者，由於時(shí)間的推移和距離的增加，他顯然會顯得越來越小。

因此，他的初始大小將為1，動(dòng)畫結(jié)束時(shí)的尺寸實(shí)際上為0。讓我們?yōu)閷挾群透叨炔迦脒@些值。

動(dòng)畫的持續(xù)時(shí)間在這裡應(yīng)該相當(dāng)長，很明顯。 25000毫秒就足夠了。

由於此動(dòng)畫組件將與其他組件同時(shí)播放（即沒有延遲），我們不需要添加任何彈跳或剛度效果，因?yàn)樗^承自之前的組件。因此，像這裡的屏幕截圖一樣，將它們保留為0。

當(dāng)然，您可以隨意調(diào)整和混合您的結(jié)果，這只是一個(gè)粗略的指南，但結(jié)果顯然掌握在您的手中。

但是，您之後應(yīng)該會有類似的結(jié)果。

一旦您對結(jié)果滿意，您可以將動(dòng)畫導(dǎo)出為CSS並在您的項(xiàng)目中使用它。

您還可以在GitHub上找到Bounce.JS的存儲庫。

您的想法？

隨著設(shè)計(jì)和動(dòng)畫網(wǎng)站的許多創(chuàng)新新方法的出現(xiàn)，像Bounce.JS這樣的生成器非常方便，尤其是在節(jié)省您手動(dòng)編寫此類動(dòng)畫代碼的寶貴時(shí)間方面。

嘗試一下，並將您的實(shí)驗(yàn)發(fā)佈在評論部分。我們很想知道您的結(jié)果！

關(guān)於Bounce.js的常見問題

如何在我的項(xiàng)目中安裝Bounce.js？

要安裝Bounce.js，您可以使用npm或Bower。如果您使用npm，可以使用命令npm install bounce.js進(jìn)行安裝。對於Bower，使用命令bower install bounce.js。安裝後，您可以使用script標(biāo)籤將其包含在HTML文件中。

我可以將Bounce.js與其他JavaScript庫一起使用嗎？

是的，Bounce.js與其他JavaScript庫兼容。它不會干擾其他庫的功能。您可以將其與jQuery、React、Angular和Vue.js等庫一起使用。

如何使用Bounce.js創(chuàng)建動(dòng)畫？

使用Bounce.js創(chuàng)建動(dòng)畫包括創(chuàng)建一個(gè)新的Bounce對象並向其中添加組件。您可以添加諸如縮放、旋轉(zhuǎn)、平移和傾斜之類的組件。添加組件後，您可以使用applyTo方法將動(dòng)畫應(yīng)用於元素。

我可以在Bounce.js中控制動(dòng)畫的持續(xù)時(shí)間和延遲嗎？

是的，Bounce.js允許您控制動(dòng)畫的持續(xù)時(shí)間和延遲。您可以分別使用duration和delay方法設(shè)置持續(xù)時(shí)間和延遲。值以毫秒為單位。

如何在Bounce.js中鏈接動(dòng)畫？

您可以使用chain方法在Bounce.js中鏈接動(dòng)畫。此方法允許您順序執(zhí)行動(dòng)畫。您可以將Bounce對象的數(shù)組傳遞給chain方法以將它們鏈接起來。

我可以使用Bounce.js進(jìn)行響應(yīng)式設(shè)計(jì)嗎？

是的，Bounce.js可用於響應(yīng)式設(shè)計(jì)。使用Bounce.js創(chuàng)建的動(dòng)畫是可縮放的，並適應(yīng)不同的屏幕尺寸。您還可以使用媒體查詢來控制動(dòng)畫在不同設(shè)備上的行為。

如何在Bounce.js中停止動(dòng)畫？

您可以使用stop方法在Bounce.js中停止動(dòng)畫。此方法會停止動(dòng)畫並將元素重置為其初始狀態(tài)。

我可以使用Bounce.js進(jìn)行複雜的動(dòng)畫嗎？

是的，Bounce.js能夠創(chuàng)建複雜的動(dòng)畫。您可以組合多個(gè)組件和鏈接動(dòng)畫來創(chuàng)建複雜的效果。但是，這需要對庫和CSS動(dòng)畫有很好的理解。

Bounce.js與所有瀏覽器兼容嗎？

Bounce.js與大多數(shù)現(xiàn)代瀏覽器兼容。但是，某些功能可能在舊版瀏覽器中不起作用。最好在不同的瀏覽器中測試您的動(dòng)畫以確保兼容性。

我可以將Bounce.js用於商業(yè)項(xiàng)目嗎？

是的，Bounce.js是開源的，可免費(fèi)用於個(gè)人和商業(yè)項(xiàng)目。您可以使用它為您的網(wǎng)站、應(yīng)用程序、遊戲和其他項(xiàng)目創(chuàng)建動(dòng)畫。

以上是bounce.js：快速創(chuàng)建複雜的CSS動(dòng)畫的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！