給用戶界面添加緩和效果(EasingCurves)_html/css

問題是，了解Easing Curves的工作原理可能會讓你感到困惑。我希望通過篇文章的一些示例能幫助你更好的了解如何在工作中的動畫添加Easing Curves功能。

Easing Curves其實就是一條曲線，它定義了加速度模式。Easing Curves還有其他名稱，比如有人稱其為Motion Curves、時間函數、貝塞爾曲線或曲線等等。Easing Curves不同的形狀也有不同的稱法，比如 ease-in 、 ease-out 或者 ease-in-out 。

Easing Curves是如何工作的

Easing Curves是通過一個 X 和 Y 軸來創建的。 X 和 Y 的含義是從一個應用程序應用到不同的程序上。在開發中， X 和 Y 的意思也是一樣的。用來定義動畫的百分比，也就是 X 軸(時間)對應的動畫百分比( Y )。

Easing Curves是什么樣子？什么時候使用？這其實就是 時間和空間的概念。

時間和空間

時間是指一個動畫完成所用的時間?？臻g是指“ 幀 ”，也就是動畫之間的間距，也就是 Y 軸的百分比，即每個動畫百分比這間的空間。下面展示了怎么用Easing Curves來展示間距。其中垂直表示速度快，水平表示速度緩慢。

Linear Ease Spacing

Linear Easing表示的是點的動畫運動在空間內是一個勻速運動。

Ease In Spacing

ease-in表示的是點的動畫運動在空間內一開始是緩慢的，然后慢慢加快?？梢岳斫鉃槭且粋€加速運動。

Ease Out Spacing

ease-out表示的是點的動畫運動在空間內一開始是加速的，然后慢慢的減慢(這是一個假象)。可以理解為是一個減速運動。

設計一個Easing Curves

常常有人會問我一個問題，什么時候該使用Easing Curve?我的答案是，這一切都應該取決于動畫的場景。沒有一個Easing Curve可以運用在所有的動畫中。而制作這些曲畫是設計運動的一個關鍵。通過Easing Curve設計是來自實現世界中的物理學，但又不總是遵循這些規則。現實世界是獲取動畫靈感的最好的一個地方。例如，在現實世界中沒有一個物體是立馬加速和立即停止的。其總是有某種的加速或減速。下面的視頻介紹了動畫的12原則，而這些都基于物理學(現實世界中的物體運動)所得。

有關于12個動畫原則的教程，還可以點擊這里閱讀。

當你設計一個Easing Curve時一定要記住： 垂直是速度快的，水平是速度慢的 。而創建的曲線需要依賴于交互設計。你可以在一個網格內( X / Y )創建許多不同類型的曲線:

制作曲線是在關鍵幀創建，其實也可以打破關鍵幀。如果打破關鍵幀將導致動畫離開關鍵幀之間的值。這樣就可以做一些類似反彈動畫效果。

有許多在線的Web工具，可以創建三次貝塞爾曲線，比如：

開發中的Easing Curves

Easing Curves在開發中被稱之為時間函數(Timing Functions)。這是一些數學方程式，也是用來創建貝塞爾曲線加速度模式。在開發中常用的函數是 cubic-bezier 。這也是這篇文章后面將要介紹的主要內容。

在大多數程序語方中，定義了一些Easing Curves，比如 ease-in 、 ease-out 和 ease-in-out 。可以查看文檔了解這些預定義的曲線是如何定義的。下面主要列出了CSS中預定義好的Easing Curves。

在CSS中定義Easing Curves

在CSS中可以給定義好的類使用一個全局的Ease，這同樣適用于每一個關鍵幀。例如，你創建一個反彈(Bounce)動畫效果，在動畫的每個關鍵幀都將會運用到反彈(Bounce)。

.object-class { animation-name: animation-rocks; animation-timing-function: cubic-bezier(1,.01,.91,.46);}

你可以在每個關鍵幀內精確的定義Easing Curves。得要的是要記?。?Easing Curves定義的百分比值之前你先要想好怎么讓Ease發生。

@keyframes animation-name { 0% { animation-timing-function: cubic-bezier(1,.01,.91,.46); } 25% { animation-timing-function: linear; } 50% { animation-timing-function: cubic-bezier(0,.02,0,1.01); } 75% { animation-timing-function: linear; } 100% { animation-timing-function: linear; }}

曲線延遲(Curved Delays)

Easing Curves的概念并不僅僅適用于單個動畫，但也可以應用于延遲。比如下面的示例：

非常感謝你花時間閱讀這篇文章，如果你想了解更多相關的知識，可以 點擊這里獲取 。如果你有更好的經驗和想法，歡迎在下面的評論中和我們一起分享。

本文根據 @Ryan Brownhill 的《 Crafting Easing Curves for User Interfaces 》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處： https://medium.com/@ryan_brownhill/crafting-easing-curves-for-user-interfaces-34f39e1b4a43#.blkcnbpw2 。

大漠

常用昵稱“大漠”，W3CPlus創始人，目前就職于手淘。對HTML5、CSS3和Sass等前端腳本語言有非常深入的認識和豐富的實踐經驗，尤其專注對CSS3的研究，是國內最早研究和使用CSS3技術的一批人。CSS3、Sass和Drupal中國布道者。2014年出版《 圖解CSS3：核心技術與案例實戰 》。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com