Japanese subtitles

← PS 03-12 Animation

Get Embed Code
7 Languages

Showing Revision 1 created 03/13/2014 by Fran Ontanaya.

  1. 今回の解説は少し難しいかもしれません
  2. 2つの変数が書かれていますね
    frameRateとframeです
  3. frameRateはanimate関数を
    呼び出すフレームレートを表しています
  4. frameは変数でアニメーション内の
    現在の位置を表します
  5. すでに変数名を配列化してあるので
  6. ループさせて画像のアセットを配列framesの中に
  7. 入れていきます
    手順は3ステップです
  8. 画像クラスを作成してonload関数と
    画像のURLをセットします
  9. setInterval関数を呼び出します
  10. frameRateに従ってanimate関数を呼び出します
  11. animate関数は少し難しいロジックです
  12. 設定したフレームカウンタを使って
    配列framesにセットされた画像データと
  13. (192,192)の座標をdrawImageメソッドに渡します
  14. 現在のframeを描画したら変数frameを+1します
  15. ここで少し数式が必要になります
  16. +1したframeと
    framesの総数の剰余を求めます
  17. frameの値が配列の総数よりも大きい場合は
  18. ゼロ番目の画像に戻って
    ループ処理が終了する仕組みです
  19. ここで数式を使用します
    あなたの上司はきっと感激しますよ
  20. 現時点での画面上の表示はこうなります
  21. 何かがちょっとおかしいですね
  22. 画像が重なって描画されていて
    ハロー効果のような状態になっています
  23. 各フレームがCanvas上で
    クリアされていないことが原因です
  24. 画像が積み重なっているのです
    これを解消するには
  25. 前の関数で残しておいたclearRectメソッドを使い
  26. 表示をクリアするコードを入力します
  27. これで前の画像が消えて次の画像のみが表示されます
  28. 画像は重なって表示されません
  29. ロボットが画面上で見事に歩いていますね
  30. clearRectメソッドが成功しました