nhn html5勉強会 css3アニメーション

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

Upload: nhnhangame

Post on 07-Jul-2015

21.541 views

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: NHN HTML5勉強会 CSS3アニメーション

ブラウザゲームCSS3アニメーション作成者:馬場 宣孝

所属チーム /上位部署: :Mobile UIチーム / UIT室

作成年月日: 2011 / 02 / 25

Page 2: NHN HTML5勉強会 CSS3アニメーション

UIT室 Mobile UIチーム

馬場 宣孝baba noritaka

Tw: pesblog

フロントエンドエンジニア 29才

前職 3DCGテクニカルデザイナー

写真好き(Flickrも好き!)

自己紹介

Page 3: NHN HTML5勉強会 CSS3アニメーション

問題点1 CSS3アニメーション

初めに

サービスの説明

はじめに

本題

問題点2 グラデーションとrgba

問題点3 角丸とディスプレイ

本資料に掲載されている内容は無断転載禁止です。

本資料に関して質問・要望などがございましたら、

NHN Japan株式会社 UIT室 馬場 宣孝

[email protected]までお問い合わせください。

アジェンダ

Page 4: NHN HTML5勉強会 CSS3アニメーション

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

Page 5: NHN HTML5勉強会 CSS3アニメーション

ゲーム紹介 対戦リバーシ

Page 6: NHN HTML5勉強会 CSS3アニメーション

iOSiPhone3GS (3.1.3)iPhone4 (4.1)

AndroidHT-03A (1.6)xperia (1.6)Desire (2.1)

はじめに

Page 7: NHN HTML5勉強会 CSS3アニメーション

今回は作りながら起こった問題点と

対処を紹介します

はじめに

Page 8: NHN HTML5勉強会 CSS3アニメーション

まずは、CSS3の表現力を

デザイナーさんに伝えるところから始まります

はじめに

Page 9: NHN HTML5勉強会 CSS3アニメーション

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

ん!

はじめに

Page 10: NHN HTML5勉強会 CSS3アニメーション

CSS3は万能ではない

はじめに

Page 11: NHN HTML5勉強会 CSS3アニメーション

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

はじめに

Page 12: NHN HTML5勉強会 CSS3アニメーション

CSS3を多用したのはなぜか

理由2 高解像度の端末でキレイに表示

理由3 パーツ用の、画像切り出しコストを削減理由4 CSS3にとても期待

理由1 ダウンロードサイズをとにかく軽く

はじめに

Page 13: NHN HTML5勉強会 CSS3アニメーション

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)

はじめに

Page 14: NHN HTML5勉強会 CSS3アニメーション

数々の問題点

色々問題が出てきた…

問題点1 CSSアニメーションの壁x2問題点2 グラデーションとrgbaの壁問題点3 角丸とディスプレイの壁

Page 15: NHN HTML5勉強会 CSS3アニメーション

どんなアニメーションか

DEMO

CSS3アニメーションの壁x2 その1

Page 16: NHN HTML5勉強会 CSS3アニメーション

どんなアニメーションか

CSS3アニメーションの壁x2 その1

Page 17: NHN HTML5勉強会 CSS3アニメーション

実際のソースコード(一部抜粋)

CSS3アニメーションの壁x2 その1

Page 18: NHN HTML5勉強会 CSS3アニメーション

の、その前に、CSSアニメーションの 基礎編

CSS3アニメーションの壁x2 その1

Page 19: NHN HTML5勉強会 CSS3アニメーション

アニメーションで使用するプロパティの簡単な説明※実際にはプリフィックスを付けます

@keyframes’アニメーション名’{

0%{スタート時のプロパティ}50%{半分の時のプロパティ}100%{エンド時のプロパティ}}

animation-duration(アニメーションの長さ)の値を元にしたパーセンテージ

0% 50% 100%

CSS3アニメーションの壁x2 その1

