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

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

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

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

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

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

界面

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

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

屏幕中央是動畫預覽區(qū)域，一個正方形作為佔位符，顯示動畫的所有動作。

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

慢動作功能尤其有助於詳細分析動畫的運動軌跡。

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

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

我在製作這個動畫時親身體會到了這一點。不過，您的動畫可能不會像這個一樣複雜，這是一件好事。記住：動畫時間線越長，生成的代碼就越多，所以不要過度使用。

這就是基礎知識。整個過程在技術上並不復雜——其餘部分取決於您的想像力。

動手製作

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

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

動畫組件1

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

答：當然，他們會打開降落傘。所以讓我們把它轉換成動畫。

要模擬降落傘的打開，最好的方法是使用Scale組件。參考預覽中正方形的原始大小，我這裡使用了0.2的原始大小，最終大小為4?；旧希趧赢嫿Y束時會變大20倍。

由於降落傘的寬度和長度（從上面看的高度）相同，我們保持兩個維度的縱橫比相同。我們?yōu)?em>Easing選擇Bounce屬性，因為它最符合我們的需求。在持續(xù)時間中，我們指定動畫應涵蓋的時間範圍。由於降落傘的打開速度很快，我這裡設置了2000毫秒。

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

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

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

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

動畫組件2

接下來，我們將模擬降落傘的運動，就像風以微妙的隨機方式改變其路徑一樣。為此，我們將使用Translate組件。我在這裡添加了一個細微的移動（向右25個單位，向下15個單位），這應該足夠了。我建議再次使用Bouncing作為Easing，因為動畫的流暢性。

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

動畫組件3

最後，我們將添加動畫的最後一個組件。

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

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

動畫的持續(xù)時間在這裡應該相當長，很明顯。 25000毫秒就足夠了。

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

當然，您可以隨意調整和混合您的結果，這只是一個粗略的指南，但結果顯然掌握在您的手中。

但是，您之後應該會有類似的結果。

一旦您對結果滿意，您可以將動畫導出為CSS並在您的項目中使用它。

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

您的想法？

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

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

關於Bounce.js的常見問題

如何在我的項目中安裝Bounce.js？

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

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

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

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

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

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

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

如何在Bounce.js中鏈接動畫？

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

我可以使用Bounce.js進行響應式設計嗎？

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

如何在Bounce.js中停止動畫？

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

我可以使用Bounce.js進行複雜的動畫嗎？

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

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

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

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

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

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