1.關(guān)于設(shè)計(jì)動效
????扁平化設(shè)計(jì)之后，用戶可以更專注于界面的主要信息上，不被多余的元素干擾，產(chǎn)品體驗(yàn)更加高效、自然，但是新的問題是扁平化設(shè)計(jì)和用戶對于現(xiàn)實(shí)世界的3D認(rèn)知不一致。為了展現(xiàn)界面中復(fù)雜層級關(guān)系，更高效的向用戶傳達(dá)核心信息，Google推出了Material Design設(shè)計(jì)語言。Material Design的動效設(shè)計(jì)這一章命名為「Animation」，動詞 Animate 是「賦予生命」的意思，動效可理解為利用動畫的方法賦予界面生命和活力。
2.動效的作用?
????傳遞信息層級
????通過動效提示，幫助用戶準(zhǔn)確理解產(chǎn)品的信息架構(gòu)層級。
????提示信息狀態(tài)
? ? 準(zhǔn)確生動的動效，給予用戶及時(shí)的操作反饋，提高用戶使用產(chǎn)品的效率。
? ? 帶來美好的情感體驗(yàn)
????創(chuàng)造性、恰當(dāng)?shù)膭赢嫗橛脩魩砣の缎院兔赖南硎堋?/p>
3.動效的構(gòu)成
動效是元素通過屬性變化量、動畫時(shí)間以及貝塞爾插值曲線（運(yùn)動速率）三個方面構(gòu)成的；
? ? ?3.1.動效的元素屬性變化量包括：
? ? 移動，旋轉(zhuǎn)，縮放，屬性變化（透明度，形狀，顏色）；
? ????? 對應(yīng)的屬性參數(shù)分別是：
????????移動(position) 、旋轉(zhuǎn)(rotation)、 縮放(scale)、透明度(alpha)、形狀(shape)、顏色(color)
? ? 3.2.動畫時(shí)間：動畫的起始時(shí)間、持續(xù)時(shí)間（duration\?offset）
? ? 3.3.貝塞爾插值曲線 [運(yùn)動速率(interpolator）]：
?????????曲線(curve）：運(yùn)動狀態(tài)
表 1. 常用動效標(biāo)注內(nèi)容如圖：
表 2. 時(shí)長規(guī)范如圖：
根據(jù)屏幕的大小，動效的時(shí)長也會產(chǎn)生變化，根據(jù) material design 的定義，不同設(shè)備對應(yīng)的動效時(shí)長如表 2 所示：
下面介紹一下關(guān)于運(yùn)動速率的貝塞爾曲線：
主流的動畫設(shè)計(jì)中（After Effect、Origami、Principle、FramerJS），由于動畫引擎不同的緣故，導(dǎo)致同樣的設(shè)計(jì)效果不同。不過，其中的貝塞爾插值和函數(shù)在開發(fā)過程中可以很好的兼容Android/iOS/Web多平臺動效的實(shí)現(xiàn)，貝塞爾曲線是動畫效果在執(zhí)行時(shí)的速度狀態(tài)，使其看起來更加真實(shí)。
貝塞爾曲線掃盲教程http://www.html-js.com/article/1628
設(shè)計(jì)師在動效制作軟件中可獲得的曲線數(shù)值?http://cubic-bezier.com/#.25,.1,.4,.91
https://easings.net/zh-cn#（前端人員可用）
下圖分別為常用的動效設(shè)計(jì)軟件AE、Principle、Framer JS、Origami的貝塞爾曲線圖：
4.動效如何落地
動效的實(shí)現(xiàn)需要和開發(fā)人員協(xié)同進(jìn)行，所以需要提前和開發(fā)溝通動效方案的可行性和時(shí)效成本，避免方案流產(chǎn)。總的來說導(dǎo)出合理的動效標(biāo)注文件主要分為以下三步：
第一步：要快速可視化
? ? 用趁手的工具將自己的動效想法快速準(zhǔn)確的呈現(xiàn)給開發(fā)；
第二步：在對應(yīng)的設(shè)備下呈現(xiàn)動效? ??
????時(shí)間允許的情況下，在電腦或者手機(jī)端演示對應(yīng)端的界面交互動效；
第三步：把設(shè)計(jì)動效參數(shù)化
? ? 除了用演示的方法讓開發(fā)人員了解到動效的呈現(xiàn)樣式，還需要交付精確的動效參數(shù)給開發(fā)人員，便于動效的可以被精準(zhǔn)無誤的開發(fā)出來。
動效參數(shù)：
設(shè)備端類型、動畫尺寸、幀速率、觸發(fā)條件、對象、變化屬性、貝塞爾曲線數(shù)值、備注（轉(zhuǎn)場動效描述）、時(shí)間
material design?動效說明文檔：https://www.mdui.org/design/motion/material-motion.html
