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

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