ブラウザのタブが非アクティブ時のTweenMaxとsetIntervalについて

最近作っているLPで勉強になったメモ。

はじめに

2つのアニメーションがあって、片方はsetIntervalを使用していて、もう片方はTweenMaxを使用しているものを作成していた。
それで、ページを開いた段階では２つのアニメーションはそろって動いていた。
ただ、タブが非アクティブになった状態から戻ってみると、ずれるずれる。
これはどういうこっちゃということで少し調べることにした。

setIntervalの挙動

setIntervalは非アクティブのときでもカウントが進んでいる。

6000のうち1000のタイミングで別タブを見始める（非アクティブ状態になる）
↓
非アクティブでも2000・・・3000とカウントが進んでいる
↓
6000になるとIntervalによって実行される予定の関数Aが蓄積されてカウントがリセット（もしくはそこでカウントストップ）
↓
また1000・・・2000・・・3000とカウントが進んでいく
↓
6000になるとIntervalによって実行される予定の関数Aが蓄積されてカウントがリセット（もしくはそこでカウントストップ）
↓
この段階で別タブから元のタブに戻ると、蓄積されていた関数Aが２回起動する（もしくは１回起動する）。

となる。これに関してはわりと有名。
対処法としては、Web.fla様が詳細に説明してくださっているページがあるのでこちらをどうぞ
http://the-zombis.sakura.ne.jp/wp/blog/2015/04/04/post-3123/

TweenMaxアニメーションの挙動

これはどうなるかというと

アニメーション時間6000のうち1000のタイミングで別タブを見始める（非アクティブ状態になる）
↓
非アクティブになった瞬間（1000）の状態でアニメーションが停止する。
↓
この段階で別タブから元のタブに戻ると、1000からまたスタートする。

となる。
このTweenMaxの挙動はいろいろと使えそうな気がした。

では。