JavaScript 渐变效果

最新推荐文章于 2024-03-26 08:35:24 发布

cloudgamer

最新推荐文章于 2024-03-26 08:35:24 发布

阅读量617

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript function timer fun null string

本文链接：https://blog.youkuaiyun.com/cloudgamer/article/details/4610000

JavaScript 专栏收录该内容

74 篇文章

订阅专栏

本文介绍了一种基于JavaScript实现的多属性渐变效果程序，能够同时处理透明度、宽度、高度、位置等属性的渐变，并支持以任意点为中心进行变换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

程序集合了宽度、高度、透明度、top、left的渐变，可以自定义渐变项目和各个项目的初始值结束值，还能以任意点（定点）为中心渐变。

使用该程序能实现很多常见的动画特效，包括大小变换、位置变换、渐显渐隐等等。

效果：

程序说明：

渐变效果的原理就是利用定时器不断设置值，如果要减速效果就设置一个步长（详细看JavaScript 弹簧效果）。
这里只是把能渐变的属性（透明度、宽、高、left、top）整合在一起，使用相同的渐变级数（Step）使渐变同步，形成多个属性同时渐变的效果。

下面说说有用的地方：

【最终样式】
在JavaScript 图片切割效果的边宽获取中也说到了最终样式，在使用offset获取的数据设置宽度高度的时候，必须先减去最终样式中的边框宽度。
在这里我使用了muxrwc的在FF下实现currentStyle方法，这样在ff和ie都可以从currentStyle获取最终样式了：

Code

使用这个获取边框宽度：

this ._xBorder = function (){ return (parseInt(obj.currentStyle.borderLeftWidth) + parseInt(obj.currentStyle.borderRightWidth)); }
this ._yBorder = function (){ return (parseInt(obj.currentStyle.borderTopWidth) + parseInt(obj.currentStyle.borderBottomWidth)); }

【宽度或高度优先】
宽度或高度优先其实就是先执行其中一个渐变，在完成后再执行另一个渐变。
渐变程序中在执行完一次渐变之后会返回一个bool值表示是否渐变完成，利用这个可以这样：

this .SetWidth() && this .SetHeight();

由于&&的特性，当this.SetWidth()返回true时才会去执行this.SetHeight()，这也是不错的技巧。
同时为了同步渐变，另外的渐变使用了两倍的步长：

Code

这样就能做出宽度或高度优先的效果了。

【定点渐变】
先说说原理，例如以宽度中点为参照点，可以想象如果宽度减少n，那只要left相对增加n*0.5（即n/2），
那么就可以做出以中点为中心变换的效果（当然要先把变换对象设为相对或绝对定位）。
那这个“0.5”怎么来的呢？有点数理知识应该知道就是渐变对象左边到变换点跟渐变对象总宽度的比
程序里用Width.pos保存这个值，在变换前先计算好变换点的位置：

this ._x = this ._obj.offsetLeft + this ._obj.offsetWidth * this .Width.pos;

每次变换都根据这个位置和宽度来重新设置left：

this ._obj.style.left = this ._x - this ._obj.offsetWidth * this .Width.pos + " px " ;

可能有人会说直接在原有left基础上加上变换宽度*Width.pos不是一样吗？
但问题是经过多次的变换计算（到达目标值前会有多次计算）之后得到的值已经不准确了。
因为在变换计算过程中很多小数会被忽略，随着计算次数增多结果的出入也越大，
所以先定好变换位置参照值（_x），这样不论经过多少次计算变换位置都不会走位了。

同理只要设置不同的Width.pos（包括负数和大于1的数）和Height.pos就可以以任意点为中心渐变了。

还有就是程序的设计也花了不少心思，为了提高整合度，做了一个FadeStruct的结构，其中run、start、end、target属性分别是是否渐变、开始值、结束值、目标值。
用了两次的Object.extend来设置默认值，详细可以看程序。

使用说明：

必要的参数只有一个，就是渐变对象，不过只有渐变对象是没有效果的，必须设置其他属性：
Opacity:透明渐变参数
Height:高度渐变参数
Width:宽度渐变参数
Top:Top渐变参数
Left:Left渐变参数
Step:10,//变化率
Time:10,//变化间隔
Mode:"both",//渐变顺序
Show:false,//是否默认打开状态
onFinish:function(){}//完成时执行

其中Opacity、Height、Width、Top、Left比较特别，是FadeStruct结构

例子里实例化这个对象：

Code