JavaScript のフェードインおよびフェードアウトの効果_JavaScript スキルを実装するためのアイデア

タイトルにあるように、アイデアだけがあり、コードはありません。

このアイデアは、最近 XScroll.js クラスを作成していたときに思いつきました。私たちが通常話しているフェード エフェクトは、通常 2 つの部分に分けられ、半分はフェード イン、もう半分はフェード アウトです。しかし、分析した結果、半分だけで十分だと思います。

たとえば、画像切り替えクラスを記述する場合、切り替え効果はフェードインとフェードアウトです。通常は次のように記述します。切り替えが発生すると、現在表示されている画像がフェードアウト (徐々に非表示) されます。通常、2 つの画像のアニメーション速度は同じなので、現在の画像が完全に隠れると、次の画像が完全に表示されます。

簡単な手順をリストしてみましょう。

現在の画像がフェードアウトし、透明度が 100% から 90% に変わります。同時に次の画像がフェードアウトし、透明度が変わります。 0 から 10 まで。
現在の画像の透明度は 80%、次の画像の透明度は 20% です。
現在の画像の透明度は 70%、次の画像の透明度は です。 30%。
。 。 。 。
現在の写真の 10%、次の写真の 90%
切り替え完了
実は、これは完全に無駄です!

考えてみましょう。次の画像の zIndex が現在の画像の上にある場合、それが徐々に現れると、ますます不透明になるため、視覚的には下の現在の画像がますます見えてきます。不透明な！

たとえば、次の写真の透明度が 20% の場合、現在の写真を覆っているため、現在の写真の透明度は 100%-20%=80% のように見えます。

したがって、フェードインとフェードアウトの切り替えエフェクトを作成する場合は、フェードイン中はフェードイン、フェードインが終了するとフェードアウトが発生するだけで済みます。アウトエンド。こうすることで、フェードインとフェードアウトが同期していないことを心配する必要がなくなります。

重要なのは、この方法では、ブロックされている画像 (つまり、現在の画像) を気にすることなく、ループ内の 1 つの画像 (つまり、次の画像) の透明度を同時に設定するだけでよいということです。 、計算の半分が節約されます。これはJavaScriptの実行効率を最適化しているとも言えますね。

フェードインとフェードアウトの切り替え効果を実現するための私のアイデアは次のとおりです。

現在の画像の上に次の画像の zIndex を設定します。
フェードイン (フェードイン)次の画像をループします。現在の画像は操作されません。
フェードインが進行中の場合はフェードアウトが同時に発生し、フェードインが完了するとフェードアウトも同時に完了します。
注: このアイデアは、現在の画像が次の画像と重なる状況 (ほとんどの場合、これが当てはまります) にのみ適しています。