ウェブサイトを開くと、最初の数秒ですべてが遅くなることに気づきましたか？ スクロールはどういうわけかスムーズに機能せず、視差がジャンプし、アニメーションからフレームの大部分を切り取るように見えます。 しかし、すぐにすべてが正常化されます。 これに気づかなかった？ プラグインのデモページをご覧ください 。すぐに私の意味が理解できます。
問題は、ページが遅れている間、ダイナミクスが適切に動作できないことです。 解決策として、Afterlag.jsプラグインを提案します。 プラグインを使用すると、ラグの終わりのイベントを追跡できます。 ラグが過ぎて、アニメーションをオンにすると、遅くなりません。 それまでの間、ページは遅れます。ダイナミクスを開始するものはなく、ビューを台無しにするだけです。
使い方
JSファイルをプラグインに接続して、次のように記述します。
$.afterlag(function() { console.log(', !'); });
ページのラグがなくなるとすぐに、コンソールはこれについて喜びを表明し始めます。 jQueryを使用したくない場合は、ネイティブプラグインを接続して次のように記述します。
afterlag = new Afterlag(); afterlag.do(function() { console.log(', !'); });
結果は同じになります。
これはプラグインができる最も簡単なことです。 実際、このプラグインにはAPIと他の多くの呼び出し方法があり、これらはすべてgithubのリポジトリのreadmeに完全に記述されています。 接続方法、CDNへのリンク、bowerのプラグインの名前、npmモジュールもあります。
なぜすべてが遅くなっているのですか
アニメーションが開始時に遅れる理由を見てみましょう。 デモページの丸いアニメーションを考えてみましょう。そのタスクは、スムーズに上昇してから下降することです。
モーショントゥイーンは、jakeryライブラリのanimateメソッドを使用して実装されます。 唯一のCSS属性topをアニメーション化します。その値は、時々与えられた関数によって決定されます。 アニメーションを開始すると、jakeryはtopの値を毎回更新しようとします。 ジャケリーがこの値を頻繁に更新することに本当に成功した場合、アニメーションはシックにスムーズになります。 ただし、jQueryは失敗します。
JSは1つのスレッドですべてのイベントを実行するため、機能しません。 JSは、実行する必要があるもののリストを実行します。 すべてがリストの最後に来るわけではありません。 どこかをクリックしてイベントをトリガーすると、できるだけ早く完了するために、実行タスクがリストの上部に留まります。 むしろ、しかし同時にではありません。 ポイントがわからない場合は、 この短い記事を読むことができます。JSシングルスレッドの観点から間隔とタイムアウトがどのように機能するかについて詳しく説明しています。 実際、すべてのタスクはブラウザーによって実行され、JSから送信されるTo Doリストは他のブラウザータスクでまだ希釈されていることを忘れないでください。
そのため、ジャケリーは、ラウンドピースのtopの値をより頻繁に更新することを望んでいました。 しかし、ページのロード時には、ページのレンダリング、YouTubeビデオのプルアップなど、より多くの優先事項がありました。 貧弱なブラウザは非常に忙しく、200〜300ミリ秒ごとに1回だけトップ値を更新できました。 この間、指定された関数に基づいて、丸い円はすでに60ピクセルシフトしているため、円はスムーズに新しい位置に近づかずにテレポートし、フレームの喪失感、痙攣、抑制を感じます。 その後、ブラウザがすべての重要事項を完了すると、サークルの最高値をタイムリーに更新し始め、アニメーションがスムーズになりました。
「Afterlag.js」の仕組み
Afterlagは、ブラウザが非常にビジーでなくなった時点を検出する必要があり、スムーズなアニメーション再生に必要なコードを実行することが非常に多くなります。 アニメーションタスクが少なくとも50ミリ秒（
frequency
）に1回実行される場合に適しているとしましょう。 初期化後、アフターログは現在の時刻を記憶し、50ミリ秒の間隔を開始します。 50ミリ秒後、現在の時刻を再度確認します。 50ミリ秒が実際に経過した場合、現在の時間と以前に修正された時間を比較し、ラグは終了します。 実際、それが50ミリ秒ではなく、たとえば100ミリ秒だった場合、ページはまだ遅れており、期待どおりに間隔が機能し始めるまで手順を繰り返す必要があります。
上記のスキームに従ってプラグインを作成したのは、それだけで十分に機能することです。 しかし、違います。 間隔がちょうど幸運であることが起こります。 最初の2回の繰り返し、経過時間の期待値は実際の経過時間とは異なり、3回目の繰り返しで一致し、4回目の繰り返しで再び一致しました。 問題の額を解決します：予想される時間を実際に10回連続で通過させ
iterations
（
iterations
）。
「さて、今ではすべてが正常に機能しているはずです」と私は思い、私は間違っていました。 （
frequency
）および（
iterations
）に十分な大きさの値を設定しない場合（30および3など）、最初の瞬間に、ブラウザーが最初の90ミリ秒（つまり、30ミリ秒の3回の繰り返し）でビジーでなかったことがあります。終了しましたが、本当に始まったばかりです。 額を再度決定します。200ミリ秒のマージンで後
delay
（
delay
）を信頼できない時間の値を設定します。
記事の更新（2015年3月12日）：
webmasterxのアドバイスにより、設定（
need_lags
）が追加されました。 ドキュメントを引用します。「
false
場合、遅延が終了するか、開始さえしない場合でも
false
afterlogは機能します。 値が
true
、アフターラグはラグの終了後にのみ機能します。つまり、ラグがない場合、アフタータグは機能しません。
true
設定する場合、
timeout
の値も設定することを忘れないでください。そうしないと、遅延がない場合、afterlogが機能しません。
更新の終了。
これですべてが正常に機能するようになりました。 すぐに考慮に入れた別のパラメーターがありますが、今すぐそれを言うことにしました。 これは、予想時間と実際の経過時間（
scatter
）-5ミリ秒を調整するときに許容されるエラーです。 ブラウザについてはそれほど厳しくはありません。
このセクションで指定されたすべての数値はデフォルトのafterlagで使用されますが、初期化中に開発者が変更できます。
おわりに
CSSアニメーションは、この種の遅れがはるかに少ないです。 Afterlagは、滑らかな視差、スクロールアニメーションなど、サイトのダイナミクスがJSに関連付けられている場合にのみ役立ちます。 プラグインの有用性についてのあなたの意見を知りたいと思います。
Afterlagはほとんどの場合正しく動作しますが、100％の保証はありません。 設定を変更するときは、バランスをとる必要があります。信頼性の向上と待ち時間の延長、または信頼性の低下と待ち時間の短縮です。 このプラグインは、ダイナミクスが美しく機能し、その意図された方法を愛する開発者にアピールします。