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

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

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

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

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

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

界面

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

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

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

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

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

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

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

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

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

動手制作

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

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

動畫組件1

問：跳傘者跳傘后會做什么？

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

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

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

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

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

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

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

動畫組件2

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

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

動畫組件3

最后，我們將添加動畫的最后一個(gè)組件。

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

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

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

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

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

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

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

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

您的想法？

隨著設(shè)計(jì)和動畫網(wǎng)站的許多創(chuàng)新新方法的出現(xiàn)，像Bounce.JS這樣的生成器非常方便，尤其是在節(jié)省您手動編寫此類動畫代碼的寶貴時(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)建動畫？

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

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

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

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

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

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

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

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

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

我可以使用Bounce.js進(jìn)行復(fù)雜的動畫嗎？

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

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

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

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

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

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