Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ブラウザゲーム<br />CSS3アニメーション<br />作成者:馬場 宣孝<br />所属チーム /上位部署: :Mobile UIチーム / UIT室<br />作成年月日: 2011 / 02 / 25<br />
自己紹介<br />UIT室 Mobile UIチーム<br />馬場 宣孝<br />baba noritaka<br />Tw: pesblog<br />フロントエンドエンジニア 29才<br />前職 3DCGテクニカルデザイナー<br...
アジェンダ<br />初めに<br />サービスの説明 <br />はじめに<br />本題<br />問題点1 CSS3アニメーション<br />問題点2 グラデーションとrgba<br />問題点3 角丸とディスプレイ<br />本資料に掲...
ゲーム紹介 ブラウザゲームの一覧<br />
ゲーム紹介 対戦リバーシ<br />
はじめに<br />iOS<br /> iPhone3GS (3.1.3)<br /> iPhone4 (4.1)<br />Android<br /> HT-03A (1.6)<br /> xperia (1.6)<br /> Desire ...
はじめに<br />今回は作りながら起こった問題点と<br />対処を紹介します<br />
はじめに<br />まずは、CSS3の表現力を<br />デザイナーさんに伝えるところから始まります<br />
はじめに<br />デザイナーさんと<br />協力しないことには始まりません!<br />
はじめに<br />CSS3は万能ではない<br />
はじめに<br />出来ることはもちろん、<br />出来ないことへの対処方法や、<br />処理の重さ等々、話し合おう!<br />
はじめに<br />CSS3を多用したのはなぜか<br />理由1 ダウンロードサイズをとにかく軽く<br />理由2 高解像度の端末でキレイに表示<br />理由3 パーツ用の、画像切り出しコストを削減<br />理由4 CSS3にとても期待...
はじめに<br />CSS3の中で主に使ったもの<br />-webkit-user-select: none;<br />-webkit-border-radius<br />-webkit-box-sizing:border-box;<br...
数々の問題点<br />色々問題が出てきた…<br />問題点1 CSSアニメーションの壁x2<br />問題点2 グラデーションとrgbaの壁<br />問題点3 角丸とディスプレイの壁<br />
CSS3アニメーションの壁x2 その1<br />どんなアニメーションか<br />DEMO<br />
CSS3アニメーションの壁x2 その1<br />どんなアニメーションか<br />
CSS3アニメーションの壁x2 その1<br />実際のソースコード<br />(一部抜粋)<br />
CSS3アニメーションの壁x2 その1<br />の、その前に、<br />CSSアニメーションの 基礎編<br />
CSS3アニメーションの壁x2 その1<br />アニメーションで使用するプロパティの簡単な説明<br />※実際にはプリフィックスを付けます<br />@keyframes’アニメーション名’{<br /> 0%{スタート時のプロパティ}<b...
CSS3アニメーションの壁x2 その1<br />アニメーションで使用するプロパティの簡単な説明<br />※実際にはプリフィックスを付けます  <br />div{<br />animation-name:名前;<br /> animatio...
CSS3アニメーションの壁x2 その1<br />アニメーションで使用するプロパティの簡単な説明<br />※実際にはプリフィックスを付けます  <br />div{<br />animation-name:名前;<br /> animatio...
CSS3アニメーションの壁x2 その1<br />実際のソースコード<br />(一部抜粋)<br />
@keyframes’koma-black-to-white’{<br /> 0%{opacity:0;}<br /> 0.1%{opacity:1;}<br /> 99.9%{opacity:1;}<br /> 100%{opacity:0;...
.koma1{<br /> ...<br />animation-delay: 0; ← すぐに再生を始める<br />}<br />.koma2{<br /> ...<br />animation-delay: 0.2; ← 0.2秒後に再生...
CSS3アニメーションの壁x2 その1<br />概念図: animation-delay Version  <br />見える<br />見えない<br />↑<br />0.2秒<br />↑<br />スタート地点<br />↑<br /...
CSS3アニメーションの壁x2 その1<br />試したところ、失敗!<br />チカチカしてしまった…<br />DEMO<br />iPhoneOS 3.1.3 のみ<br />
CSS3アニメーションの壁x2 その1<br />animation-delayは<br />まだ信用できない!<br />iPhoneOS 3.1.3 のみ<br />
CSS3アニメーションの壁x2 その2<br />試行錯誤 + 他サイト研究!<br />
CSS3アニメーションの壁x2 その2<br />浮上したのは<br />
CSS3アニメーションの壁x2 その2<br />キーフレームアニメーション!<br />
.koma1{<br /> ...<br />animation-name: koma-black-to-white1;<br /> animation-delay: 0; ←<br />}<br />.koma2{<br /> ...<br ...
@keyframes’koma-black-to-white3’{<br /> 0%{opacity:0;}<br /> 3.99%{opacity:0;}<br /> 4%{opacity:1;}<br /> 6%{opacity:1;}<b...
CSS3アニメーションの壁x2 その2<br />概念図: keyframe Version  <br />見える<br />見えない<br />↑<br />0.2秒<br />↑<br />スタート地点<br />↑<br />0.4秒<b...
CSS3アニメーションの壁x2 その2<br />やっと正常に再生された!<br />DEMO<br />全機種OK!<br />
CSS3アニメーションの壁x2 その2<br />と、思ったら…<br />
CSS3アニメーションの壁x2 その2<br />「このアニメーション<br />  重いです」<br />(ふ、普通に再生されてる けど?)<br />
CSS3アニメーションの壁x2 その2<br />「コマが大量に増えると<br />  遅くなるんですよ…」<br />
CSS3アニメーションの壁x2 その2<br />どれどれ?<br />DEMO<br />全機種NG<br />
CSS3アニメーションの壁x2 その2<br />「わ、分かりました。<br />なんとか軽くしてみます」<br />
CSS3アニメーションの壁x2 その2<br />コマの描画を簡素にした<br />div x 3個<br />div x 1個<br />
CSS3アニメーションの壁x2 その2<br />まだ重い…<br />
CSS3アニメーションの壁x2 その2<br />もう、いっそのこと画像にした<br />div x 3個<br />div x 1個<br />img<br />
CSS3アニメーションの壁x2 その2<br />まだ重い…<br />
CSS3アニメーションの壁x2 その2<br />え、どうすりゃいいの?<br />
CSS3アニメーションの壁x2 その2<br />もしかしてCSS3アニメーション<br />って重い…?<br />
CSS3アニメーションの壁x2 その2<br />どうも原因は opacityのよう<br />
CSS3アニメーションの壁x2 その2<br />でも、当時は時間も無く<br />Javascriptで表示切替<br />しました。(アレ…<br />
var stoneImages = [],<br />animationTime = 360,<br />stoneColor = 1;<br />stoneImages[1] = [<br />$('<img src="boardarea_b...
function animationOneFrame(allCell, frameCount, stoneColor, newStoneColor) {<br />  setTimeout(function() {<br />    if(fr...
CSS3アニメーションの壁x2 その2<br />やっと正常に再生された!<br />パート2<br />DEMO<br />全機種OK!<br />
CSS3アニメーションの壁x2 まとめ<br />CSS3アニメーションまとめ<br />まとめ1 animation-delay で タイミングをとらず<br />      keyframeを使用すること<br />まとめ2 DOMが多いと...
数々の問題点<br />問題点1 CSS3アニメーションの壁x2<br />問題点3 角丸とディスプレイの壁<br />問題点2 <br />グラデーションとrgbaの壁<br />
グラデーションとrgbaの壁<br />↑<br />to<br />↑<br />from<br />↑<br />color-stop<br />↑<br />↑<br />color-stop<br />↑<br />color-stop...
グラデーションとrgbaの壁<br />コードだけで<br />グラデーション作れる!<br />
グラデーションとrgbaの壁<br />サイズ違いの背景のために<br />「bg_gra01.gif」<br />「bg_gra02.gif」<br />とかとか、必要なくて楽チン<br />しかも…<br />
グラデーションとrgbaの壁<br />コードのみなので<br />断然軽い!※<br />※少なくともダウンロードサイズは<br />
グラデーションとrgbaの壁<br />さらに…<br />
グラデーションとrgbaの壁<br />colorの新しい指定方法<br />rgbaと組み合わせたら<br />もっと楽しいはず!<br />
グラデーションとrgbaの壁<br />background: -webkit-gradient(linear,<br />       left top,right top,<br />       from(#f00),<br />    ...
グラデーションとrgbaの壁<br />ところが!<br />
グラデーションとrgbaの壁<br />Android1.6でバグ発見<br />他のOS<br />Android1.6<br />
グラデーションとrgbaの壁<br />結局、画像で対処することに…<br />
グラデーションとrgbaの壁 まとめ<br />グラデーションとrgbaまとめ<br />まとめ1 背景画像の作成・管理から開放される<br />まとめ2 軽い!<br />まとめ3 rgba() と組み合わせると色々出来る<br />まとめ4...
数々の問題点<br />問題点1 CSS3アニメーションの壁x2<br />問題点2 グラデーションとrgbaの壁<br />問題点3<br />角丸とディスプレイの壁<br />
角丸とディスプレイの壁<br />皆さんご存知の角丸<br />border-radius:5px;<br />via: http://www.w3.org/TR/css3-background/#corners<br />
角丸とディスプレイの壁<br />うちのデザインでも多用しています。<br />  の箇所は全て角丸です。<br />via: http://www.w3.org/TR/css3-background/#corners<br />
角丸とディスプレイの壁<br />ここにも問題が発生<br />
角丸とディスプレイの壁<br />ディスプレイに原因が!<br />
角丸とディスプレイの壁<br />CSSの描画には<br />アンチエリアシングが無い<br />
角丸とディスプレイの壁<br />left = 偶数 その他すべて偶数<br />left = 奇数 その他すべて偶数<br />Android端末の7割~8割<br />
角丸とディスプレイの壁<br />小さい図形ほど、しかも、<br />border-radius 以外でも目に付く<br />
角丸とディスプレイの壁<br />原因 -> devicePixelRatio<br />実寸だと、こんな見栄えでも、、、<br />iPhone3GS 480x320<br />iPhone4 960x480<br />Android 800...
角丸とディスプレイの壁<br />1Pixelの大きさを同じにしてみると、こんなに違います。<br />iPhone3GS 480x320<br />iPhone4 960x480<br />Android 800x480<br />Andro...
角丸とディスプレイの壁<br />devicePixelRatio = 画像 1pixel を 何pixel で描画するか、という値<br />画像データ<br />ディスプレイ上<br />1pixel<br />1.5pixel<br />...
角丸とディスプレイの壁<br />devicePixelRatio が 1.5pixel の場合は、全て偶数にする必要がある。<br />原点<br />
角丸とディスプレイの壁 まとめ<br />角丸とディスプレイまとめ<br />まとめ1 DevicePixelRatioを知る<br />まとめ2 小さい部位ほど偶数を意識<br />まとめ3 出来るなら<br />    top left h...
Thank you.<br />作成者:馬場 宣孝<br />所属チーム /上位部署: :Mobile UIチーム / UIT室<br />連絡先: baba.noritaka@nhn.com<br />作成年月日: 2011 / 02 / 2...
Upcoming SlideShare
Loading in …5
×

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

23,891 views

Published on

2011 2/25開催のNHN HTML5勉強会で使用したスライドです。

内容は、ブラウザゲームでのCSS3でのアニメーションの導入事例についてです。

http://atnd.org/events/13029

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. ブラウザゲーム<br />CSS3アニメーション<br />作成者:馬場 宣孝<br />所属チーム /上位部署: :Mobile UIチーム / UIT室<br />作成年月日: 2011 / 02 / 25<br />
  2. 2. 自己紹介<br />UIT室 Mobile UIチーム<br />馬場 宣孝<br />baba noritaka<br />Tw: pesblog<br />フロントエンドエンジニア 29才<br />前職 3DCGテクニカルデザイナー<br />写真好き(Flickrも好き!)<br />
  3. 3. アジェンダ<br />初めに<br />サービスの説明 <br />はじめに<br />本題<br />問題点1 CSS3アニメーション<br />問題点2 グラデーションとrgba<br />問題点3 角丸とディスプレイ<br />本資料に掲載されている内容は無断転載禁止です。<br />本資料に関して質問・要望などがございましたら、<br />NHN Japan株式会社 UIT室 馬場 宣孝<br />baba.noritaka@nhn.comまでお問い合わせください。  <br />
  4. 4. ゲーム紹介 ブラウザゲームの一覧<br />
  5. 5. ゲーム紹介 対戦リバーシ<br />
  6. 6. はじめに<br />iOS<br /> iPhone3GS (3.1.3)<br /> iPhone4 (4.1)<br />Android<br /> HT-03A (1.6)<br /> xperia (1.6)<br /> Desire (2.1)<br />
  7. 7. はじめに<br />今回は作りながら起こった問題点と<br />対処を紹介します<br />
  8. 8. はじめに<br />まずは、CSS3の表現力を<br />デザイナーさんに伝えるところから始まります<br />
  9. 9. はじめに<br />デザイナーさんと<br />協力しないことには始まりません!<br />
  10. 10. はじめに<br />CSS3は万能ではない<br />
  11. 11. はじめに<br />出来ることはもちろん、<br />出来ないことへの対処方法や、<br />処理の重さ等々、話し合おう!<br />
  12. 12. はじめに<br />CSS3を多用したのはなぜか<br />理由1 ダウンロードサイズをとにかく軽く<br />理由2 高解像度の端末でキレイに表示<br />理由3 パーツ用の、画像切り出しコストを削減<br />理由4 CSS3にとても期待<br />
  13. 13. はじめに<br />CSS3の中で主に使ったもの<br />-webkit-user-select: none;<br />-webkit-border-radius<br />-webkit-box-sizing:border-box;<br />-webkit-box-shadow<br />-webkit-gradient<br />-webkit-transform<br />-webkit-text-shadow<br />-webkit-text-overflow:ellipsis;<br />overflow: -webkit-marquee;<br />rgba(color)<br />
  14. 14. 数々の問題点<br />色々問題が出てきた…<br />問題点1 CSSアニメーションの壁x2<br />問題点2 グラデーションとrgbaの壁<br />問題点3 角丸とディスプレイの壁<br />
  15. 15. CSS3アニメーションの壁x2 その1<br />どんなアニメーションか<br />DEMO<br />
  16. 16. CSS3アニメーションの壁x2 その1<br />どんなアニメーションか<br />
  17. 17. CSS3アニメーションの壁x2 その1<br />実際のソースコード<br />(一部抜粋)<br />
  18. 18. CSS3アニメーションの壁x2 その1<br />の、その前に、<br />CSSアニメーションの 基礎編<br />
  19. 19. CSS3アニメーションの壁x2 その1<br />アニメーションで使用するプロパティの簡単な説明<br />※実際にはプリフィックスを付けます<br />@keyframes’アニメーション名’{<br /> 0%{スタート時のプロパティ}<br /> 50%{半分の時のプロパティ}<br /> 100%{エンド時のプロパティ}<br />}<br />animation-duration(アニメーションの長さ)<br />の値を元にしたパーセンテージ<br />0%<br />50%<br />100%<br />
  20. 20. CSS3アニメーションの壁x2 その1<br />アニメーションで使用するプロパティの簡単な説明<br />※実際にはプリフィックスを付けます  <br />div{<br />animation-name:名前;<br /> animation-duration: 一回分の長さ;<br /> animation-timing-function: タイミングや進行具合;<br /> animation-iteration-count: 何回再生か;<br /> animation-direction: リピートするか;<br /> animation-play-state: 実行状態;<br /> animation-delay: 待ち時間;<br />}<br />
  21. 21. CSS3アニメーションの壁x2 その1<br />アニメーションで使用するプロパティの簡単な説明<br />※実際にはプリフィックスを付けます  <br />div{<br />animation-name:名前;<br /> animation-duration: 一回分の長さ;<br /> animation-timing-function: タイミングや進行具合;<br /> animation-iteration-count: 何回再生か;<br /> animation-direction: リピートするか;<br /> animation-play-state: 実行状態;<br /> animation-delay: 待ち時間;<br />}<br />  ↑<br />まずはこの値でタイミングを調整してみた<br />
  22. 22. CSS3アニメーションの壁x2 その1<br />実際のソースコード<br />(一部抜粋)<br />
  23. 23. @keyframes’koma-black-to-white’{<br /> 0%{opacity:0;}<br /> 0.1%{opacity:1;}<br /> 99.9%{opacity:1;}<br /> 100%{opacity:0;}<br />}<br />← opacity:1; 見える<br />← opacity:0; 見えない<br />※実際にはプリフィックスを付けます<br />
  24. 24. .koma1{<br /> ...<br />animation-delay: 0; ← すぐに再生を始める<br />}<br />.koma2{<br /> ...<br />animation-delay: 0.2; ← 0.2秒後に再生を始める<br />}<br />.koma3{<br /> ...<br />animation-delay: 0.4; ← 0.4秒後に再生を始める<br />}<br />※実際にはプリフィックスを付けます<br />
  25. 25. CSS3アニメーションの壁x2 その1<br />概念図: animation-delay Version  <br />見える<br />見えない<br />↑<br />0.2秒<br />↑<br />スタート地点<br />↑<br />0.4秒<br />↑<br />0.6秒<br />時間軸<br />
  26. 26. CSS3アニメーションの壁x2 その1<br />試したところ、失敗!<br />チカチカしてしまった…<br />DEMO<br />iPhoneOS 3.1.3 のみ<br />
  27. 27. CSS3アニメーションの壁x2 その1<br />animation-delayは<br />まだ信用できない!<br />iPhoneOS 3.1.3 のみ<br />
  28. 28. CSS3アニメーションの壁x2 その2<br />試行錯誤 + 他サイト研究!<br />
  29. 29. CSS3アニメーションの壁x2 その2<br />浮上したのは<br />
  30. 30. CSS3アニメーションの壁x2 その2<br />キーフレームアニメーション!<br />
  31. 31. .koma1{<br /> ...<br />animation-name: koma-black-to-white1;<br /> animation-delay: 0; ←<br />}<br />.koma2{<br /> ...<br />animation-name: koma-black-to-white2;<br />animation-delay: 0; ←<br />}<br />.koma3{<br /> ...<br />animation-name: koma-black-to-white3;<br />animation-delay: 0; ←<br />}<br />※実際にはプリフィックスを付けます<br />※全体を10秒に設定しています  <br />
  32. 32. @keyframes’koma-black-to-white3’{<br /> 0%{opacity:0;}<br /> 3.99%{opacity:0;}<br /> 4%{opacity:1;}<br /> 6%{opacity:1;}<br /> 6.01%{opacity:0;}<br /> 100%{opacity:0;}<br />}<br />@keyframes’koma-black-to-white1’{<br /> 0%{opacity:0;}<br /> 0.01%{opacity:1;}<br /> 2%{opacity:1;}<br /> 2.01%{opacity:0;}<br /> 100%{opacity:0;}<br />}<br />@keyframes’koma-black-to-white2’{<br /> 0%{opacity:0;}<br /> 1.99%{opacity:0;}<br /> 2%{opacity:1;}<br /> 4%{opacity:1;}<br /> 4.01%{opacity:0;}<br /> 100%{opacity:0;}<br />}<br />※実際にはプリフィックスを付けます<br />※全体を10秒に設定しています  <br />
  33. 33. CSS3アニメーションの壁x2 その2<br />概念図: keyframe Version  <br />見える<br />見えない<br />↑<br />0.2秒<br />↑<br />スタート地点<br />↑<br />0.4秒<br />↑<br />0.6秒<br />時間軸<br />
  34. 34. CSS3アニメーションの壁x2 その2<br />やっと正常に再生された!<br />DEMO<br />全機種OK!<br />
  35. 35. CSS3アニメーションの壁x2 その2<br />と、思ったら…<br />
  36. 36. CSS3アニメーションの壁x2 その2<br />「このアニメーション<br /> 重いです」<br />(ふ、普通に再生されてる けど?)<br />
  37. 37. CSS3アニメーションの壁x2 その2<br />「コマが大量に増えると<br /> 遅くなるんですよ…」<br />
  38. 38. CSS3アニメーションの壁x2 その2<br />どれどれ?<br />DEMO<br />全機種NG<br />
  39. 39. CSS3アニメーションの壁x2 その2<br />「わ、分かりました。<br />なんとか軽くしてみます」<br />
  40. 40. CSS3アニメーションの壁x2 その2<br />コマの描画を簡素にした<br />div x 3個<br />div x 1個<br />
  41. 41. CSS3アニメーションの壁x2 その2<br />まだ重い…<br />
  42. 42. CSS3アニメーションの壁x2 その2<br />もう、いっそのこと画像にした<br />div x 3個<br />div x 1個<br />img<br />
  43. 43. CSS3アニメーションの壁x2 その2<br />まだ重い…<br />
  44. 44. CSS3アニメーションの壁x2 その2<br />え、どうすりゃいいの?<br />
  45. 45. CSS3アニメーションの壁x2 その2<br />もしかしてCSS3アニメーション<br />って重い…?<br />
  46. 46. CSS3アニメーションの壁x2 その2<br />どうも原因は opacityのよう<br />
  47. 47. CSS3アニメーションの壁x2 その2<br />でも、当時は時間も無く<br />Javascriptで表示切替<br />しました。(アレ…<br />
  48. 48. var stoneImages = [],<br />animationTime = 360,<br />stoneColor = 1;<br />stoneImages[1] = [<br />$('<img src="boardarea_black.png">'),<br />$('<img src="boardarea_blacktowhite01.png">'),<br />$('<img src="boardarea_blacktowhite02.png">'),<br />$('<img src="boardarea_blacktowhite03.png">')<br />];<br />stoneImages[2] = [<br />$('<img src="boardarea_white.png">'),<br />$('<img src="boardarea_whitetoblack01.png">'),<br />$('<img src="boardarea_whitetoblack02.png">'),<br />$('<img src="boardarea_whitetoblack03.png">')<br />];<br />
  49. 49. function animationOneFrame(allCell, frameCount, stoneColor, newStoneColor) {<br /> setTimeout(function() {<br /> if(frameCount === 3) {<br /> allCell.html(stoneImages[stoneColor === 1 ? 2 : 1][0].clone());<br /> return;<br /> }<br /> allCell.html(stoneImages[stoneColor][frameCount + 1].clone());<br />animationOneFrame(allCell, frameCount + 1, stoneColor, newStoneColor);<br /> }, animationTime / 3);<br />}<br />
  50. 50. CSS3アニメーションの壁x2 その2<br />やっと正常に再生された!<br />パート2<br />DEMO<br />全機種OK!<br />
  51. 51. CSS3アニメーションの壁x2 まとめ<br />CSS3アニメーションまとめ<br />まとめ1 animation-delay で タイミングをとらず<br />      keyframeを使用すること<br />まとめ2 DOMが多いと重い<br />まとめ3 opacity の多用も重い<br />まとめ4 javascriptの使用も考慮に入れること<br />
  52. 52. 数々の問題点<br />問題点1 CSS3アニメーションの壁x2<br />問題点3 角丸とディスプレイの壁<br />問題点2 <br />グラデーションとrgbaの壁<br />
  53. 53. グラデーションとrgbaの壁<br />↑<br />to<br />↑<br />from<br />↑<br />color-stop<br />↑<br />↑<br />color-stop<br />↑<br />color-stop<br />background: -webkit-gradient(linear,<br />      left top,right top,<br />      from(#f00),<br />      color-stop(0.4,#0036ff),<br />      color-stop(0.6,#0cff00),<br />      color-stop(0.75,#ffea00),<br />      to(#f00));<br />background: -webkit-gradient(radial,<br />      center center, 0,<br />      center center, 70,<br />      from(#1A82F7), to(#2F2727))<br />
  54. 54. グラデーションとrgbaの壁<br />コードだけで<br />グラデーション作れる!<br />
  55. 55. グラデーションとrgbaの壁<br />サイズ違いの背景のために<br />「bg_gra01.gif」<br />「bg_gra02.gif」<br />とかとか、必要なくて楽チン<br />しかも…<br />
  56. 56. グラデーションとrgbaの壁<br />コードのみなので<br />断然軽い!※<br />※少なくともダウンロードサイズは<br />
  57. 57. グラデーションとrgbaの壁<br />さらに…<br />
  58. 58. グラデーションとrgbaの壁<br />colorの新しい指定方法<br />rgbaと組み合わせたら<br />もっと楽しいはず!<br />
  59. 59. グラデーションとrgbaの壁<br />background: -webkit-gradient(linear,<br />      left top,right top,<br />      from(#f00),<br />      color-stop(0.4,rgba(0,0,0,0)),<br />      color-stop(0.6,rgba(0,0,0,0)),<br />      to(#f00));<br />background: -webkit-gradient(radial,<br />      center center, 20,<br />      center center, 70,<br />      from(rgba(0,0,0,0)),<br />      color-stop(0.5,#f00),<br />      to(rgba(0,0,0,0)))<br />
  60. 60. グラデーションとrgbaの壁<br />ところが!<br />
  61. 61. グラデーションとrgbaの壁<br />Android1.6でバグ発見<br />他のOS<br />Android1.6<br />
  62. 62. グラデーションとrgbaの壁<br />結局、画像で対処することに…<br />
  63. 63. グラデーションとrgbaの壁 まとめ<br />グラデーションとrgbaまとめ<br />まとめ1 背景画像の作成・管理から開放される<br />まとめ2 軽い!<br />まとめ3 rgba() と組み合わせると色々出来る<br />まとめ4 radial + rgba() はまだバグ有り<br />
  64. 64. 数々の問題点<br />問題点1 CSS3アニメーションの壁x2<br />問題点2 グラデーションとrgbaの壁<br />問題点3<br />角丸とディスプレイの壁<br />
  65. 65. 角丸とディスプレイの壁<br />皆さんご存知の角丸<br />border-radius:5px;<br />via: http://www.w3.org/TR/css3-background/#corners<br />
  66. 66. 角丸とディスプレイの壁<br />うちのデザインでも多用しています。<br />  の箇所は全て角丸です。<br />via: http://www.w3.org/TR/css3-background/#corners<br />
  67. 67. 角丸とディスプレイの壁<br />ここにも問題が発生<br />
  68. 68. 角丸とディスプレイの壁<br />ディスプレイに原因が!<br />
  69. 69. 角丸とディスプレイの壁<br />CSSの描画には<br />アンチエリアシングが無い<br />
  70. 70. 角丸とディスプレイの壁<br />left = 偶数 その他すべて偶数<br />left = 奇数 その他すべて偶数<br />Android端末の7割~8割<br />
  71. 71. 角丸とディスプレイの壁<br />小さい図形ほど、しかも、<br />border-radius 以外でも目に付く<br />
  72. 72. 角丸とディスプレイの壁<br />原因 -> devicePixelRatio<br />実寸だと、こんな見栄えでも、、、<br />iPhone3GS 480x320<br />iPhone4 960x480<br />Android 800x480<br />Android 854x480<br />
  73. 73. 角丸とディスプレイの壁<br />1Pixelの大きさを同じにしてみると、こんなに違います。<br />iPhone3GS 480x320<br />iPhone4 960x480<br />Android 800x480<br />Android 854x480<br />
  74. 74. 角丸とディスプレイの壁<br />devicePixelRatio = 画像 1pixel を 何pixel で描画するか、という値<br />画像データ<br />ディスプレイ上<br />1pixel<br />1.5pixel<br />1pixel<br />原因<br />1.5pixel<br />2pixel<br />
  75. 75. 角丸とディスプレイの壁<br />devicePixelRatio が 1.5pixel の場合は、全て偶数にする必要がある。<br />原点<br />
  76. 76. 角丸とディスプレイの壁 まとめ<br />角丸とディスプレイまとめ<br />まとめ1 DevicePixelRatioを知る<br />まとめ2 小さい部位ほど偶数を意識<br />まとめ3 出来るなら<br />    top left height width border-radius<br />      すべてを偶数にする<br />
  77. 77. Thank you.<br />作成者:馬場 宣孝<br />所属チーム /上位部署: :Mobile UIチーム / UIT室<br />連絡先: baba.noritaka@nhn.com<br />作成年月日: 2011 / 02 / 25<br />

×