這是介紹瀏覽器中web動畫API的系列教程的第五篇。如果你有什麼問題/想法，或者發現我理解錯了規範的內容，或是希望我在接下來的文章中對某部分內容進行探討的話，請在Twitter給我留言吧~@dancwilson。這篇文章的一個比較早期（簡單）的版本在我的CodePen Blog上也有，在Chrome聲明支持Motion Path之後發表的。
終於。沿路徑的動畫，不再是SVG的專利！
Motion Path：規範的當前方向
隨着API規範已經制定好並且通過，運動路徑motion path也先後出現了不同的形式。單方向最初看起來可能是Effect的形式（如上一篇中討論的GroupEffect），但隨後Motion Path作爲一個CSS模塊慢慢的一點一點地上位（在它的規範中）。
也就是，沿路徑的動畫將會變得很簡單，成爲一組可以添加動畫的CSS屬性，和opacity和transform一樣。這樣CSSTransitions和Keyframes就可以使用運動路徑了，Web動畫API也是。這是非常棒的，因爲我們都是希望它們能夠儘可能的給我們更多的靈活性。Chrome和Opera已經發布了初步的實現，所以我們現在已經可以真正地開始使用它，儘管還沒有找到放入polyfill的方法。
我們來分析一下這些屬性到底是什麼，可以如何使用，以及現在使用起來會有什麼阻礙。
Motion Path屬性
我們接下來會討論三個motion屬性。就目前而言，要看到這些示例，你需要在啓用了Experimental Web Platform Features的Chrome 43+或者Opera 30+中，通過chrome://flags或者opera://flags查看。它們的作用是在Chrome 46和Opera 33中默認啓動這項。我通常會同時用兩個版本的Chrome——穩定版（Stable）和金絲雀版（Canary），然後只在Canary中啓用這項flag。
motion-path
motion-path用於定義路徑，元素可沿着該路徑移動，下面是路徑在SVG 1.1中的工作原理：
#motioner { motion-path: path("M200 200 S 200.5 200.1 348.7 184.4z");}也可以採用一個fill-rule作爲調用路徑時的第一個參數。我建議閱讀Joni Trythall的關於編寫SVG的袖珍指南，可以看看需要討論什麼內容。
你還可以使用一些基礎圖形作爲路徑，如circle、polygon、ellipse和inset。如果你使用過CSS Shape，對這塊內容應該比較熟悉。
在Blink中的初次實現，我發現只有path()方法可以工作，所以不知道是我一直都沒有正確地使用圖形，還是它還沒有實現這一塊。
motion-offset
我們使用motion-offset來驅動運動，將元素放到路徑上的實際位置。它可以接受浮點長度值或百分比。爲了從路徑的起點到終點添加動畫，我們創建了一個從0到100%的動畫。使用統一web動畫API，我們有
var m = document.getElementById('motioner');
m.animate([
{ motionOffset: 0 },
{ motionOffset: '100%' }
], 1000);還有CSS
#motioner { animation: path-animation 1s;}@keyframes path-animation {
0% {
motion-offset: 0;
}
100% {
motion-offset: '100%';
}}這個CodePen demo展示了幾個小點沿着一條螺旋路徑從外向內移動。每個小點在接近中心的時候會變得更快、更小，而且會變得透明。.animate()在每個小點上被調用兩次，設置了無限迭代iterations: Infinity和延遲delay，第一次調用是設置運動路徑，另一次調用是設置縮放和透明度。我將它們分成兩塊，是爲了指定不同的easing函數，不然可能會混在一起。
這種方法也使用了功能檢測，就是如果你在Safari、Firefox、Edge或沒有flag的Chrome/Opera中查看過，你就會發現，你看到的是一則提示消息，看不到動畫。要看到動畫的話也有幾個方法，例如：
var m = document.getElementById('motioner');if (m.style.motionOffset !== undefined) { ... }當然，我們不希望把用戶阻擋在一個真正的web thang(注：web thang是一個“涵蓋web上的網站和app”的術語)中，所以我們可以有一個備用的動畫（或者沒有動畫也可以），如果支持的話再切換成Motion Path動畫。漸進增強總是沒錯的。
motion-rotation
最後一個屬性是motion-rotation，它處理的是元素“面向”哪個方向，在沿着路徑移動的過程中。有四種主要的方式來指定。
值
auto表示元素隨着路徑一起旋轉。值
reverse表示元素不僅會隨着路徑旋轉，它還會加180度，面向後方。值
auto Xdeg（或reverse Xdeg）也是同樣，除了增加x的度數。值
Xdeg不會隨着路徑旋轉，元素會保持固定面朝同一個方向。
還漏了什麼？
這是第一個版本，當然，瀏覽器製造商和規範制定者還在討論中。我在嘗試這一點的時候注意到的最重要的事情是，缺乏一個方法來在不同的屏幕/容器尺寸中適應路徑。
路徑是按照它們被定義的方式簡單地顯示出來的。當使用SVG工作的時候，我們有靈活性，因爲我們在容器中有不同的座標系統和屬性，如viewBox。在CSS中定義Motion Path，路徑的尺寸不能被其它屬性另外修改或制約。你的元素上定義的寬度和高度只能應用於元素，而不是它的移動路徑。你可以使用媒體查詢或者JavaScript來根據不同的標準定義不同的路徑，但是通過motion屬性設置又要有靈活性目前還是不可能的。
接下來
我們會看到規範的方向，但目前嘗試一下看看它爲我們提供了什麼（或者沒有提供什麼），還是非常好玩的。我收集了一組在CodePen上找到的CSS Motion Path的demo，以及Eric Willigers（Chrome開發團隊中實現這塊內容的負責人）也有一個放了一些示例的Google文檔。
我們將在下一篇中結束這個系列，然後重新過一遍我們之前討論的內容，並看看一些目前規範中的專題。
本文根據@Dancwilson的《Web Animations API Tutorial Part 5: The Loveable Motion Path》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處：http://danielcwilson.com/blog/2015/09/animations-part-5/。
彥子
在校學生，本科計算機專業。逗比一枚，熱愛前端熱愛生活，喜歡CSS喜歡JavaScript喜歡SVG，愛玩PS玩AI玩啊逗比的軟件。努力向上，厚積薄發。
如需轉載，煩請註明出處：http://www.w3cplus.com/css3/web-animations-api-tutorial-part-5-the-loveable-motion-path.html