開始為專案製作完全自訂的動畫吧!
有時您不想使用 CSS 內含的加/減速關鍵字,或是要使用網頁動畫或 JavaScript 架構。在這些情況下,您通常可以定義自己的曲線 (或方程式),而這麼做可讓您更能掌握專案動畫的風格。
摘要
- 自訂加/減速功能可讓專案更加個人化。
- 您可以建立與預設動畫曲線類似的立方體曲線 (如減緩、加減等),但在不同位置強調強調效果。
- 如果您需要進一步控制動畫的時間和行為 (例如彈性或跳轉動畫),請使用 JavaScript。
如果您透過 CSS 建立動畫,即可定義立方體 Bézier 曲線來定義時間。事實上,關鍵字 ease
、ease-in
、ease-out
和 linear
會對應至預先定義的 Bézier 曲線,詳情請參閱 CSS 轉換規格和網頁動畫規格。
這些貝茲曲線會採用四個或兩對數字,每對表示立方形曲線控制點的 X 和 Y 座標。貝茲曲線的起點有座標 (0, 0),終點則有座標 (1, 1);您必須設定兩個控制點的 X 和 Y 值。兩個控制點的 X 值必須介於 0 到 1 之間,且每個控制點的 Y 值可以超過 [0, 1] 限制 (雖然規格不夠明確)。
變更每個控制點的 X 和 Y 值,會形成截然不同的曲線,因此動畫效果也與以往大不相同。舉例來說,如果第一個控制點位於右下方區域,動畫開始播放速度就會變慢。如果它位於左上角,那麼啟動的速度就十分快。反之,如果第二個控制點位於格狀檢視的右下角,最後移動點的位置就會快;如果是在左上角,這個控制點就會緩慢。
為比較,畫面上有兩條曲線:一般的減緩曲線和自訂曲線:
![減速動畫曲線。](https://web.dev/static/articles/custom-easing/image/ease-out-animation-curve-a2a53df3fbeb4.png?authuser=7&hl=zh-tw)
![自訂動畫曲線。](https://web.dev/static/articles/custom-easing/image/custom-animation-curve-641f95fd9a82f.png?authuser=7&hl=zh-tw)
自訂曲線的 CSS 如下:
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
前兩個數字是第一個控制點的 X 和 Y 座標,第二組數字則是第二個控制點的 X 和 Y 座標。
設定自訂曲線不但有趣,還能大幅掌控動畫的風格。舉例來說,根據上述曲線,您可以看到曲線類似傳統的減速曲線,但最後有簡化的減緩或「開始使用」部分,最後下降速度變長。
請試用這個動畫曲線工具,看看曲線如何影響動畫的風格。
使用 JavaScript 架構,進一步掌控廣告
有時候,您需要的控制能力甚至比立方貝茲曲線所能提供。如果你想擁有彈性的跳出風格,建議使用 JavaScript 架構,因為使用 CSS 或網頁動畫難以達成這種效果。
TweenMax
GreenSock 的 TweenMax 是其中一種強大的架構 (如果想維持輕量,則設為 TweenLite),因為小型的 JavaScript 程式庫可讓您充分控管其程式碼,而且程式碼集非常成熟。
如要使用 TweenMax,請在網頁中加入下列指令碼:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
指令碼開始運作後,您就可以針對元素呼叫 TweenMax,並指明您要哪些屬性,以及任何希望的加/減速。可用的加/減速選項有很多,以下程式碼使用彈性的清除功能:
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
TweenMax 說明文件列出了這裡提供的所有選項,因此非常值得一讀。