2011 2/25開催のNHN HTML5勉強会で使用したスライドです。 内容は、ブラウザゲームでのCSS3でのアニメーションの導入事例についてです。 http://atnd.org/events/13029

1. ブラウザゲーム CSS3アニメーション 作成者：馬場 宣孝 所属チーム /上位部署: ：Mobile UIチーム / UIT室 作成年月日： 2011 / 02 / 25

2. 自己紹介 UIT室 Mobile UIチーム 馬場 宣孝 baba noritaka Tw: pesblog フロントエンドエンジニア ２９才 前職 3DCGテクニカルデザイナー 写真好き（Flickrも好き!）

3. アジェンダ 初めに サービスの説明 はじめに 本題 問題点1 CSS3アニメーション 問題点２ グラデーションとrgba 問題点３ 角丸とディスプレイ 本資料に掲載されている内容は無断転載禁止です。 本資料に関して質問・要望などがございましたら、 NHN Japan株式会社 UIT室 馬場 宣孝 baba.noritaka@nhn.comまでお問い合わせください。

4. ゲーム紹介 ブラウザゲームの一覧

5. ゲーム紹介 対戦リバーシ

6. はじめに iOS iPhone3GS (3.1.3) iPhone4 （4.1） Android HT-03A (1.6) xperia （1.6) Desire (2.1)

7. はじめに 今回は作りながら起こった問題点と 対処を紹介します

8. はじめに まずは、CSS3の表現力を デザイナーさんに伝えるところから始まります

9. はじめに デザイナーさんと 協力しないことには始まりません！

10. はじめに CSS3は万能ではない

11. はじめに 出来ることはもちろん、 出来ないことへの対処方法や、 処理の重さ等々、話し合おう！

12. はじめに CSS3を多用したのはなぜか 理由１ ダウンロードサイズをとにかく軽く 理由２ 高解像度の端末でキレイに表示 理由３ パーツ用の、画像切り出しコストを削減 理由４ CSS3にとても期待

13. はじめに CSS3の中で主に使ったもの -webkit-user-select: none; -webkit-border-radius -webkit-box-sizing:border-box; -webkit-box-shadow -webkit-gradient -webkit-transform -webkit-text-shadow -webkit-text-overflow:ellipsis; overflow: -webkit-marquee; rgba（color）

14. 数々の問題点 色々問題が出てきた… 問題点１ CSSアニメーションの壁ｘ２ 問題点２ グラデーションとrgbaの壁 問題点３ 角丸とディスプレイの壁

15. CSS3アニメーションの壁ｘ２ その１ どんなアニメーションか DEMO

16. CSS3アニメーションの壁ｘ２ その１ どんなアニメーションか

17. CSS3アニメーションの壁ｘ２ その１ 実際のソースコード （一部抜粋）

18. CSS3アニメーションの壁ｘ２ その１ の、その前に、 CSSアニメーションの 基礎編

19. CSS3アニメーションの壁ｘ２ その１ アニメーションで使用するプロパティの簡単な説明 ※実際にはプリフィックスを付けます @keyframes’アニメーション名’{ 0%{スタート時のプロパティ} 50%{半分の時のプロパティ} 100%{エンド時のプロパティ} } animation-duration（アニメーションの長さ） の値を元にしたパーセンテージ 0% 50% 100%

20. CSS3アニメーションの壁ｘ２ その１ アニメーションで使用するプロパティの簡単な説明 ※実際にはプリフィックスを付けます div{ animation-name:名前; animation-duration: 一回分の長さ; animation-timing-function: タイミングや進行具合; animation-iteration-count: 何回再生か; animation-direction: リピートするか; animation-play-state: 実行状態; animation-delay: 待ち時間; }

21. CSS3アニメーションの壁ｘ２ その１ アニメーションで使用するプロパティの簡単な説明 ※実際にはプリフィックスを付けます div{ animation-name:名前; animation-duration: 一回分の長さ; animation-timing-function: タイミングや進行具合; animation-iteration-count: 何回再生か; animation-direction: リピートするか; animation-play-state: 実行状態; animation-delay: 待ち時間; } ↑ まずはこの値でタイミングを調整してみた

22. CSS3アニメーションの壁ｘ２ その１ 実際のソースコード （一部抜粋）

23. @keyframes’koma-black-to-white’{ 0%{opacity:0;} 0.1%{opacity:1;} 99.9%{opacity:1;} 100%{opacity:0;} } ← opacity:1; 見える ← opacity:0; 見えない ※実際にはプリフィックスを付けます

24. .koma1{ ... animation-delay: 0; ← すぐに再生を始める } .koma2{ ... animation-delay: 0.2; ← 0.2秒後に再生を始める } .koma3{ ... animation-delay: 0.4; ← 0.4秒後に再生を始める } ※実際にはプリフィックスを付けます

