版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33120763/article/details/78405705
运动框架
指定速度
/*
*@param obj:运动对象
*@param json:运动的目标值,以json格式表示,比如{"width": 300, "height": 300}
*@param speed:运动速度
*@param endFn:回调函数,可执行链式操作
*@return undefined
*/
function move(obj,json,speed,endFn){
clearInterval(obj.timer);
var cur = 0;
//存一下速度,因为后面需要来判断速度方向,不能在原值上更改,否则会引起混乱(值会在多个属性间混用)
var sp = speed;
obj.timer = setInterval(function(){
//如果iBtn 为真,清除定时器
var iBtn = true;
var cur = 0;
//遍历json中的属性
for(var attr in json){
//存值(目标值)
var iTarget = json[attr];
//获取当前属性值
if( attr == "opacity"){
//使用0-100的透明度值,因为小数的计算在计算机中是不精确的
cur = Math.round(css( obj, 'opacity' ) * 100);
}else{
cur = parseInt( css( obj, attr) );
}
//区分速度方向
speed = cur < iTarget ? sp : -sp;
//检测
//console.log(attr +":"+speed);
//如果没有达到设置,继续运动
if( cur != iTarget){
cur = cur + speed;
//如果运动超过设置,拉回来,否则正常进行
if(cur > iTarget && speed > 0 || cur < iTarget && speed < 0) {
cur = iTarget;
}else{
iBtn = false;
}
//运动一步
if( attr == "opacity"){
obj.style.opacity = cur/100;
obj.style.filter = 'alpha(opacity='+ cur +')';
}else{
obj.style[attr] = cur + "px";
}
}
}
if(iBtn){
clearInterval(obj.timer);
//方便链式运动
endFn && endFn.call(obj);
}
}, 50);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}else {
return getComputedStyle(obj, false)[attr];
}
}
减速缓冲运动
function bufferMove(obj,json,endFn){
clearInterval(obj.timer);
var cur = 0;
obj.timer = setInterval(function(){
var iBtn = true;
var cur = 0;
for(var attr in json){
var iTarget = json[attr];
if( attr == "opacity"){
cur = Math.round(css( obj, 'opacity' ) * 100);
}else{
cur = parseInt( css( obj, attr) );
}
//这里是减速的方法,cur的值会越来越接近iTarget目标值,所以speed也会越来越小
speed = ( iTarget - cur ) / 8;
/*在js中取css样式的数值时, 当值到达小数点三位以后js会通过计算按照四舍五入来取值,
比如设置宽度为: width:100.423534646, 在火狐中用obj.currentStyle[attr]或getComputedStyle(obj, false)[attr]来取得其值会得到300.417(作者也在思考,不过这已经可以证明js的小数取值很不精确),而在css样式中的值为100.423
为了避免speed在与cur相加不能进位时css样式无任何变化,需要向上或向下取整(按照速度的方向,也就是正负值)
*/
speed = speed > 0 ? Math.ceil(speed) :Math.floor(speed);
if( cur != iTarget){
cur = cur + speed;
if(cur > iTarget && speed > 0 || cur < iTarget && speed < 0) {
cur = iTarget;
}else{
iBtn = false;
}
if( attr == "opacity"){
obj.style.opacity = cur/100;
obj.style.filter = 'alpha(opacity='+ cur +')';
}else{
obj.style[attr] = cur + "px";
}
}
}
if(iBtn){
clearInterval(obj.timer);
endFn && endFn.call(obj);
}
}, 50);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}else {
return getComputedStyle(obj, false)[attr];
}
}