bounce.js：快速創建複雜的CSS動畫

Bounce.JS：輕鬆創建流暢CSS動畫的利器

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

圖片來自icopythat

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

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

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

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

界面

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

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

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

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

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

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

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

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

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

動手製作

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

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

動畫組件1

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

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

要模擬降落傘的打開，最好的方法是使用Scale組件。參考預覽中正方形的原始大小，我這裡使用了0.2的原始大小，最終大小為4。基本上，它在動畫結束時會變大20倍。

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

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

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

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

Stiffness值也是如此。讓我們為此設置一個最小值。

動畫組件2

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

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

動畫組件3

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

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

因此，他的初始大小將為1，動畫結束時的尺寸實際上為0。讓我們為寬度和高度插入這些值。

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

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

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

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

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

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

您的想法？

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

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

關於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創建動畫？

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

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

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

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

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

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

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

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

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

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

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

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

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

我可以將Bounce.js用於商業項目嗎？

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

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