nhn html5勉強会 css3アニメーション
Post on 07-Jul-2015
21.541 Views
Preview:
DESCRIPTION
TRANSCRIPT
ブラウザゲームCSS3アニメーション作成者：馬場 宣孝
所属チーム /上位部署: ：Mobile UIチーム / UIT室
作成年月日： 2011 / 02 / 25
UIT室 Mobile UIチーム
馬場 宣孝baba noritaka
Tw: pesblog
フロントエンドエンジニア ２９才
前職 3DCGテクニカルデザイナー
写真好き（Flickrも好き!）
自己紹介
問題点1 CSS3アニメーション
初めに
サービスの説明
はじめに
本題
問題点２ グラデーションとrgba
問題点３ 角丸とディスプレイ
本資料に掲載されている内容は無断転載禁止です。
本資料に関して質問・要望などがございましたら、
NHN Japan株式会社 UIT室 馬場 宣孝
baba.noritaka@nhn.comまでお問い合わせください。
アジェンダ
ゲーム紹介 ブラウザゲームの一覧
ゲーム紹介 対戦リバーシ
iOSiPhone3GS (3.1.3)iPhone4 （4.1）
AndroidHT-03A (1.6)xperia （1.6)Desire (2.1)
はじめに
今回は作りながら起こった問題点と
対処を紹介します
はじめに
まずは、CSS3の表現力を
デザイナーさんに伝えるところから始まります
はじめに
デザイナーさんと協力しないことには始まりませ
ん！
はじめに
CSS3は万能ではない
はじめに
出来ることはもちろん、出来ないことへの対処方法や、処理の重さ等々、話し合おう！
はじめに
CSS3を多用したのはなぜか
理由２ 高解像度の端末でキレイに表示
理由３ パーツ用の、画像切り出しコストを削減理由４ 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）
はじめに
数々の問題点
色々問題が出てきた…
問題点１ CSSアニメーションの壁ｘ２問題点２ グラデーションとrgbaの壁問題点３ 角丸とディスプレイの壁
どんなアニメーションか
DEMO
CSS3アニメーションの壁ｘ２ その１
どんなアニメーションか
CSS3アニメーションの壁ｘ２ その１
実際のソースコード（一部抜粋）
CSS3アニメーションの壁ｘ２ その１
の、その前に、CSSアニメーションの 基礎編
CSS3アニメーションの壁ｘ２ その１
アニメーションで使用するプロパティの簡単な説明※実際にはプリフィックスを付けます
@keyframes’アニメーション名’{
0%{スタート時のプロパティ}50%{半分の時のプロパティ}100%{エンド時のプロパティ}}
animation-duration（アニメーションの長さ）の値を元にしたパーセンテージ
0% 50% 100%
CSS3アニメーションの壁ｘ２ その１
アニメーションで使用するプロパティの簡単な説明※実際にはプリフィックスを付けます
div{animation-name:名前;animation-duration: 一回分の長さ;animation-timing-function: タイミングや進行具合;animation-iteration-count: 何回再生か;animation-direction: リピートするか;animation-play-state: 実行状態;animation-delay: 待ち時間;}
CSS3アニメーションの壁ｘ２ その１
div{animation-name:名前;animation-duration: 一回分の長さ;animation-timing-function: タイミングや進行具合;animation-iteration-count: 何回再生か;animation-direction: リピートするか;animation-play-state: 実行状態;animation-delay: 待ち時間;}
アニメーションで使用するプロパティの簡単な説明※実際にはプリフィックスを付けます
↑まずはこの値でタイミングを調整してみた
CSS3アニメーションの壁ｘ２ その１
実際のソースコード（一部抜粋）
CSS3アニメーションの壁ｘ２ その１
@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アニメーションの壁ｘ２ その１
見えない
見える
DEMO
iPhoneOS 3.1.3 のみ
試したところ、失敗！チカチカしてしまった…
CSS3アニメーションの壁ｘ２ その１
animation-delayは
まだ信用できない！iPhoneOS 3.1.3 のみ
CSS3アニメーションの壁ｘ２ その１
試行錯誤 ＋ 他サイト研究！
CSS3アニメーションの壁ｘ２ その２
浮上したのは
CSS3アニメーションの壁ｘ２ その２
キーフレームアニメーション！
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秒に設定しています
※実際にはプリフィックスを付けます※全体を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アニメーションの壁ｘ２ その２
見えない
見える
やっと正常に再生された！
DEMO
全機種OK！
CSS3アニメーションの壁ｘ２ その２
と、思ったら…
CSS3アニメーションの壁ｘ２ その２
「このアニメーション重いです」
CSS3アニメーションの壁ｘ２ その２
（ふ、普通に再生されてるけど？）
CSS3アニメーションの壁ｘ２ その２
「コマが大量に増えると遅くなるんですよ…」
どれどれ？
DEMO
全機種NG
CSS3アニメーションの壁ｘ２ その２
「わ、分かりました。なんとか軽くしてみます」
CSS3アニメーションの壁ｘ２ その２
コマの描画を簡素にした
CSS3アニメーションの壁ｘ２ その２
div x 3個 div x 1個
まだ重い…
CSS3アニメーションの壁ｘ２ その２
もう、いっそのこと画像にした
div x 3個 div x 1個 img
CSS3アニメーションの壁ｘ２ その２
まだ重い…
CSS3アニメーションの壁ｘ２ その２
え、どうすりゃいいの？
CSS3アニメーションの壁ｘ２ その２
CSS3アニメーションの壁ｘ２ その２
もしかしてCSS3アニメーション
って重い…？
どうも原因は opacity のよう
CSS3アニメーションの壁ｘ２ その２
でも、当時は時間も無くJavascriptで表示切替しました。（アレ…
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">')];
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);
}
やっと正常に再生された！パート２
DEMO
全機種OK！
CSS3アニメーションの壁ｘ２ その２
CSS3アニメーションまとめ
まとめ１ animation-delay で タイミングをとらず
keyframe を使用することまとめ２ DOM が多いと重い
まとめ３ opacity の多用も重い
まとめ４ javascript の使用も考慮に入れること
CSS3アニメーションの壁ｘ２ まとめ
問題点１ CSS3アニメーションの壁ｘ２
問題点２グラデーションとrgbaの壁
問題点３ 角丸とディスプレイの壁
数々の問題点
↑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まとめ
まとめ１ 背景画像の作成・管理から開放されるまとめ２ 軽い！
まとめ３ rgba() と組み合わせると色々出来る
グラデーションとrgbaの壁 まとめ
まとめ４ radial + rgba() はまだバグ有り
問題点１ CSS3アニメーションの壁ｘ２
問題点３角丸とディスプレイの壁
問題点２ グラデーションと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端末の７割～８割
角丸とディスプレイの壁
小さい図形ほど、しかも、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 の場合は、全て偶数にする必要がある。
原点
角丸とディスプレイの壁
角丸とディスプレイまとめ
まとめ１ DevicePixelRatioを知る
まとめ２ 小さい部位ほど偶数を意識
まとめ３ 出来るならtop left height width border-
radius
すべてを偶数にする
角丸とディスプレイの壁 まとめ
Thank you.作成者：馬場 宣孝
所属チーム /上位部署: ：Mobile UIチーム / UIT室
連絡先： baba.noritaka@nhn.com
作成年月日： 2011 / 02 / 25
top related