nhn html5勉強会 css3アニメーション
DESCRIPTION
2011 2/25開催のNHN HTML5勉強会で使用したスライドです。内容は、ブラウザゲームでのCSS3でのアニメーションの導入事例についてです。http://atnd.org/events/13029TRANSCRIPT
ブラウザゲームCSS3アニメーション作成者:馬場 宣孝
所属チーム /上位部署: :Mobile UIチーム / UIT室
作成年月日: 2011 / 02 / 25
UIT室 Mobile UIチーム
馬場 宣孝baba noritaka
Tw: pesblog
フロントエンドエンジニア 29才
前職 3DCGテクニカルデザイナー
写真好き(Flickrも好き!)
自己紹介
問題点1 CSS3アニメーション
初めに
サービスの説明
はじめに
本題
問題点2 グラデーションとrgba
問題点3 角丸とディスプレイ
本資料に掲載されている内容は無断転載禁止です。
本資料に関して質問・要望などがございましたら、
NHN Japan株式会社 UIT室 馬場 宣孝
[email protected]までお問い合わせください。
アジェンダ
ゲーム紹介 ブラウザゲームの一覧
ゲーム紹介 対戦リバーシ
iOSiPhone3GS (3.1.3)iPhone4 (4.1)
AndroidHT-03A (1.6)xperia (1.6)Desire (2.1)
はじめに
今回は作りながら起こった問題点と
対処を紹介します
はじめに
まずは、CSS3の表現力を
デザイナーさんに伝えるところから始まります
はじめに
デザイナーさんと協力しないことには始まりませ
ん!
はじめに
CSS3は万能ではない
はじめに
出来ることはもちろん、出来ないことへの対処方法や、処理の重さ等々、話し合おう!
はじめに
CSS3を多用したのはなぜか
理由2 高解像度の端末でキレイに表示
理由3 パーツ用の、画像切り出しコストを削減理由4 CSS3にとても期待
理由1 ダウンロードサイズをとにかく軽く
はじめに
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)
はじめに
数々の問題点
色々問題が出てきた…
問題点1 CSSアニメーションの壁x2問題点2 グラデーションとrgbaの壁問題点3 角丸とディスプレイの壁
どんなアニメーションか
DEMO
CSS3アニメーションの壁x2 その1
どんなアニメーションか
CSS3アニメーションの壁x2 その1
実際のソースコード(一部抜粋)
CSS3アニメーションの壁x2 その1
の、その前に、CSSアニメーションの 基礎編
CSS3アニメーションの壁x2 その1
アニメーションで使用するプロパティの簡単な説明※実際にはプリフィックスを付けます
@keyframes’アニメーション名’{
0%{スタート時のプロパティ}50%{半分の時のプロパティ}100%{エンド時のプロパティ}}
animation-duration(アニメーションの長さ)の値を元にしたパーセンテージ
0% 50% 100%
CSS3アニメーションの壁x2 その1
アニメーションで使用するプロパティの簡単な説明※実際にはプリフィックスを付けます
div{animation-name:名前;animation-duration: 一回分の長さ;animation-timing-function: タイミングや進行具合;animation-iteration-count: 何回再生か;animation-direction: リピートするか;animation-play-state: 実行状態;animation-delay: 待ち時間;}
CSS3アニメーションの壁x2 その1
div{animation-name:名前;animation-duration: 一回分の長さ;animation-timing-function: タイミングや進行具合;animation-iteration-count: 何回再生か;animation-direction: リピートするか;animation-play-state: 実行状態;animation-delay: 待ち時間;}
アニメーションで使用するプロパティの簡単な説明※実際にはプリフィックスを付けます
↑まずはこの値でタイミングを調整してみた
CSS3アニメーションの壁x2 その1
実際のソースコード(一部抜粋)
CSS3アニメーションの壁x2 その1
@keyframes’koma-black-to-white’{
0%{opacity:0;}0.1%{opacity:1;}99.9%{opacity:1;}100%{opacity:0;}}
← opacity:1; 見える
← opacity:0; 見えない
※実際にはプリフィックスを付けます
.koma1{...animation-delay: 0; ← すぐに再生を始める}.koma2{...animation-delay: 0.2; ← 0.2秒後に再生を始める}.koma3{...animation-delay: 0.4; ← 0.4秒後に再生を始める}
※実際にはプリフィックスを付けます
概念図: animation-delay Version
時間軸↑
0.2秒↑
スタート地点
↑
0.4秒↑
0.6秒
CSS3アニメーションの壁x2 その1
見えない
見える
DEMO
iPhoneOS 3.1.3 のみ
試したところ、失敗!チカチカしてしまった…
CSS3アニメーションの壁x2 その1
animation-delayは
まだ信用できない!iPhoneOS 3.1.3 のみ
CSS3アニメーションの壁x2 その1
試行錯誤 + 他サイト研究!
CSS3アニメーションの壁x2 その2
浮上したのは
CSS3アニメーションの壁x2 その2
キーフレームアニメーション!
CSS3アニメーションの壁x2 その2
.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秒に設定しています
※実際にはプリフィックスを付けます※全体を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;}}
概念図: keyframe Version
時間軸↑
0.2秒↑
スタート地点
↑
0.4秒↑
0.6秒
CSS3アニメーションの壁x2 その2
見えない
見える
やっと正常に再生された!
DEMO
全機種OK!
CSS3アニメーションの壁x2 その2
と、思ったら…
CSS3アニメーションの壁x2 その2
「このアニメーション重いです」
CSS3アニメーションの壁x2 その2
(ふ、普通に再生されてるけど?)
CSS3アニメーションの壁x2 その2
「コマが大量に増えると遅くなるんですよ…」
どれどれ?
DEMO
全機種NG
CSS3アニメーションの壁x2 その2
「わ、分かりました。なんとか軽くしてみます」
CSS3アニメーションの壁x2 その2
コマの描画を簡素にした
CSS3アニメーションの壁x2 その2
div x 3個 div x 1個
まだ重い…
CSS3アニメーションの壁x2 その2
もう、いっそのこと画像にした
div x 3個 div x 1個 img
CSS3アニメーションの壁x2 その2
まだ重い…
CSS3アニメーションの壁x2 その2
え、どうすりゃいいの?
CSS3アニメーションの壁x2 その2
CSS3アニメーションの壁x2 その2
もしかしてCSS3アニメーション
って重い…?
どうも原因は opacity のよう
CSS3アニメーションの壁x2 その2
でも、当時は時間も無くJavascriptで表示切替しました。(アレ…
CSS3アニメーションの壁x2 その2
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">')];
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);
}
やっと正常に再生された!パート2
DEMO
全機種OK!
CSS3アニメーションの壁x2 その2
CSS3アニメーションまとめ
まとめ1 animation-delay で タイミングをとらず
keyframe を使用することまとめ2 DOM が多いと重い
まとめ3 opacity の多用も重い
まとめ4 javascript の使用も考慮に入れること
CSS3アニメーションの壁x2 まとめ
問題点1 CSS3アニメーションの壁x2
問題点2グラデーションとrgbaの壁
問題点3 角丸とディスプレイの壁
数々の問題点
↑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の壁
コードだけでグラデーション作れる!
グラデーションとrgbaの壁
サイズ違いの背景のために「bg_gra01.gif」「bg_gra02.gif」
とかとか、必要なくて楽チンしかも…
グラデーションとrgbaの壁
コードのみなので
断然軽い!※
※少なくともダウンロードサイズは
グラデーションとrgbaの壁
さらに…
グラデーションとrgbaの壁
colorの新しい指定方法rgbaと組み合わせたらもっと楽しいはず!
グラデーションとrgbaの壁
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の壁
ところが!
グラデーションとrgbaの壁
Android1.6でバグ発見
他のOS Android1.6
グラデーションとrgbaの壁
結局、画像で対処することに…
グラデーションとrgbaの壁
グラデーションとrgbaまとめ
まとめ1 背景画像の作成・管理から開放されるまとめ2 軽い!
まとめ3 rgba() と組み合わせると色々出来る
グラデーションとrgbaの壁 まとめ
まとめ4 radial + rgba() はまだバグ有り
問題点1 CSS3アニメーションの壁x2
問題点3角丸とディスプレイの壁
問題点2 グラデーションとrgbaの壁
数々の問題点
via: http://www.w3.org/TR/css3-background/#corners
皆さんご存知の角丸
border-radius:5px;
角丸とディスプレイの壁
via: http://www.w3.org/TR/css3-background/#corners
うちのデザインでも多用しています。の箇所は全て角丸です。
角丸とディスプレイの壁
ここにも問題が発生
角丸とディスプレイの壁
ディスプレイに原因が!
角丸とディスプレイの壁
CSSの描画にはアンチエリアシングが無い
角丸とディスプレイの壁
left = 偶数 その他すべて偶数
left = 奇数 その他すべて偶数
Android端末の7割~8割
角丸とディスプレイの壁
小さい図形ほど、しかも、border-radius 以外でも目に付く
角丸とディスプレイの壁
原因 → devicePixelRatio実寸だと、こんな見栄えでも、、、
iPhone3GS 480x320 iPhone4 960x480 Android 800x480 Android 854x480
角丸とディスプレイの壁
1Pixelの大きさを同じにしてみると、こんなに違います。
iPhone3GS 480x320 iPhone4 960x480 Android 800x480 Android 854x480
角丸とディスプレイの壁
devicePixelRatio = 画像 1pixel を何pixel で描画するか、という値
1pixel 1pixel
1.5pixel
2pixel
原因
画像データ ディスプレイ上
1.5pixel
角丸とディスプレイの壁
devicePixelRatio が 1.5pixel の場合は、全て偶数にする必要がある。
原点
角丸とディスプレイの壁
角丸とディスプレイまとめ
まとめ1 DevicePixelRatioを知る
まとめ2 小さい部位ほど偶数を意識
まとめ3 出来るならtop left height width border-
radius
すべてを偶数にする
角丸とディスプレイの壁 まとめ