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

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

はじめに

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

setIntervalの挙動

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

6000のうち1000のタイミングで別タブを見始める(非アクティブ状態になる)

非アクティブでも2000・・・3000とカウントが進んでいる

6000になるとIntervalによって実行される予定の関数Aが蓄積されてカウントがリセット(もしくはそこでカウントストップ)

また1000・・・2000・・・3000とカウントが進んでいく

6000になるとIntervalによって実行される予定の関数Aが蓄積されてカウントがリセット(もしくはそこでカウントストップ)

この段階で別タブから元のタブに戻ると、蓄積されていた関数Aが2回起動する(もしくは1回起動する)。

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

TweenMaxアニメーションの挙動

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

アニメーション時間6000のうち1000のタイミングで別タブを見始める(非アクティブ状態になる)

非アクティブになった瞬間(1000)の状態でアニメーションが停止する。

この段階で別タブから元のタブに戻ると、1000からまたスタートする。

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

では。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。