at wcaf vol8 http://www.wcaf.jp/archives/2012/03/09/349/

1. UIアニメーションのセオリー
-気持ちいい動きをデザインしよう-
@itsuki_kosen

2. ・自己紹介
福井高専電子情報工学科５年
多田 一貴 Kazuki TADA
itsuki_kosen
facebook.com/itsukichang
keyword : Flash (AS2, 3), UI

3. ・対象
動きのあるコンテンツ
・webサイト
◦メニュー
◦画像
・webアプリケーション
◦画像
・スマホアプリ
◦画面遷移 etc... ※ユーザの動作に対する細かいギミック

4. ・既存の技術
・jQuery
・jsTweener
・sprite.js

5. ・今日のお話
２つのポイント
ライブラリを使わず柔軟に対応できる、
アニメーションの実装方法
気持ち良さのツボ、
アニメーションのメリハリ

6. ・今日のお話
２つのポイント
ライブラリを使わず柔軟に対応できる、
アニメーションの実装方法
気持ち良さのツボ、
アニメーションのメリハリ

7. ・アニメーションの実装方法
動きの定番、 徐々に○○

8. ・JOJOに○○ ※特別出演：ささきくん，しろくろくん
インタラクションとしてのアニメーション
・拡大/縮小
・スライド
・フェードイン/アウト
・回転
etc...

9. ・JOJOに○○
アニメーションのパターン
・動きが等速
・動きが等速ではない

10. ・JOJOに○○
アニメーションのパターン
・動きが等速
時間毎の動きが一定
(10秒で100px移動するなら，1秒毎の
移動量は常に10px)
・動きが等速ではない

11. ・JOJOに○○
アニメーションのパターン
・動きが等速
時間毎の動きが一定
(10秒で100px移動するなら，1秒毎の
移動量は常に10px)
・動きが等速ではない
時間毎の動きが変化する
(10秒で100px移動するとき，1秒毎の
移動量は常に違う．
1秒目40px ２秒目20px ３秒目10px...)

12. ・JOJOに○○
アニメーションのパターン
・動きが等速
なんだかぎこちない
・動きが等速ではない
アニメーションっぽい！

13. ・JOJOに○○
アニメーションのパターン
・動きが等速
なんだかぎこちない
・動きが等速ではない
アニメーションっぽい！

14. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
増加値 = ( 目的値 - 現在値 ) n

15. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
増加値 = ( 目的値 - 現在値 ) n
数式まで出てきたモウダメダ... _:(́ཀ`」 ∠):

16. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
( 目的値 - 現在値 ) n
例) 画像を10pxから100pxまで滑らかに拡大させたい！

17. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
( 目的値 - 現在値 ) n
例) 画像を10pxから100pxまで滑らかに拡大させたい！
時間毎の動きが変化する
(10秒で100px移動するとき，1秒毎の
移動量(増加値) は常に違う．
1秒目40px ２秒目20px ３秒目10px...)

18. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
( 目的値 - 現在値 ) n
例) 画像を10pxから100pxまで滑らかに拡大させたい！
スタート ゴール
10px 100px

19. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
( 目的値 - 現在値 ) n
例) 画像を10pxから100pxまで滑らかに拡大させたい！
+30px +20px +15px +8px +6px +4px +...

20. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
増加値 = ( 目的値 - 現在値 ) n
例) 画像を10pxから100pxまで滑らかに拡大させたい！
( 100 - 10 ) n

21. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
増加値 = ( 目的値 - 現在値 ) n
例) 画像を10pxから100pxまで滑らかに拡大させたい！
( 100 - 10 ) 4

22. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
増加値 = ( 目的値 - 現在値 ) n
例) 画像を10pxから100pxまで滑らかに拡大させたい！
( 100 - 10 ) 4 = 22.5
次の現在値 = 今の値+増加値 = 10 + 22.5 = 32.5

23. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
増加値 = ( 目的値 - 現在値 ) n
例) 画像を10pxから100pxまで滑らかに拡大させたい！
( 100 - 32.5 ) 4 = 16.8
次の現在値 = 今の値+増加値 = 32.5 + 16.8 = 49.3

24. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
増加値 = ( 目的値 - 現在値 ) n
例) 画像を10pxから100pxまで滑らかに拡大させたい！
10 → 32 → 49 → 62 → 71 → 78 → 84 →
90 → 93 → 95 → 96 → 97 → 98 → 99 → 100！

25. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
増加値 = ( 目的値 - 現在値 ) n
例) 画像を10pxから100pxまで滑らかに拡大させたい！
ちなみに n とは？

26. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
増加値 = ( 目的値 - 現在値 ) n
例) 画像を10pxから100pxまで滑らかに拡大させたい！
ちなみに n とは？
目的値に到達するまでの早さ，増加値が変化する

27. ・JOJOに○○
定番のテクニック -滑らかな動きの為の増加量-
増加値 = ( 目的値 - 現在値 ) n
例) 画像を10pxから100pxまで滑らかに拡大させたい！
10 → 32 → 49 → 62 → 71 → 78 → 84 →
90 → 93 → 95 → 96 → 97 → 98 → 99 → 100！
n=4
10 → 55 → 77 → 88 → 94 → 97 → 98 → 99 → 100！ n=2
10 → 21 → 31 → 39 → 47 → 53 → 59 →
64 → 69 → 72 → 76 → 79 → 81 → 84 →...
n=8

28. ・JOJOに○○
大事なただ１つのテクニック
増加値 = ( 目的値 - 現在値 ) n
・拡大/縮小 ・スライド ・フェードイン/アウト ・回転
その他全ての値を滑らかに遷移させることができる．

29. ・今日のお話
２つのポイント
ライブラリを使わず柔軟に対応できる、
アニメーションの実装方法
気持ち良さのツボ、
アニメーションのメリハリ

30. ・今日のお話
２つのポイント
ライブラリを使わず柔軟に対応できる、
アニメーションの実装方法
気持ち良さのツボ、
アニメーションのメリハリ

31. ・気持ち良さのツボ
気持ちいい動きとは、
メリハリがしっかりした動き。

32. ・気持ち良さのツボ -メリハリ①
①毎回目的値まで必ず到達すること。
・よくある事例
マウスオーバーしたら○○。
＼むくむくっ／
マウスアウトで元に戻る。 ＼しょぼんぬ／
例) 画像にマウスオーバーで拡大
マウスアウトしたら元のサイズに。

33. ・気持ち良さのツボ -メリハリ①
①毎回目的値まで必ず到達すること。
・よくある事例
マウスオーバーしたら○○。
＼むくむくっ／
マウスアウトで元に戻る。 ＼しょぼんぬ／
例) 画像にマウスオーバーで拡大
マウスアウトしたら元のサイズに。
※注意点：拡大途中でマウスアウトしても、
必ず最大値まで大きくなること。

34. ・気持ち良さのツボ -メリハリ①
①毎回目的値まで必ず到達すること。
・スッキリする
・毎回揃う気持ち良さがある（反復）
・複雑なアニメーションの際の挙動不審バグを潰せる
＼ ﾝﾝｷﾞﾓﾁﾞｨ ／

35. ・気持ち良さのツボ -メリハリ②
②入りは早く、戻りは余韻を残して。
例) 画像にマウスオーバーで拡大
マウスアウトしたら元のサイズに。
具体例) マウスオーバーしたら１秒で 100px → 130px
マウスオーバー ＼ 130px ／ マウスアウト
＼ 120px ／
＼ 115px ／
＼ 100px ／ ＼ 100px ／
0.2秒 0.8秒 0.5秒 0.5秒
※触れた瞬間、半分くらいの変化をしてしまう。
「変化があるんだ」という気づきをユーザに与えるため。

36. ・気持ち良さのツボ -メリハリ②
②入りは早く、戻りは余韻を残して。
・変化にすぐ気づける
・レスポンスは早い方がいいよね
・入りと戻り、同じ秒数でも変化の割合をかけることで気
持ち良さを表現できる
＼ ﾝﾝｷﾞﾓﾁﾞｨ ／

37. ・まとめ
①これ一つで滑らか遷移
増加値 = ( 目的値 - 現在値 ) n
②気持ち良さのツボは、メリハリをつけること
＼ ポイントやで！ ／
・目的値まで毎回到達
・動きの入りは早く、戻りには余韻を