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