无为清净楼资源网 Design By www.qnjia.com
使用该程序能实现很多常见的动画特效,包括大小变换、位置变换、渐显渐隐等等。
程序说明: 渐变效果的原理就是利用定时器不断设置值,如果要减速效果就设置一个步长(详细看JavaScript 弹簧效果) 。
这里只是把能渐变的属性(透明度、宽、高、left、top)整合在一起,使用相同的渐变级数(Step)使渐变同步,形成多个属性同时渐变的效果。

下面说说有用的地方:
【最终样式】
在JavaScript 图片切割效果的边宽获取中也说到了最终样式,在使用offset获取的数据设置宽度高度的时候,必须先减去最终样式中的边框宽度。
在这里我使用了muxrwc的在FF下实现currentStyle方法,这样在ff和ie都可以从currentStyle获取最终样式了:
复制代码 代码如下:
if(!isIE){
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
}

使用这个获取边框宽度:
复制代码 代码如下:
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(),这也是不错的技巧。
同时为了同步渐变,另外的渐变使用了两倍的步长: 
复制代码 代码如下:
this.Step = 2*this.Step;
this.SetOpacity(); this.SetTop(); this.SetLeft();
this.Step = this.Step/2;

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

【定点渐变】
先说说原理,例如以宽度中点为参照点,可以想象如果宽度减少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结构

例子里实例化这个对象:
复制代码 代码如下:

var f = new Fade("idFade", { Show: true,
Opacity: { run: true },
Height: { run: true },
Width: { run: true, pos: .5 },
Top: { run: true, end: 70 }
});

设置run为true就表示开启这个变换,start和end是开始和结束值,pos是Height和Width特有的变换位置属性。

更详细的应用可以看实例。
12下一页阅读全文
标签:
JavaScript,渐变

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。