Page 20: NHN HTML5勉強会 CSS3アニメーション

アニメーションで使用するプロパティの簡単な説明※実際にはプリフィックスを付けます

div{animation-name:名前;animation-duration: 一回分の長さ;animation-timing-function: タイミングや進行具合;animation-iteration-count: 何回再生か;animation-direction: リピートするか;animation-play-state: 実行状態;animation-delay: 待ち時間;}

CSS3アニメーションの壁x2 その1

Page 21: NHN HTML5勉強会 CSS3アニメーション

div{animation-name:名前;animation-duration: 一回分の長さ;animation-timing-function: タイミングや進行具合;animation-iteration-count: 何回再生か;animation-direction: リピートするか;animation-play-state: 実行状態;animation-delay: 待ち時間;}

アニメーションで使用するプロパティの簡単な説明※実際にはプリフィックスを付けます

↑まずはこの値でタイミングを調整してみた

CSS3アニメーションの壁x2 その1

Page 22: NHN HTML5勉強会 CSS3アニメーション

実際のソースコード(一部抜粋)

CSS3アニメーションの壁x2 その1

Page 23: NHN HTML5勉強会 CSS3アニメーション

@keyframes’koma-black-to-white’{

0%{opacity:0;}0.1%{opacity:1;}99.9%{opacity:1;}100%{opacity:0;}}

← opacity:1; 見える

← opacity:0; 見えない

※実際にはプリフィックスを付けます

Page 24: NHN HTML5勉強会 CSS3アニメーション

.koma1{...animation-delay: 0; ← すぐに再生を始める}.koma2{...animation-delay: 0.2; ← 0.2秒後に再生を始める}.koma3{...animation-delay: 0.4; ← 0.4秒後に再生を始める}

※実際にはプリフィックスを付けます

Page 25: NHN HTML5勉強会 CSS3アニメーション

概念図: animation-delay Version

時間軸↑

0.2秒↑

スタート地点

0.4秒↑

0.6秒

CSS3アニメーションの壁x2 その1

見えない

見える

Page 26: NHN HTML5勉強会 CSS3アニメーション

DEMO

iPhoneOS 3.1.3 のみ

試したところ、失敗!チカチカしてしまった…

CSS3アニメーションの壁x2 その1

Page 27: NHN HTML5勉強会 CSS3アニメーション

animation-delayは

まだ信用できない!iPhoneOS 3.1.3 のみ

CSS3アニメーションの壁x2 その1

Page 28: NHN HTML5勉強会 CSS3アニメーション

試行錯誤 + 他サイト研究!

CSS3アニメーションの壁x2 その2

Page 29: NHN HTML5勉強会 CSS3アニメーション

浮上したのは

CSS3アニメーションの壁x2 その2

Page 30: NHN HTML5勉強会 CSS3アニメーション

キーフレームアニメーション!

CSS3アニメーションの壁x2 その2

Page 31: NHN HTML5勉強会 CSS3アニメーション

.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秒に設定しています

Page 32: NHN HTML5勉強会 CSS3アニメーション

※実際にはプリフィックスを付けます※全体を10秒に設定しています

@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;}}

@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;}}

Page 33: NHN HTML5勉強会 CSS3アニメーション

概念図: keyframe Version

時間軸↑

0.2秒↑

スタート地点

0.4秒↑

0.6秒

CSS3アニメーションの壁x2 その2

見えない

見える

Page 34: NHN HTML5勉強会 CSS3アニメーション

やっと正常に再生された!

DEMO

全機種OK!

CSS3アニメーションの壁x2 その2

Page 35: NHN HTML5勉強会 CSS3アニメーション

と、思ったら…

CSS3アニメーションの壁x2 その2

Page 36: NHN HTML5勉強会 CSS3アニメーション

「このアニメーション重いです」

CSS3アニメーションの壁x2 その2

(ふ、普通に再生されてるけど?)

