javascript淡入淡出效果的实现思路

如题,只有思路,没有代码。

这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了。不过经过分析,我觉得其实只需要一半就行了。

比如写一个图片切换类,切换效果是淡入淡出,通常我们会这样写:当切换发生的时候,当前显示的图片淡出(渐渐隐藏),将要显示的图片淡入(渐渐出现),通常两张图片的动画速度是一致的,以便实现当前图片完全隐藏之时就是下一张图片完全显示之日。

我们来列一个简单的步骤

  • 当前图片渐隐,透明度由100%变成90%;同时下一张图片渐显,透明度由0变成10.
  • 当前图透明度80%,下张图透明度20%
  • 当前图70%,下张图30%。
  • 。。。。
  • 当前图10%,下张图90%
  • 完成切换

其实,这样做完全是一种浪费!

我们想一想,如果下张图zIndex位于当前图之上,当它渐显的时候,因为越来越不透明,所以视觉上,他下层的当前图片看起来就越来越透明!

比如,下张图透明度为20%的时候,因为他覆盖在当前图上,所以当前图片看起来透明度就是100%-20%=80%!

所以,在制作淡入淡出切换效果的时候,其实只需要淡入效果即可,淡入的同时,淡出就发生着;淡入结束时,就是淡出终结。这样一来,永远不用担心淡入与淡出不同步的问题。

关键是,这样一来只用同时循环设置一张图片的透明度(即下张图),不用管被挡住的这张(即当前图),节约了一半的运算。这也算是优化了javascript的执行效率吧?

所以,我实现淡入淡出切换效果的思路就是:

  1. 将下一张图片的zIndex设置于当前图片之上
  2. 下一张图片进行淡入(渐显)循环;当前图片不操作。
  3. 淡入进行时,淡出同步发生;淡入完成,淡出同时完成。

注:此思路只适合于当前图与下一张图重叠的情况(大部分时候都是这样)。

3 评论

  1. 其实会不会倒过来会好一点呢?
    就是下一图片渐渐淡出,当前图片就会完全被遮挡住。刚刚看了看例子,感觉如果淡出当前图片,效果有点怪怪的。

发表评论

电子邮件地址不会被公开。