-背景
近期的項目中兩次遇到了同類問題，因交互動效時間不合理造成了用戶的困惑，帶來了不好的體驗。所以做了交互持續時間和交互響應時間的小梳理。本文是交互持續時間篇。
-場景案例
在一些導航類交互中，只允許一個展開項。當手動點擊展開一個分類A時，自動收起另一個分類B。這時B的收起會引起A的位置變化，因變化時間短，眼睛無法捕捉定位A的變化。
如下圖是一個展開收起交互動效的快慢對比，時長分別爲200ms和500ms：
可以看到，非用戶直接觸發的動效（B引起A的位移），較快的變化會引起困惑。通過調整動效的持續時間，適當放慢動效後用戶可清晰感知運動趨勢以及操作的結果。
下面就交互動效的持續時間和動效類型進行一個分析。
一、動效的常見4種屬性變化
設計師在製作動效時常用位置（position）、大小（scale）、旋轉（rotation）、透明度（opacity）四種屬性來定義交互微動效的變化，通過其中一種或幾種屬性的組合，就能實現大部分的效果。在網頁端也可通過以上4種屬性的變化來實現。
在css樣式中用transition屬性定義變化。transition有2種屬性值transitionDuration和transitionTimingFunction，分別定義了動效變化的時間和位移時間曲線，和設計師製作動效的時間和位移時間曲線相對應。
二、動效持續時間——transitionDuration
時間是動效的一個核心元素，在網頁端中，動效可通過transitionDuration的值來進行設置。
動效的持續時間一般不超過500ms（除加載動效外）；
較大元素的複雜變化（如大範圍位移）可長達400~500ms；
小元素的簡單變化一般在200～300ms;
人腦處理模型中，捕捉一個圖像平均需要230ms；
低於200ms，用戶捕捉不到微小的變化;
出場動效一般比入場動效更快（如入場230ms，出場200ms）。
三、動效曲線——transitionTimingFunction
對於網頁端的動效，可在瀏覽器中查看前端代碼，直接調整transition屬性的貝塞爾曲線，預覽動效效果
transitionTimingFunction幾種默認屬性值，
CSS樣式中幾種默認動效曲線，大多與常見的物理屬性相關。下圖是與之對應的常見動效曲線
減速和加速動效往往是成對使用的。通常元素入場時用減速運動，出場時用加速運動。
很多起點和終點都在界面內的運動都使用先加速後減速的緩動形式，如iOS天氣App的城市切換動畫。
-結語
交互的動效以功能性爲主，清晰動效的目的和觸發機制，在設計時選擇合適的動效持續時間與動效類型，直接影響到用戶的注意力和用戶體驗。