/* * 1.起点 * 2.终点 * 3.变化量 = 终点-起点 * 4.帧数 = 总时长/定时器时间间隔 * 5.步长 = 变化量/帧数 * 参数 *ojb 运动对象 * myJson 运动属性目标值 * time 运动时间 * callBack 回调函数 * * */ function animate(obj,myJson,time,callBack) { var startJson = {}; //开始点 var targetJson = {}; //结束点 var stepJson = {}; //变化量 var maxCount = Math.floor(time/11); //帧数 var timer = null; var count = 0; for(var k in myJson){ startJson[k] = parseFloat(getStyle(obj,k)); //获取所有属性初始值 targetJson[k] = parseFloat(myJson[k]); //获取所有属性目标值 stepJson[k] = (myJson[k]-startJson[k])/maxCount; //步长 } console.log(startJson); console.log(targetJson); console.log(stepJson); timer = setInterval( function () { for (var k in myJson){ startJson[k] += stepJson[k]; if(k === "opacity"){ obj.style[k] = startJson[k]; obj.style.filter = "alpha(opacity = "+startJson[k]*100+")"; }else { obj.style[k] = startJson[k] + "px"; } } count++; if(count === maxCount){ for(var k in myJson){ if(k === "opacity"){ obj.style[k] = targetJson[k]; obj.style.filter = "alpha(opacity = "+targetJson[k]+")" }else{ obj.style[k] = targetJson[k] + "px"; } } clearInterval(timer); callBack && callBack.call(obj); } } ,11) //获取元素实际样式的方法 function getStyle(obj , property){ return obj.currentStyle ? obj.currentStyle[property] : getComputedStyle(obj)[property]; } }
我的java全栈开发之路-2-运动框架1.0
猜你喜欢
转载自blog.csdn.net/desirablelove/article/details/80500394
今日推荐
周排行