(譯)MaterialDesign(八)-Transformimg

其他文章

Material可以通過合并和分割,并改變形狀和尺寸使表面看起來更有活力。
矩形變換
對稱
不對稱
徑向變換
對稱和圓形

矩形變換

當材料改變形狀和尺寸時,其寬度和高度沿著運動曲線異步變化。 這些變化由改變元素內(nèi)部或周圍的附近表面進行。

在屏幕上發(fā)生的所有表面變換,使用標準曲線。

變換寬度和高度

可以使用不對稱或?qū)ΨQ的寬度和高度變化來擴展或折疊元素。

不對稱變換涉及不同速率的寬度和高度變化。 當涉及多個元素或位置變化時,它們工作最好。

不對稱變換

對稱變換涉及以相同速率發(fā)生的寬度和高度變化。 它們更適合于沿單個軸發(fā)生的單個元素的變換。

轉(zhuǎn)換寬度和高度在同一時間是一個簡單的動畫方法最適的形狀變化。這些轉(zhuǎn)換可以比非對稱的有稍短的持續(xù)時間。

當元素異步擴展時,其包含的項目(例如文本或圖像)以固定的寬高比更改大小,以防止非自然拉伸。

內(nèi)容(如全幅圖像)以恒定縱橫比變換,即使包裹它的容器(如較大的card)沿運動曲線異步變換。
容器可以同步擴展

徑向變換

徑向變換是源自用戶的觸摸點的對稱的圓形可視化。 它們通常用在圓形表面上,變形為其他形狀。

正確
正確的做法
徑向變換應(yīng)使用圓面,演變成矩形的表面,或從輸入的角度創(chuàng)造新的表面。
錯誤
錯誤的做法
在兩個矩形形狀之間轉(zhuǎn)換時不要使用徑向變換。
錯誤
錯誤的做法
不要無限地擴大橢圓的寬度和高度。
錯誤
錯誤的做法
不要轉(zhuǎn)換復(fù)雜圖形

變換可以源自對象的當前位置或者從正在形成的最終表面的中心。

在擴展過程中,F(xiàn)loating action button在其擴展到card中時沿弧線路徑向目標移動。
Floating action button的中心保持不變,在變換過程中,創(chuàng)造一個微妙的擴張效應(yīng)。

合并和分割

合并

Material可以與其它Material接合,或者它可以分成多個部分。 當兩片Material彼此接近時,它們的邊緣相遇并且邊緣在移動完成之前重疊。

分割

當材料分成多個部分時,這些部分在運動開始時開始分離。

陰影

來自分離材料的陰影不會出現(xiàn)在兄弟元素上方。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容