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

Meguro.css #2 LT発表資料

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