大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的。实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动。
那这个问题怎么解决呢? 我们先来看看之前的运动框架
function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } function startMove(obj, attr, iTarget) { clearInterval(obj.time); obj.time = setInterval(function() { var cur = 0; if (attr == 'opacity') { cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { cur = parseInt(getStyle(obj, attr)); } var speed = (iTarget - cur) / 6; speed = speed > 0 "htmlcode">function startMove(obj, json, fnEnd) { var MAX=18; //每次调用就只有一个定时器在工作(开始运动时关闭已有定时器) //并且关闭或者开启都是当前物体的定时器,已防止与页面上其他定时器的冲突,使每个定时器都互不干扰 clearInterval(obj.timer); obj.timer=setInterval(function (){ var bStop=true; // 假设:所有的值都已经到了 for(var name in json) { var iTarget=json[name]; // 目标点 //处理透明度,不能使用parseInt否则就为0了 if(name=='opacity') { // *100 会有误差 0000007 之类的 所以要用 Math.round() 会四舍五入 var cur=Math.round(parseFloat(getStyle(obj, name))*100); } else { var cur=parseInt(getStyle(obj, name)); // cur 当前移动的数值 } var speed=(iTarget-cur)/5; // 物体运动的速度 数字越小动的越慢 /5 : 自定义的数字 speed=speed>0?Math.ceil(speed):Math.floor(speed); if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX; if(name=='opacity') { obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE obj.style.opacity=(cur+speed)/100; //ff chrome } else { obj.style[name]=cur+speed+'px'; } // 某个值不等于目标点 if(cur!=iTarget) { bStop=false; } } // 都达到了目标点 if(bStop) { clearInterval(obj.timer); if(fnEnd) //只有传了这个函数才去调用 { fnEnd(); } } }, 20); }为什么会有bstop的假设呢?
其实如果我这样调用startMove(oDiv,{width:101,height:200}); 宽度变成101 已经完成运动了,高度没有到, 但是我们可能已经关闭了当前的定时器。运动已经结束了,就会出现一个特殊情况下的bug。解释一下:
实际上来说,需要所有的运动都到了才关闭定时器,反过来说,如果没有不到的,那就关闭。在程序上就是定义一个布尔值,一开始为true,假设
所有的值都已经到了,如果说有一个值不等于目标点,bstop为false 。 在整个循环结束后,bstop 为ture 就说明所有运动都完成了,这个时候就关闭定时器。
那么这个运动框架基本已经完成了,适用css2 不适用css3。
总结:
运动框架的演变过程
startMove(iTarget) 运动框架
startMove(obj,iTarget) 多物体
startMove(obj,attr,iTarget) 任意值
startMove(obj,attr,iTarget,fn) 链式运动
startMove(obj,json,fn) 完美运动O(∩_∩)O谢谢 ~
运动框架
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。