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

Transcript

1. 1.

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

   沖 良矢
2. 2.

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

   よしや
3. 3.

   アニメーションの 実装における指示例

4. 4.

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

5. 5.

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

6. 6.

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

7. 7.

   "いい感じ"is 何

8. 8.

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

9. 9.

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

10. 10.

    原因の90%は イージング です （個人の感想）

11. 11.

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

12. 12.

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

    { opacity: 0.4; } }
13. 13.

    transition-timing-functionの値 • ease • linear • ease-in • ease-out •

    ease-in-out • cubic-bezier() ハッキリ言って少なすぎ
14. 14.

    デモ （イージングの違い）

15. 15.

    Robert Pennerのイージング関数

16. 16.

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

    0.355, 1); &:hover { opacity: 0.4; } }
17. 17.

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

    transition: 0.4s $easeInOutCubic; &:hover { opacity: 0.4; } }
18. 18.

    cubic-bezier.comで独自イージング

19. 19.

    まとめ Conclusion

20. 20.

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

21. 21.

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

22. 22.

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