25. CSS3アニメーションの壁ｘ２ その１ 概念図： animation-delay Version 見える 見えない ↑ 0.2秒 ↑ スタート地点 ↑ 0.4秒 ↑ 0.6秒 時間軸

26. CSS3アニメーションの壁ｘ２ その１ 試したところ、失敗！ チカチカしてしまった… DEMO iPhoneOS 3.1.3 のみ

27. CSS3アニメーションの壁ｘ２ その１ animation-delayは まだ信用できない！ iPhoneOS 3.1.3 のみ

28. CSS3アニメーションの壁ｘ２ その２ 試行錯誤 ＋ 他サイト研究！

29. CSS3アニメーションの壁ｘ２ その２ 浮上したのは

30. CSS3アニメーションの壁ｘ２ その２ キーフレームアニメーション！

31. .koma1{ ... animation-name: koma-black-to-white1; animation-delay: 0; ← } .koma2{ ... animation-name: koma-black-to-white2; animation-delay: 0; ← } .koma3{ ... animation-name: koma-black-to-white3; animation-delay: 0; ← } ※実際にはプリフィックスを付けます ※全体を10秒に設定しています

32. @keyframes’koma-black-to-white3’{ 0%{opacity:0;} 3.99%{opacity:0;} 4%{opacity:1;} 6%{opacity:1;} 6.01%{opacity:0;} 100%{opacity:0;} } @keyframes’koma-black-to-white1’{ 0%{opacity:0;} 0.01%{opacity:1;} 2%{opacity:1;} 2.01%{opacity:0;} 100%{opacity:0;} } @keyframes’koma-black-to-white2’{ 0%{opacity:0;} 1.99%{opacity:0;} 2%{opacity:1;} 4%{opacity:1;} 4.01%{opacity:0;} 100%{opacity:0;} } ※実際にはプリフィックスを付けます ※全体を10秒に設定しています

33. CSS3アニメーションの壁ｘ２ その２ 概念図： keyframe Version 見える 見えない ↑ 0.2秒 ↑ スタート地点 ↑ 0.4秒 ↑ 0.6秒 時間軸

34. CSS3アニメーションの壁ｘ２ その２ やっと正常に再生された！ DEMO 全機種OK！

35. CSS3アニメーションの壁ｘ２ その２ と、思ったら…

36. CSS3アニメーションの壁ｘ２ その２ 「このアニメーション 重いです」 （ふ、普通に再生されてる けど？）

37. CSS3アニメーションの壁ｘ２ その２ 「コマが大量に増えると 遅くなるんですよ…」

38. CSS3アニメーションの壁ｘ２ その２ どれどれ？ DEMO 全機種NG

39. CSS3アニメーションの壁ｘ２ その２ 「わ、分かりました。 なんとか軽くしてみます」

40. CSS3アニメーションの壁ｘ２ その２ コマの描画を簡素にした div x 3個 div x 1個

41. CSS3アニメーションの壁ｘ２ その２ まだ重い…

42. CSS3アニメーションの壁ｘ２ その２ もう、いっそのこと画像にした div x 3個 div x 1個 img

43. CSS3アニメーションの壁ｘ２ その２ まだ重い…

44. CSS3アニメーションの壁ｘ２ その２ え、どうすりゃいいの？

45. CSS3アニメーションの壁ｘ２ その２ もしかしてCSS3アニメーション って重い…？

46. CSS3アニメーションの壁ｘ２ その２ どうも原因は opacityのよう

47. CSS3アニメーションの壁ｘ２ その２ でも、当時は時間も無く Javascriptで表示切替 しました。（アレ…

48. var stoneImages = [], animationTime = 360, stoneColor = 1; stoneImages[1] = [ $('<img src="boardarea_black.png">'), $('<img src="boardarea_blacktowhite01.png">'), $('<img src="boardarea_blacktowhite02.png">'), $('<img src="boardarea_blacktowhite03.png">') ]; stoneImages[2] = [ $('<img src="boardarea_white.png">'), $('<img src="boardarea_whitetoblack01.png">'), $('<img src="boardarea_whitetoblack02.png">'), $('<img src="boardarea_whitetoblack03.png">') ];

49. function animationOneFrame(allCell, frameCount, stoneColor, newStoneColor) { setTimeout(function() { if(frameCount === 3) { allCell.html(stoneImages[stoneColor === 1 ? 2 : 1][0].clone()); return; } allCell.html(stoneImages[stoneColor][frameCount + 1].clone()); animationOneFrame(allCell, frameCount + 1, stoneColor, newStoneColor); }, animationTime / 3); }

