如題，只有思路，沒有代碼。

這個思路是最近寫XScroll.js類的時候想明白的。平常我們說的淡入淡出效果，一般分成兩部分，一半是淡入，另一半就是淡出了。不過經(jīng)過分析，我覺得其實只需要一半就行了。

比如寫一個圖片切換類，切換效果是淡入淡出，通常我們會這樣寫：當(dāng)切換發(fā)生的時候，當(dāng)前顯示的圖片淡出（漸漸隱藏），將要顯示的圖片淡入（漸漸出現(xiàn)），通常兩張圖片的動畫速度是一致的，以便實現(xiàn)當(dāng)前圖片完全隱藏之時就是下一張圖片完全顯示之日。

我們來列一個簡單的步驟：

當(dāng)前圖片漸隱，透明度由100%變成90%；同時下一張圖片漸顯，透明度由0變成10.
當(dāng)前圖透明度80%，下張圖透明度20%
當(dāng)前圖70%，下張圖30%。
。。。。
當(dāng)前圖10%，下張圖90%
完成切換
其實，這樣做完全是一種浪費！

我們想一想，如果下張圖zIndex位于當(dāng)前圖之上，當(dāng)它漸顯的時候，因為越來越不透明，所以視覺上，他下層的當(dāng)前圖片看起來就越來越透明！

比如，下張圖透明度為20%的時候，因為他覆蓋在當(dāng)前圖上，所以當(dāng)前圖片看起來透明度就是100%-20%=80%！

所以，在制作淡入淡出切換效果的時候，其實只需要淡入效果即可，淡入的同時，淡出就發(fā)生著；淡入結(jié)束時，就是淡出終結(jié)。這樣一來，永遠(yuǎn)不用擔(dān)心淡入與淡出不同步的問題。

關(guān)鍵是，這樣一來只用同時循環(huán)設(shè)置一張圖片的透明度（即下張圖），不用管被擋住的這張（即當(dāng)前圖），節(jié)約了一半的運算。這也算是優(yōu)化了javascript的執(zhí)行效率吧？

所以，我實現(xiàn)淡入淡出切換效果的思路就是：

將下一張圖片的zIndex設(shè)置于當(dāng)前圖片之上
下一張圖片進(jìn)行淡入（漸顯）循環(huán)；當(dāng)前圖片不操作。
淡入進(jìn)行時，淡出同步發(fā)生；淡入完成，淡出同時完成。
注：此思路只適合于當(dāng)前圖與下一張圖重疊的情況（大部分時候都是這樣）。

最新評論