Open Rplus opened 8 years ago
Duration and easing - Motion - Google design guidelines https://www.google.com/design/spec/motion/
簡中:http://www.uisdc.com/material-motion-design-guideline
考慮加速度,往返的加減速應要柔順
cubic-bezier(0.4, 0.0, 0.2, 1)
cubic-bezier(0.0, 0.0, 0.2, 1)
cubic-bezier(0.4, 0.0, 1, 1)
cubic-bezier(0.4, 0.0, 0.6, 1)
移動時考慮重力感,
縮放比率有異動時,可採用寬高不同步縮放
這邊好難,複合式動畫時序 狀態切換前後是否有共用元件,它們的呈現方式也應該有所不同 有共用的就該持續維持存在感,非共用的採漸進呈現
漸進呈現的細節好麻煩 O_Q 同向 & 盡快 (減少非必要動畫)
O_Q
這一部份用 web 很難做吶 = = 除非用 SVG cliip 去切 (而且私以為這算是有點過度設計的部份了 ~"~ , 實作上會困難許多許多…)
~"~
這部粉很吃設計美感~ 不過 LOGO 部份的動畫的確是應該要設計到有印象深刻的感覺~
source: https://twitter.com/GoogleDesign/status/730092589014237184 tw: https://twitter.com/RplusTW/status/733001332605362176 fb: https://www.facebook.com/100001733786295/posts/1121915631209552
Duration and easing - Motion - Google design guidelines https://www.google.com/design/spec/motion/
簡中:http://www.uisdc.com/material-motion-design-guideline
Duration
mobile 上跟得上且不會太慢的持續時間:
常見時間
Easing
考慮加速度,往返的加減速應要柔順
cubic-bezier(0.4, 0.0, 0.2, 1)
cubic-bezier(0.0, 0.0, 0.2, 1)
cubic-bezier(0.4, 0.0, 1, 1)
cubic-bezier(0.4, 0.0, 0.6, 1)
Movement
移動時考慮重力感,
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