50. CSS3アニメーションの壁ｘ２ その２ やっと正常に再生された！ パート２ DEMO 全機種OK！

51. CSS3アニメーションの壁ｘ２ まとめ CSS3アニメーションまとめ まとめ１ animation-delay で タイミングをとらず keyframeを使用すること まとめ２ DOMが多いと重い まとめ３ opacity の多用も重い まとめ４ javascriptの使用も考慮に入れること

52. 数々の問題点 問題点１ CSS3アニメーションの壁ｘ２ 問題点３ 角丸とディスプレイの壁 問題点２ グラデーションとrgbaの壁

53. グラデーションとrgbaの壁 ↑ to ↑ from ↑ color-stop ↑ ↑ color-stop ↑ color-stop background: -webkit-gradient(linear, left top,right top, from(#f00), color-stop(0.4,#0036ff), color-stop(0.6,#0cff00), color-stop(0.75,#ffea00), to(#f00)); background: -webkit-gradient(radial, center center, 0, center center, 70, from(#1A82F7), to(#2F2727))

54. グラデーションとrgbaの壁 コードだけで グラデーション作れる！

55. グラデーションとrgbaの壁 サイズ違いの背景のために 「bg_gra01.gif」 「bg_gra02.gif」 とかとか、必要なくて楽チン しかも…

56. グラデーションとrgbaの壁 コードのみなので 断然軽い！※ ※少なくともダウンロードサイズは

57. グラデーションとrgbaの壁 さらに…

58. グラデーションとrgbaの壁 colorの新しい指定方法 rgbaと組み合わせたら もっと楽しいはず！

59. グラデーションとrgbaの壁 background: -webkit-gradient(linear, left top,right top, from(#f00), color-stop(0.4,rgba(0,0,0,0)), color-stop(0.6,rgba(0,0,0,0)), to(#f00)); background: -webkit-gradient(radial, center center, 20, center center, 70, from(rgba(0,0,0,0)), color-stop(0.5,#f00), to(rgba(0,0,0,0)))

60. グラデーションとrgbaの壁 ところが！

61. グラデーションとrgbaの壁 Android1.6でバグ発見 他のOS Android1.6

62. グラデーションとrgbaの壁 結局、画像で対処することに…

63. グラデーションとrgbaの壁 まとめ グラデーションとrgbaまとめ まとめ１ 背景画像の作成・管理から開放される まとめ２ 軽い！ まとめ３ rgba() と組み合わせると色々出来る まとめ４ radial + rgba() はまだバグ有り

64. 数々の問題点 問題点１ CSS3アニメーションの壁ｘ２ 問題点２ グラデーションとrgbaの壁 問題点３ 角丸とディスプレイの壁

65. 角丸とディスプレイの壁 皆さんご存知の角丸 border-radius:5px; via: http://www.w3.org/TR/css3-background/#corners

66. 角丸とディスプレイの壁 うちのデザインでも多用しています。 の箇所は全て角丸です。 via: http://www.w3.org/TR/css3-background/#corners

67. 角丸とディスプレイの壁 ここにも問題が発生

68. 角丸とディスプレイの壁 ディスプレイに原因が！

69. 角丸とディスプレイの壁 CSSの描画には アンチエリアシングが無い

70. 角丸とディスプレイの壁 left = 偶数 その他すべて偶数 left = 奇数 その他すべて偶数 Android端末の７割～８割

71. 角丸とディスプレイの壁 小さい図形ほど、しかも、 border-radius 以外でも目に付く

72. 角丸とディスプレイの壁 原因 -> devicePixelRatio 実寸だと、こんな見栄えでも、、、 iPhone3GS 480x320 iPhone4 960x480 Android 800x480 Android 854x480

73. 角丸とディスプレイの壁 1Pixelの大きさを同じにしてみると、こんなに違います。 iPhone3GS 480x320 iPhone4 960x480 Android 800x480 Android 854x480

74. 角丸とディスプレイの壁 devicePixelRatio = 画像 1pixel を 何pixel で描画するか、という値 画像データ ディスプレイ上 1pixel 1.5pixel 1pixel 原因 1.5pixel 2pixel

75. 角丸とディスプレイの壁 devicePixelRatio が 1.5pixel の場合は、全て偶数にする必要がある。 原点

76. 角丸とディスプレイの壁 まとめ 角丸とディスプレイまとめ まとめ１ DevicePixelRatioを知る まとめ２ 小さい部位ほど偶数を意識 まとめ３ 出来るなら top left height width border-radius すべてを偶数にする

77. Thank you. 作成者：馬場 宣孝 所属チーム /上位部署: ：Mobile UIチーム / UIT室 連絡先： baba.noritaka@nhn.com 作成年月日： 2011 / 02 / 25