一.变速函数
step=(目标值-走的路程)/10;
重点:当step为小数时,进行取整,正数向上取整,负数向下取整
function animate(element, target) {
//第一步,清除定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取当前元素的当前位置
var current = element.offsetLeft;
//确定每一次走多少步
var step = (target - current) / 10;//有正负
//step 取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//走完一次后,当前位置发生改变
current += step;
element.style.left = current + 'px';
//判断否到当前位置
if (target == current) {
//清除定时器
clearInterval(element.timeId);
}
//测试代码:
console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动的步数" + step);
}, 20);
}
二.通过变速函数进行属性的添加
属性数字值的获取,即为初始值,随即通过step进行增加
// function move(element,attr,target){
// clearInterval(timer)
// var timer = setInterval(function(){
// var current =parseInt(getStyle(element,attr));//获取数字类型的属性
// //设置步长 表示一步动作的差值
// //通过比较element当前的current值和target值的大小,来确定平移方向
// var step = (target - current) / 10;
// step=step>0 ? Math.ceil(step):Math.floor(step);
// //向上取整变大,向下取整变小
// //如果目标值大于当前的current值,step为正数,向右移动
// //如果目标值小于当前的current值,step为负数,向左移动
// current += step;
// element.style[attr]=current+"px";
// //判断停止动画
// //比较差值,取绝对值,当两者的差值小于了步进值时,停止动画,
// //if(Math.abs(target - left) <= Math.abs(step)){//
// if(target==current){
// //因为通过取整,当目标值target为400,left值为391时,每次step通过取整将会向上取整为1;
// //即step==1,每次将走一步,直到等于target目标值,清除定时器,停止移动
// clearInterval(timer);
// }
// console.log("目标位置:"+target+"当前位置:"+current+",每天移动的步数")
// },60);
// }
三.变速运动添加多个属性
可通过json来存储多个属性值,再通过for–in循环进行,每个属性的操作
function animate(element, json, fn) {
//第一步,清除定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var flag = true;//默认所有的属性达到目标值
for (var attr in json) {
//获取当前元素的attr这个属性的属性值
var current = parseInt(getStyle(element, attr));//获取数字类型,进行运算=================
//确定每一次走多少步
var step = (json[attr] - current) / 10;//有正负
//step 取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//走完一次后,当前位置发生改变
current += step;
element.style[attr] = current + 'px';//========================
//判断否到当前位置
if (json[attr] != current) {
flag = false;
}
}
if (flag) {
//清除定时器
clearInterval(element.timeId);
if (fn) {
fn();
}
}
//测试代码:
console.log("目标位置:" + json[attr] + ",当前位置:" + current + ",每次移动的步数" + step);
}, 20);
}