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でアニメーション!その1

2,481 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology
  • Be the first to comment

⑳CSSでアニメーション!その1

  1. 1. HTML5+CSS3アニメーション 勉強 会 ⑳CSSでアニメーション! その1
  2. 2. はじめに•  CSSのアニメーションを覚えよう!
  3. 3. 注意事項•  この資料の中には、2012/07時点での事実が書いてあるつもりで すが、時代とともに移り変わる情報もあるので最新情報のチェック も忘れずに!現時点では、HTML5を始めもろもろの仕様は確定し ていません。なるべく新しい仕様を見ているつもりですが、情報古 かったらすみません。•  ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る(はず)。•  過去の環境(IE6とかIE7とか、PHP4とか)には採用されていない 話もあるので、その辺をターゲットにする場合は注意(無視してい いと思うけど)•  リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
  4. 4. もくじ•  アニメーションの特徴•  基礎知識•  CSS3のアニメーション•  canvas•  jQueryのアニメーション
  5. 5. アニメーションの特徴•  GIFアニメ•  FLASH•  CSS(transition、animation)•  javascript
  6. 6. GIFアニメ•  ○スクリプト不要•  長時間のアニメーションには不向き•  大きいサイズは苦手•  動的なアニメーションはできない•  色数が少ない
  7. 7. FLASH•  ○スクリプト不要/プログラムも可能•  プラグインが必要•  対応していないブラウザがある
  8. 8. CSS(transition、animation)•  ○スクリプト不要•  ○システム負荷が少ない(レンダリングエ ンジン、ブラウザによる制御ができるた め)
  9. 9. javascript•  ○CSSを制御できる•  ○canvasを制御できる•  プログラムが必要
  10. 10. まとめ•  簡単なアニメーションは、アニメGIFや CSSでスクリプトいらず!•  複雑なアニメーションは、javascriptから CSSを制御して効率良く動かそう!
  11. 11. 基礎知識•  擬似要素•  擬似クラス•  プログレッシブ・エンハンスメント•  イージング•  SVG
  12. 12. 疑似要素•  疑似要素って何?•  こんなときつかうかも•  疑似要素を補助するプロパティ•  記述方法•  やってみよう
  13. 13. 疑似要素って何?•  要素自体ではなく、指定された部分を要 素っぽい感じで指定できる!•  例: –  ::first-letter •  要素の文字列の先頭文字 –  ::before •  要素の前 –  ::after •  要素の後
  14. 14. こんなときつかうかも•  ::first-letter –  先頭の1文字だけおおきくする•  ::before, ::after –  文章を括弧でくくる –  自動的に降板を付与する
  15. 15. 疑似要素を補助するプロパティ•  content –  ::before, ::afterで文字などを挿入するのに使 う•  counter-increment –  cssで変数を用いたカウントができる•  quotes –  括弧の種類を指定できる。入れ子も指定でき る
  16. 16. 記述方法•  CSS3になって、記述方法が変わった! –  div:before –  ○ div::before•  「:」の数が2個になったので注意しよ う!(擬似クラスと区別するためこうなっ たんじゃないかな!2個の書き方は新し いブラウザじゃないと対応してないから注 意!)
  17. 17. やってみよう①•  ホームディレクトリに、css3というフォ ルダを作ろう•  pseudo_elements.htmlを作ろう
  18. 18. やってみよう②<!DOCTYPE HTML><html lang="ja"><head><meta charset="utf-8" /><title>HTML5</title>
  19. 19. やってみよう③<style>div{ border:2px solid #0f0; color:#000;}div:first-letter{ color:#f00;}div:first-line{ color:#00f;}div::before{ content:"★";}div::after{ content:"☆";}</style>
  20. 20. やってみよう④</head><body><div>あいうえお<br>かきくけこ</div></body></html>
  21. 21. できた•  FirefoxとChromeでみためがちがう><
  22. 22. まとめ•  jQueryでやるほうが無難•  ::after,::beforeはうまく使えばいいかも。 HTML上にない要素を追加できるため、 css3のアニメーション系と相性がいい。
  23. 23. 疑似クラス•  疑似クラスって何?•  こんなときつかうかも•  記述方法•  やってみよう
  24. 24. 疑似クラスって何?•  訪問済みリンク、マウスのホバー時、ある要 素内の最後など、特定の条件の要素を指 定できる!•  selectors –  http://www.w3.org/TR/css3-selectors/ #selectors
  25. 25. こんなときつかうかも•  :hover –  カーソルを重ねた時に色を変える•  :nth-child(n) –  土曜日、日曜日だけ色を変える –  (even)、(odd)を使って表をしましまに!
  26. 26. 記述方法•  :hoverを指定する時の順番に気をつけよう!a:link{}a:visited{}a:hover{}a:active{}
  27. 27. やってみよう①•  pseudo_class.htmlを作ろう
  28. 28. やってみよう②<!DOCTYPE HTML><html lang="ja"><head><meta charset="utf-8" /><title>HTML5</title>
  29. 29. やってみよう③<style>p:nth-child(even){ color:#0f0;}p:nth-child(odd) { color:#00f;}p:hover{ color:#f00;}</style>
  30. 30. やってみよう④</head><body><div> <p>あいうえお</p> <p>かきくけこ</p> <p>さしすせそ</p> <p>たちつてと</p> <p>なにぬねの</p></div></body></html>
  31. 31. できた•  しましまになった!•  hoverするとあかくなる!
  32. 32. まとめ•  ホバーなどのイベント系は、スクリプトに 頼らずにアニメーションの起点を作れる ので便利!•  それ以外は、jQueryでもいいかな あ・・・。
  33. 33. プログレッシブ・エンハンスメント•  クロスブラウザの逆の考え方•  すべての人に同じクオリティのコンテンツ を提供するのではなく、モダンブラウザ を使用している人に、リッチなコンテンツ を提供するという考え方•  IE6だとそれなりに見えるけど、最新の chromeだと格好良く見える!みたいな感 じのやり方
  34. 34. こんなかんじ•  どのユーザーにも同じようにコンテンツを 提供すること(IE6だと見れないとかは駄 目で、IE6だとダサいはOK)とはいえ、 IE6にこだわる必要はない。IE7からでも IE8からでも、Firefoxだけ格好いいとかで もOK•  デメリットも特になく、今後はこの考え方 が流行ると思う。
  35. 35. イージング•  移動やエフェクトの変化に対して、加速や 減速などの動きを加える関数•  jQueryやFLASH、CSS3などで採用され ている•  加速するもの、減速するものの他にも、 バネのように動くものなどいろいろな種類 がある
  36. 36. まとめ•  等速で移動する場合に比べて、リッチな動 きになる•  加速することにより、処理時間を短縮し、 ユーザーのストレスを軽減できる•  物体の移動の他にも、アルファ値の変化や 形状の変化などにも応用できる•  動作を気持ちよくすることで、ユーザー体 験を向上できる
  37. 37. SVG•  イラストレーターみたいな、2 次元ベクター グラフィックの規格•  XMLのテキストでパスのデータを扱う•  拡大縮小に強い、画像によっては容量を抑え ることができるなどの利点がある•  jQueryなどで直接変更しても反映されないの で、プラグインを使う必要がある•  テキストなのでHTMLに埋め込んでもいいし、 画像ファイルみたいにして読み込んでもいい。
  38. 38. さんこう•  SVG –  https://developer.mozilla.org/ja/SVG•  Scalable Vector Graphics (SVG) 2.0 W3C Editor s Draft –  https://svgwg.org/svg2-draft/•  jQuery SVG –  http://keith-wood.name/svg.html
  39. 39. TIPS•  SVGが読み込めない場合は、サーバの設 定が必要かも –  AddType image/svg+xml .svg –  AddType image/svg+xml .svgz
  40. 40. みてみよう•  実際に、画像を表示してみよう•  おなじにみえる!
  41. 41. かくだいすると・・・•  pngはあらくなる!
  42. 42. 素材提供•  tolemoプロジェクト –  http://tolemo.com ©2012  tolemo.
  43. 43. まとめ•  SVGは結構昔の技術なんだけど、ちょっ と注目されてきてる!
  44. 44. CSS3のアニメーション•  transform•  transitions•  animations
  45. 45. じゅんびしよう•  base.htmlを作ろう
  46. 46. base.html①<!DOCTYPE HTML><html lang="ja"><head><meta charset="utf-8" /><title>HTML5</title><style>.sample{ position:relative; float:left; margin:40px; width:100px; height:100px; line-height:100px; text-align:center; font-size:24px;}
  47. 47. base.html②.sample div{ position:absolute; width:100px; height:100px;}.bg{ background:#ddd;}.ex{ background-color:rgba(0, 255, 0, 0.5);}</style>
  48. 48. base.html③<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>$(function(){});</script></head><body></body></html>
  49. 49. たるい①transform:translate(20px, 20px);-webkit-transform:translate(20px, 20px);-moz-transform:translate(20px, 20px);-ms-transform:translate(20px, 20px);-o-transform:translate(20px, 20px);この5行は同じ意味なんだけど、上からCSS3準拠、safariとかのやつ、firefoxのやつ、IEのやつ、operaのやつこんな感じでブラウザごとに書いていかなくてはいけないので大変><
  50. 50. たるい②-moz-transform:translate(20px, 20px);とりあえず、これ以降は、firefoxのやつだけを書いていきます!たるいから!
  51. 51. transform•  要素に対して拡大、縮小、移動などの変形が できる•  Transforms 2DとTransforms 3Dがある•  transitionsやanimationsと組み合わせるこ とで表現度の高いアニメーションが可能•  CSS Transforms –  http://www.w3.org/TR/css3-transforms/•  -moz-transform –  https://developer.mozilla.org/ja/CSS/-moz- transform
  52. 52. じゅんびしよう•  base.htmlをコピーして、transform.html を作ろう
  53. 53. 移動•  translate(tx, ty)で要素を移動できます。•  他にもtranslateX(tx)とかもあるけど、説 明を省略します。以降も同じです。
  54. 54. やってみよう#ex01{ -moz-transform:translate(20px,20px);}<div class="sample"> <div class="bg"></div> <div id="ex01" class="ex">ex01</div></div>
  55. 55. できた•  いどうした!
  56. 56. TIPS•  右クリックメニュー→要素の調査•  画面右下の3Dビュー•  立体で要素が確認できるよ!
  57. 57. 拡大縮小•  scale(sx, sy)で要素を拡大縮小できます。
  58. 58. やってみよう#ex02{ -moz-transform:scale(1.2, 0.8);}<div class="sample"> <div class="bg"></div> <div id="ex02" class="ex">ex02</div></div>
  59. 59. できた•  へんけいした!
  60. 60. 回転•  rotate(angle)で要素を回転できます。•  angleは、css3で定義されている<angle> 形式で指定します。•  時計回りで、マイナスを指定すると逆に回 転します。
  61. 61. <angle>•  deg –  360で一周•  grad –  400で一周•  rad –  2πで一周•  turn –  1で一周
  62. 62. やってみよう#ex03{ -moz-transform:rotate(30deg);}#ex04{ -moz-transform:rotate(-30deg);}
  63. 63. やってみよう<div class="sample"> <div class="bg"></div> <div id="ex03" class="ex">ex03</div></div><div class="sample"> <div class="bg"></div> <div id="ex04" class="ex">ex04</div></div>
  64. 64. できた•  かいてんした!
  65. 65. 変形の原点•  変形の原点は、要素の中央•  transform-origin(percentage, percentage)で、原点を変更できる
  66. 66. やってみよう#ex05{ -moz-transform:rotate(-30deg); -moz-transform-origin: 100% 0%;}<div class="sample"> <div class="bg"></div> <div id="ex05" class="ex">ex05</div></div>
  67. 67. できた•  ちゅうしんがずれた!
  68. 68. 傾斜•  skew(ax, ay)で、要素を傾斜させる•  ax,ayは<angle>形式
  69. 69. やってみよう#ex06{ -moz-transform:skew(30deg, 0deg);}<div class="sample"> <div class="bg"></div> <div id="ex06" class="ex">ex06</div></div>
  70. 70. できた•  へんなかたち!•  とおもったら、新しいfirefoxだと傾かな い><
  71. 71. つづく•  つぎのしりょうにつづく
  72. 72. おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart

×