Page 37: NHN HTML5勉強会 CSS3アニメーション

CSS3アニメーションの壁x2 その2

「コマが大量に増えると遅くなるんですよ…」

Page 38: NHN HTML5勉強会 CSS3アニメーション

どれどれ?

DEMO

全機種NG

CSS3アニメーションの壁x2 その2

Page 39: NHN HTML5勉強会 CSS3アニメーション

「わ、分かりました。なんとか軽くしてみます」

CSS3アニメーションの壁x2 その2

Page 40: NHN HTML5勉強会 CSS3アニメーション

コマの描画を簡素にした

CSS3アニメーションの壁x2 その2

div x 3個 div x 1個

Page 41: NHN HTML5勉強会 CSS3アニメーション

まだ重い…

CSS3アニメーションの壁x2 その2

Page 42: NHN HTML5勉強会 CSS3アニメーション

もう、いっそのこと画像にした

div x 3個 div x 1個 img

CSS3アニメーションの壁x2 その2

Page 43: NHN HTML5勉強会 CSS3アニメーション

まだ重い…

CSS3アニメーションの壁x2 その2

Page 44: NHN HTML5勉強会 CSS3アニメーション

え、どうすりゃいいの?

CSS3アニメーションの壁x2 その2

Page 45: NHN HTML5勉強会 CSS3アニメーション

CSS3アニメーションの壁x2 その2

もしかしてCSS3アニメーション

って重い…?

Page 46: NHN HTML5勉強会 CSS3アニメーション

どうも原因は opacity のよう

CSS3アニメーションの壁x2 その2

Page 47: NHN HTML5勉強会 CSS3アニメーション

でも、当時は時間も無くJavascriptで表示切替しました。(アレ…

CSS3アニメーションの壁x2 その2

Page 48: NHN HTML5勉強会 CSS3アニメーション

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">')];

Page 49: NHN HTML5勉強会 CSS3アニメーション

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);

}

Page 50: NHN HTML5勉強会 CSS3アニメーション

やっと正常に再生された!パート2

DEMO

全機種OK!

CSS3アニメーションの壁x2 その2

Page 51: NHN HTML5勉強会 CSS3アニメーション

CSS3アニメーションまとめ

まとめ1 animation-delay で タイミングをとらず

keyframe を使用することまとめ2 DOM が多いと重い

まとめ3 opacity の多用も重い

まとめ4 javascript の使用も考慮に入れること

CSS3アニメーションの壁x2 まとめ

Page 52: NHN HTML5勉強会 CSS3アニメーション

問題点1 CSS3アニメーションの壁x2

問題点2グラデーションとrgbaの壁

問題点3 角丸とディスプレイの壁

数々の問題点

Page 53: NHN HTML5勉強会 CSS3アニメーション

↑color-stop

↑↑

color-stop

↑color-stop

↑from

↑to

background: -webkit-gradient(radial,center center, 0,center center, 70,

from(#1A82F7), to(#2F2727))

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));

グラデーションとrgbaの壁

Page 54: NHN HTML5勉強会 CSS3アニメーション

コードだけでグラデーション作れる!

グラデーションとrgbaの壁

Page 55: NHN HTML5勉強会 CSS3アニメーション

サイズ違いの背景のために「bg_gra01.gif」「bg_gra02.gif」

とかとか、必要なくて楽チンしかも…

グラデーションとrgbaの壁

Page 56: NHN HTML5勉強会 CSS3アニメーション

コードのみなので

断然軽い!※

※少なくともダウンロードサイズは

グラデーションとrgbaの壁

Page 57: NHN HTML5勉強会 CSS3アニメーション

さらに…

グラデーションとrgbaの壁

Page 58: NHN HTML5勉強会 CSS3アニメーション

colorの新しい指定方法rgbaと組み合わせたらもっと楽しいはず!

グラデーションとrgbaの壁

