"いい感じ"にするためのイージング

 "いい感じ"にするためのイージング

Meguro.css #2 LT発表資料

Cb42953bfedcd81daf5b1330d98712c3?s=128

448jp | OKI Yoshiya

July 27, 2018
Tweet

Transcript

  1. 2018.7.27 (Fri) Meguro.css #2 @ oRo "いい感じ" にするための イージング 世路庵

    沖 良矢
  2. 沖 良矢 ◉ 世路庵 ◉ フリーランス10年目 ◉ インタラクションデザイナー @448jp おき

    よしや
  3. アニメーションの 実装における指示例

  4. アニメーションツール? コンテ? 参考サイト? Webサービス?

  5. 個人的に一番多いのは……

  6. "いい感じ"に してください

  7. "いい感じ"is 何

  8. 美しさを備える メンテナンス性が高い "いい感じ"のアニメーションとは 好さ ユーザー/ビジネス課題を解決する あるべき姿を表す 善さ 参考:「FLASHerがこの先生きのこるには」https://qiita.com/alumican_net/items/f21170d68a686e59eab2 +

  9. 作ってみたけど、"いい感じ"にならない……

  10. 原因の90%は イージング です (個人の感想)

  11. 「なんか違う」ときは、 イージング>時間>対象 の順で調整するとうまくいく (個人の感想)

  12. CSS Transitionsにおけるイージング指定 .box { opacity: 1; transition: 0.4s ease-out; &:hover

    { opacity: 0.4; } }
  13. transition-timing-functionの値 • ease • linear • ease-in • ease-out •

    ease-in-out • cubic-bezier() ハッキリ言って少なすぎ
  14. デモ (イージングの違い)

  15. Robert Pennerのイージング関数

  16. cubic-bezier() によるイージングの拡張 .box { opacity: 1; transition: 0.4s cubic-bezier(0.645, 0.045,

    0.355, 1); &:hover { opacity: 0.4; } }
  17. Sassの変数で使い回し $easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1); .box { opacity: 1;

    transition: 0.4s $easeInOutCubic; &:hover { opacity: 0.4; } }
  18. cubic-bezier.comで独自イージング

  19. まとめ Conclusion

  20. CSSのイージングは cubic-bezier()で 初めて真価を発揮する

  21. 目先の好さだけに囚われず その先の善さと両立する アニメーションを意識しよう

  22. ありがとうございました 沖 良矢 @448jp