2017 Material design 第二章第四節《Material的變化》

4、Material的變化（Transforming material）

Material可以經過改變本身的形狀和尺寸來吸引用戶關注。

矩形的變化（Rectangular transformation）
不一樣時
同時

徑向變化（Radial transformation）
對稱和圓形

矩形的變化

Material對象的形狀（尺寸）上的變化並非同時放大（或縮小），而是寬和高錯開放大（或縮小），同時分別應用緩動曲線效果。這些Material對象大小的縮放不僅僅只考慮自身的變化，還須要綜合考慮它與周邊或者內部其餘元素的關係，精心編排整一套的對象動效變化。

凡是出如今屏幕上關於material對象自身的變化都須要應用標準曲線的運動效果，好比下面的例子所示。

寬和高的變化
對象的寬、高變化可能同時發生變化，也可能不一樣時發生變化。

不一樣時發生變化的意思就是說寬和高不在同一時間開始放大（或縮小）。這種寬高變化方式適合涉及到多個對象變化或發生位置變化的狀況。

不一樣時發生變化。如圖，當對象的尺寸放大時，該對象的寬在高以前一點開始發生變化。反之，當對象的尺寸縮小時，該對象的高在寬以前一點開始發生變化。

同時發生變化的意思就是說寬和高在同一時間開始放大（或縮小）。這種寬高變化方式適合單個對象沿單一軸向變化的狀況。

同時發生變化。寬和高同時發生變化的方式適合一些簡單的大小變化動效。這種方式下的運動持續時間應比寬高不一樣時發生變化方式下的要短。

當對象寬、高的變化是不一樣時發生的方式，那該對象包含的元素（如文本或圖像）的尺寸變化應該按照一個固定的寬高比而不是採起寬、高不一樣時發生變化的方式進行變化，不然就會顯得極其不天然。更多關於包含元素的對象該如何進行變化，請看 編排。

如圖，內容中元素（好比全寬（full-width）圖片）尺寸變化按照一個固定的寬高比進行縮放，儘管元素的容器（好比大的卡片）尺寸變化採用的是寬、高不一樣時發生變化的方式。

如圖，容器中的內容若是是全出血（full-bleed）的（好比全出血的圖片），那麼這個全出血的內容應該跟隨其容器同樣採用寬、高同時發生變化的方式。

徑向變化

徑向變化採用的是等比例（寬、高同時變化）的縮放方式，其變化來自用戶觸發。徑向變化通常用於圓形變化成其餘圖形。

圖中圓形變化成矩形的動效應用的是徑向變化。

可行

如圖，徑向變化不適用於兩個矩形之間的變化。

不可行

徑向變化必定要等比例進行縮放，不然就會像圖中同樣奇怪。

不可行

不要使用複雜的圖形進行變化。

不可行

以當前被觸發對象的中心位置爲準開始變化。

如圖中案例，浮動按鈕（FAB）的中心沿着弧線向上移動逐漸變化成一張卡片（card）；反之，卡片的中心沿着弧線向下移動逐漸變回浮動按鈕。

如圖中案例，浮動按鈕保持中心點不變的狀況下進行變化

合併與分裂

合併
Material對象能夠與其餘對象合併，也能夠分裂出多個Material對象。當兩個對象合併的時候，它們相互接近，直到邊緣相遇、重疊，最後結束移動完成合並。

分裂
當material對象分裂出多個對象的時候，其中每一個被分裂的對象只須要相互移動離開就能完成分裂。

投影
分裂出來的material對象的投影不會投射到其餘對象的身上。

material對象的合併與分裂