[POST] Google Material motion

[Rplus]

Duration and easing - Motion - Google design guidelines
https://www.google.com/design/spec/motion/

簡中：http://www.uisdc.com/material-motion-design-guideline

Duration

mobile 上跟得上且不會太慢的持續時間：

• 大尺度的動畫 300ms ~ 400ms
• 小尺度的動畫 150ms ~ 200ms

常見時間

• mobile: ~300ms
  • 進場：225ms
  • 換場: 375ms
  • 退場: 195ms
• tablet: +30%, ~390ms
• wearable: -30%, ~210ms
• desktop: 150ms ~ 200ms ( 螢幕太大，要簡化動畫

Easing

考慮加速度，往返的加減速應要柔順

• Standard: cubic-bezier(0.4, 0.0, 0.2, 1)
• Deceleration(減速，easing-out): cubic-bezier(0.0, 0.0, 0.2, 1)
• Acceleration(加速, easing-in): cubic-bezier(0.4, 0.0, 1, 1)
• Sharp(): cubic-bezier(0.4, 0.0, 0.6, 1)

Movement

移動時考慮重力感，

• 進場使用減速進入、退場使用加速離開
• off-canvas-like 的換幕可用 shap curve，以隨時切換加速度方向

Transforming

縮放比率有異動時，可採用寬高不同步縮放

Choreography

這邊好難，複合式動畫時序
狀態切換前後是否有共用元件，它們的呈現方式也應該有所不同
有共用的就該持續維持存在感，非共用的採漸進呈現

漸進呈現的細節好麻煩 O_Q
同向 & 盡快
(減少非必要動畫)

Radial reaction

這一部份用 web 很難做吶 = =
除非用 SVG cliip 去切
(而且私以為這算是有點過度設計的部份了 ~"~ ， 實作上會困難許多許多…)

Creative customization

這部粉很吃設計美感~
不過 LOGO 部份的動畫的確是應該要設計到有印象深刻的感覺~

---

source: https://twitter.com/GoogleDesign/status/730092589014237184
tw: https://twitter.com/RplusTW/status/733001332605362176
fb: https://www.facebook.com/100001733786295/posts/1121915631209552