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.

㉑CSSでアニメーション!その2

2,038 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology
  • Be the first to comment

㉑CSSでアニメーション!その2

  1. 1. HTML5+CSS3アニメーション 勉強 会 CSSでアニメーション! その2
  2. 2. つづき•  その1のつづき!
  3. 3. 注意事項•  この資料の中には、2012/07時点での事実が書いてあるつもりで すが、時代とともに移り変わる情報もあるので最新情報のチェック も忘れずに!現時点では、HTML5を始めもろもろの仕様は確定し ていません。なるべく新しい仕様を見ているつもりですが、情報古 かったらすみません。•  ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る(はず)。•  過去の環境(IE6とかIE7とか、PHP4とか)には採用されていない 話もあるので、その辺をターゲットにする場合は注意(無視してい いと思うけど)•  リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
  4. 4. 行列変換•  matrix(a, c, b, d, tx, ty)で、行列変換がで きる!•  なんかむずかしいからよくわかんないけ ど!!•  ちなみに、javascriptからtransformの値 を取るとrotateとかしか指定してなくても、 matrixしか取得できないからめんどくさ い!
  5. 5. やってみよう#ex07{ -moz-transform: matrix(1, 0, 0.6, 1,20px, 0);}<div class="sample"> <div class="bg"></div> <div id="ex07" class="ex">ex07</div></div>
  6. 6. できた•  ふーん
  7. 7. おまけ<script>$(function(){ $(.ex).each(function(index, element) { console.log($(this).css(-moz-transform)); });});</script>
  8. 8. できた•  全部matrixになってる><
  9. 9. 3d•  2Dの関数と同じような奴が3Dにもあるの で、まずはそれをやってみよう!•  3Dの場合は、x,yの他に奥行きを表すzが 加わります。•  zは、プラスになると近づいて、マイナス になると遠くになります。
  10. 10. じゅんびしよう1ななめからみてみよう.sample3d{ -moz-transform:rotateX(-20deg)rotateY(-20deg);}
  11. 11. じゅんびしよう2<div class="sample sample3d"> <div class="bg"></div> <div id="ex08" class="ex">ex08</div></div>※ex08からex17までつくろう!
  12. 12. やってみよう1#ex08{ -moz-transform:translate3d(20px, 0,20px);}#ex09{ -moz-transform:translate3d(20px, 0,-20px);}#ex10{ -moz-transform:rotate3d(1, 0, 0, 45deg);}
  13. 13. やってみよう2#ex11{ -moz-transform:rotate3d(0, 1, 0, 45deg);}#ex12{ -moz-transform:rotate3d(0, 0, 1, 45deg);}#ex13{ -moz-transform:scale3d(1.5, 1, 1);}
  14. 14. やってみよう3#ex14{ -moz-transform:scale3d(1, 1.5, 1);}#ex15{ -moz-transform:scale3d(1, 1, 1.5);}#ex16{ -moz-transform:skew(30deg, 0deg);}#ex17{ -moz-transform:skew(0deg, 30deg);}
  15. 15. せつめい•  translate3d(tx, ty, tz)と、scale3d(sx, sy, sz)はz座標の指定が増えた!•  rotate3d(x, y, z, angle)は、回転軸と角度 を指定できるように!•  skew(ax, ay)はそのまま!平面なのでzの 傾きはないため。
  16. 16. できた•  なんにもかわらない場所がある・・・?
  17. 17. Perspective•  Perspective(d)で、遠近法みたいな感じ にできる
  18. 18. やってみよう#ex18{ -moz-transform:perspective(100px) translate3d(0, 0, 0);}#ex19{ -moz-transform:perspective(100px) translate3d(0, 0,20px);}#ex20{ -moz-transform:perspective(100px) translate3d(0, 0,-20px);}
  19. 19. できた•  なるほど!
  20. 20. めも#ex21{ -moz-perspective:100px; -moz-transform:translate3d(0, 0,-20px);}perspectiveっていうのもあるんだけど、firefoxは対応してない。
  21. 21. matrix3d•  matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)で行列演算ができる•  他にも色いろある!けど、各ブラウザの実装 待ちみたいな感じ。•  参考 –  http://blogs.msdn.com/b/ie_ja/archive/ 2012/02/07/ie10-css3-3d-transforms.aspx
  22. 22. transform-style•  transform-styleをつかうと、要素が3dか 2dを指定できる!•  preserve-3d、 flatで、3dか2dを指定。•  firefoxは対応してない><
  23. 23. TIPS•  iPhoneだとtransformの動きがカクカクし てしまいます。•  これを防ぐには、transform-styleで3Dを使 用するように設定するといい!•  3Dを使うようにすると、GPUアクセラレー タが使用され、処理が改善されます。 .XXX { -webkit-transform-style: preserve-3d; }
  24. 24. まとめ•  transformをつかうと、いままでになかっ た変形ができる!
  25. 25. transitions•  時間と変更したいプロパティを指定すると、 アニメーションしながら値が変わる!•  設定できるプロパティは、以下のとおり –  http://www.w3.org/TR/css3-transitions/ #animatable-properties•  CSS transitions –  https://developer.mozilla.org/ja/CSS/ CSS_transitions•  CSS transitions W3C Working Draft –  http://www.w3.org/TR/css3-transitions/
  26. 26. じゅんびしよう•  base.htmlをコピーして、 transitions.htmlを作ろう
  27. 27. せつめい•  transition-property –  トランジションを適用するプロパティの名前を指定します。all とすると、全てのプロパティに影響します –  指定しなかったプロパティの変更は即座に反映されます。•  transition-duration –  所要時間を指定します。複数の値を指定すると、プロパティご とに時間を指定できます•  transition-timing-function –  イージングを指定します –  ease,linear,ease-in,ease-out,ease-in-outおよび、ベジェ曲線 で指定できるcubic-bezier(p0,p1,p2,p3)があります•  transition-delay –  実行が開始されるまでの待ち時間を指定します。マイナスを指定 すると、アニメを途中から開始できます。
  28. 28. やってみよう1#ex01{ -moz-transition-property:background-color; -moz-transition-duration:2s; -moz-transition-timing-function:linear; -moz-transition-delay:0; background-color:rgba(0, 0, 255, 0.5); color:#000;}#ex01:hover{ background-color:rgba(255, 0, 0, 0.5); color:#fff;}
  29. 29. やってみよう2<div class="sample"> <div class="bg"></div> <div id="ex01" class="ex">ex01</div></div>
  30. 30. できた•  マウスをのせるとトランジションしなが ら色が変わる!•  画面読み込み時にはトランジションしな い!
  31. 31. 開始トリガー•  :hoverやjavascriptを使って、トランジ ションを開始しよう!
  32. 32. イージング•  transition-timing-functionに指定するこ とで、いろいろ変更できる!•  自分でも作れるから作ってみよう!•  CSS transition function manipulator –  http://cssglue.com/cubic
  33. 33. イベント•  transitionの開始時、終了時に、 javascriptでイベントを拾うことができ る!•  webkitTransitionEnd,transitionend,MS TransitionEnd,oTransitionEnd,webkitTr ansitionEndなどブラウザごとに名前が違 うのでたるい・・・。•  transitionstartはfirefoxだと動かないみ たい><
  34. 34. やってみよう$(function(){ $(".sample").bind("transitionend",function(){ console.log(this); });});
  35. 35. できた•  トランジションが終わるとイベントが発生 してログが出る!
  36. 36. おうよう#ex02{ -moz-transition-property:background-color color; -moz-transition-duration:2s; -moz-transition-timing-function:linear; -moz-transition-delay:0; background-color:rgba(0, 0, 255, 0.5); color:#000;}#ex02:hover{ background-color:rgba(255, 0, 0, 0.5); color:#fff;}
  37. 37. できた•  たくさんログが出た・・・•  変化するプロパティの数だけ、イベントが 発生してログが出る!•  その割には、数が多い・・・。よくわか んない><
  38. 38. まとめ•  手軽にアニメーションできたり、イージン グまで出来るのは便利!
  39. 39. animations•  キーフレームを定義してアニメーションで きる!•  CSS animations –  https://developer.mozilla.org/ja/CSS/ CSS_animations•  CSS Animations Editor s Draft –  http://dev.w3.org/csswg/css3- animations/
  40. 40. じゅんびしよう•  base.htmlをコピーして、 animations.htmlを作ろう
  41. 41. せつめい1•  animation-delay –  開始までの遅延時間•  animation-direction –  アニメーションするたびに、もどるか最初からす るかなどを設定(normal, alternate, reverse, alternate-reverse)•  animation-duration –  アニメーションの長さ•  animation-iteration-count –  繰り返し回数。infiniteで無限
  42. 42. せつめい2•  animation-name –  キーフレームの名前•  animation-play-state –  アニメーションの状態を指定できる(paused、 running )。今後なくなるかもしれない。•  animation-timing-function –  イージング•  animation-fill-mode –  アニメーションの実行前後に、指定したスタイル を適用するかどうか
  43. 43. やってみよう1#ex01{ -moz-animation-delay:0; -moz-animation-duration:2s; -moz-animation-iteration-count:infinite; -moz-animation-name:ex01; -moz-animation-direction:alternate; -moz-animation-timing-function:linear;}
  44. 44. やってみよう2@-moz-keyframes ex01{ from{ background-color:rgba(0, 255, 0,0.5); } to{ background-color:rgba(255, 0, 0, 0.5); }}
  45. 45. やってみよう3<div class="sample"> <div class="bg"></div> <div id="ex01" class="ex">ex01</div></div>
  46. 46. できた•  ページのよみこみがおわると、てんめつ する!
  47. 47. イベント•  アニメーションの開始、終了、繰り返し の開始時にanimationstart, animationend, animationiterationを拾 うことができる!•  これもブラウザごとに名前が違うのでたる い・・・。
  48. 48. やってみよう$(function(){ $(".sample").bind("animationstart", function(e){ console.log("animationstart", this); }); $(".sample").bind("animationend", function(e){ console.log("animationend", this); }); $(".sample").bind("animationiteration", function(e){ console.log("animationiteration", this); });});
  49. 49. できた•  てんめつしたらログが出る!•  startのログは出ない!(スタートのタイ ミングでは、jQueryが実行されてないの で)
  50. 50. おうよう•  キーフレームはたくさん指定できる!•  fromが0%,toが100%なので、そのあい だのキーフレームを指定できる!
  51. 51. やってみよう1#ex02{ -moz-animation-delay:0; -moz-animation-duration:2s; -moz-animation-iteration-count:infinite; -moz-animation-name:ex02; -moz-animation-direction:alternate; -moz-animation-timing-function:linear;}
  52. 52. やってみよう2@-moz-keyframes ex02{ from{ background-color:rgba(0, 255, 0, 0.5); } 50%{ background-color:rgba(0, 0, 255, 0.5); } to{ background-color:rgba(255, 0, 0, 0.5); }}
  53. 53. できた•  いろがかわる!
  54. 54. canvas•  Web上で画像を描画する技術•  canvasタグで指定した範囲内に自由に描 画することができる•  クライアントで描画できるため、動的な 画像(グラフ、カウンタ、時計など)や ゲームなどに採用するといいと思う。•  Canvas チュートリアル –  https://developer.mozilla.org/ja/ Canvas_tutorial
  55. 55. みてみよう•  おえかきとか簡単に作れる!
  56. 56. じゅんびしよう•  base.htmlをコピーして、canvas.htmlを 作ろう
  57. 57. やってみよう1body{ background-color:#BECBAD;}#canvas{ margin:20px 20px 20px 30px; box-shadow:3px 3px 3px rgba(0, 0,0, 0.3);}
  58. 58. やってみよう2$(function(){ var canvas = $(#canvas).get(0); var context = canvas.getContext(2d); context.fillStyle = "rgb(128, 255,255)";
  59. 59. やってみよう3var x = 480;function draw(){x -= 8;if(x < -img.width){ x = 480;}context.fillRect(0, 0, canvas.width, canvas.height);context.drawImage(img, x, 220);setTimeout(draw, 50);}
  60. 60. やってみよう4 var img = new Image(); img.src = "tolemorou_mini.png"; img.onload = function(){ setTimeout(draw, 50); }});
  61. 61. できた•  トレモ郎がうごいた!
  62. 62. かいせつ1img.onload = function(){ setTimeout(draw, 50);}画像の読み込みが終わったら、アニメーションを開始する
  63. 63. かいせつ2x -= 8;if(x < -img.width){ x = 480;}座標を­8することで、画像の表示位置を左にずらす。画面はじから消えたら、座標を右側に戻す
  64. 64. かいせつ3context.fillRect(0, 0, canvas.width, canvas.height);context.drawImage(img, x, 220);setTimeout(draw, 50);画面を消去↓キャラクターを書く↓50ミリ秒後に描画
  65. 65. まとめ•  canvasは自由に表現できる!
  66. 66. jQueryのアニメーション•  jQueryのアニメーションは、大きく分け て2種類•  animate()などを使って要素のCSSのプロ パティを変更する方法。簡単だが、対応 していないプロパティがある。•  要素のclassを変更して、別のcssを適用 させる方法。transitionsやanimationsと あわせて使うとアニメーションを開始で きる
  67. 67. じゅんびしよう•  base.htmlをコピーして、jQuery.htmlを 作ろう
  68. 68. やってみよう1$(function(){ $(#ex01).animate( { width:400px }, 5000, swing, function(){ console.log("end"); } );});
  69. 69. やってみよう2<div class="sample"> <div class="bg"></div> <div id="ex01" class="ex">ex01</div></div>
  70. 70. できた•  よこにのびた!
  71. 71. かいせつ1{ width:400px},CSSのパラメータを指定できます。このとき、margin-leftはmarginLeftみたいにして記述します。背景色など、数値じゃないパラメータは無視されます。
  72. 72. かいせつ2•  イージングは、 liner 、 swing 以外にもプ ラグインで追加できます。•  jQuery easing plugin –  http://gsgd.co.uk/sandbox/jquery/ easing/
  73. 73. やってみよう1.ex02{ -moz-animation-delay:0; -moz-animation-duration:2s; -moz-animation-iteration-count:infinite; -moz-animation-name:ex02; -moz-animation-direction:alternate; -moz-animation-timing-function:linear;}
  74. 74. やってみよう2@-moz-keyframes ex02{ from{ background-color:rgba(0, 255, 0,0.5); } to{ background-color:rgba(255, 0, 0, 0.5); }}
  75. 75. やってみよう3$(#ex02).click(function(e){$(this).toggleClass(ex02);});
  76. 76. できた•  くりっくすると色が変わる!•  もっかいくりっくすると元に戻る!
  77. 77. かいせつ•  jQueryを使うと、クリックなどcssにはな いイベントをトリガにアニメーションがで きる!•  cssを使うことで、背景色の変化など、 jQueryではできなかったアニメーション ができる!
  78. 78. まとめ•  jQuery+CSS3で、表現力が上がった!
  79. 79. おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart

×