Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

"いい感じ"is 何

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

transition-timing-functionの値 • ease • linear • ease-in • ease-out • ease-in-out • cubic-bezier() ハッキリ言って少なすぎ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Robert Pennerのイージング関数

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

まとめ Conclusion

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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