MapLibre Animation - izudon/izudon.github.io GitHub Wiki

1. map.triggerRepaint()

2. requestAnimationFrame()

Method

  • requestAnimationFrame()
    animation = requestAnimationFrame(animateFunction)
    • アニメーション関数 animateFunction を引数に取り、アニメーションを開始する。
      • アニメーション関数 animateFunction は、
        第一引数に ミリ秒単位の時刻 timestamp を取れる。
      • アニメーション関数ではこの値を使って、いずれかの Souce 内に、描画すべきデータを作る。
        いずれかの Layer がその Source を参照していれば、描画には適宜自動で反映されるため、
        結果的にアニメーションが実現する。
      • 現在の ミリ秒単位の時刻 は performace.now() などで取ることができる。
        スタートボタンを押した時点からの経過時間により描画をしたい場合などはこれを用いる。
    • 戻り値 animation は、アニメーションをキャンセルするときなどに用いる。
  • cancelAnimationFrame()
    cancelAnimationFrame(animation)
    • requestAnimationFrame() の戻り値を引数に取り、当該アニメーションを止める。

Examples