Page 59: NHN HTML5勉強会 CSS3アニメーション

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)))

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));

グラデーションとrgbaの壁

Page 60: NHN HTML5勉強会 CSS3アニメーション

ところが!

グラデーションとrgbaの壁

Page 61: NHN HTML5勉強会 CSS3アニメーション

Android1.6でバグ発見

他のOS Android1.6

グラデーションとrgbaの壁

Page 62: NHN HTML5勉強会 CSS3アニメーション

結局、画像で対処することに…

グラデーションとrgbaの壁

Page 63: NHN HTML5勉強会 CSS3アニメーション

グラデーションとrgbaまとめ

まとめ1 背景画像の作成・管理から開放されるまとめ2 軽い!

まとめ3 rgba() と組み合わせると色々出来る

グラデーションとrgbaの壁 まとめ

まとめ4 radial + rgba() はまだバグ有り

Page 64: NHN HTML5勉強会 CSS3アニメーション

問題点1 CSS3アニメーションの壁x2

問題点3角丸とディスプレイの壁

問題点2 グラデーションとrgbaの壁

数々の問題点

Page 65: NHN HTML5勉強会 CSS3アニメーション

via: http://www.w3.org/TR/css3-background/#corners

皆さんご存知の角丸

border-radius:5px;

角丸とディスプレイの壁

Page 66: NHN HTML5勉強会 CSS3アニメーション

via: http://www.w3.org/TR/css3-background/#corners

うちのデザインでも多用しています。の箇所は全て角丸です。

角丸とディスプレイの壁

Page 67: NHN HTML5勉強会 CSS3アニメーション

ここにも問題が発生

角丸とディスプレイの壁

Page 68: NHN HTML5勉強会 CSS3アニメーション

ディスプレイに原因が!

角丸とディスプレイの壁

Page 69: NHN HTML5勉強会 CSS3アニメーション

CSSの描画にはアンチエリアシングが無い

角丸とディスプレイの壁

Page 70: NHN HTML5勉強会 CSS3アニメーション

left = 偶数 その他すべて偶数

left = 奇数 その他すべて偶数

Android端末の7割~8割

角丸とディスプレイの壁

Page 71: NHN HTML5勉強会 CSS3アニメーション

小さい図形ほど、しかも、border-radius 以外でも目に付く

角丸とディスプレイの壁

Page 72: NHN HTML5勉強会 CSS3アニメーション

原因 → devicePixelRatio実寸だと、こんな見栄えでも、、、

iPhone3GS 480x320 iPhone4 960x480 Android 800x480 Android 854x480

角丸とディスプレイの壁

Page 73: NHN HTML5勉強会 CSS3アニメーション

1Pixelの大きさを同じにしてみると、こんなに違います。

iPhone3GS 480x320 iPhone4 960x480 Android 800x480 Android 854x480

角丸とディスプレイの壁

Page 74: NHN HTML5勉強会 CSS3アニメーション

devicePixelRatio = 画像 1pixel を何pixel で描画するか、という値

1pixel 1pixel

1.5pixel

2pixel

原因

画像データ ディスプレイ上

1.5pixel

角丸とディスプレイの壁

Page 75: NHN HTML5勉強会 CSS3アニメーション

devicePixelRatio が 1.5pixel の場合は、全て偶数にする必要がある。

原点

角丸とディスプレイの壁

Page 76: NHN HTML5勉強会 CSS3アニメーション

角丸とディスプレイまとめ

まとめ1 DevicePixelRatioを知る

まとめ2 小さい部位ほど偶数を意識

まとめ3 出来るならtop left height width border-

radius

すべてを偶数にする

角丸とディスプレイの壁 まとめ

Page 77: NHN HTML5勉強会 CSS3アニメーション

Thank you.作成者:馬場 宣孝

所属チーム /上位部署: :Mobile UIチーム / UIT室

連絡先: [email protected]

作成年月日: 2011 / 02 / 25