//匀速运动的animate函数
function animate(tag, target) {
clearInterval(tag.timer);// 开始位置清除定时器防止加速
tag.timer = setInterval(function () {
var leader = tag.offsetLeft;// 元素当前位置
var step = 9;
//根据当前位置和目标位置之间的大小关系，设置step的正负
step = leader > target ? -step : step;
//有可能用户设置的步长无法正好运动到指定的目标位置
//会导致，元素在目标位置左右来回运动，形成抽搐
//我们可以通过判断leader和target之间的距离与step的大小关系来决定走多少
if (Math.abs(leader - target) > Math.abs(step)) {
leader = leader + step;// 简单运动公式 ： 元素的新位置 = 元素的当前位置 + 步长
tag.style.left = leader + "px";// 将计算出的新位置设置给box
} else {
//说明当前元素与目标位置之间的距离不足一步，这时让元素直接运动到指定位置
tag.style.left = target + "px";
clearInterval(tag.timer);// 到达指定位置后，清除定时器
}
}, 20);
}
//简单的缓动animate
function animateEasy(tag, target) {
clearInterval(tag.timer);//放止加速
tag.timer = setInterval(function () {
var leader = tag.offsetLeft;
var step = (target - leader) / 10;
//设置取整，保证元素可以进行运动
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
tag.style.left = leader + "px";
if (leader == target) {//清除定时器
clearInterval(tag.timer);
}
}, 20);
}
//可以让任意样式进行运动的animate
function animateAnyStyle(tag, attr, target) {
clearInterval(tag.timer);//放止加速
tag.timer = setInterval(function () {
var leader = parseInt(getStyle(tag, attr)) || 0;
var step = (target - leader) / 10;
//设置取整，保证元素可以进行运动
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
tag.style[attr] = leader + "px";
if (leader == target) {//清除定时器
clearInterval(tag.timer);
}
}, 20);
}
//可以让多个样式同时进行运动的animate
function animate(tag, obj, fn) {
clearInterval(tag.timer);//放止加速
tag.timer = setInterval(function () {
var flag = true;//假设本次可以进行清除
for (var k in obj) {
//针对opacity和zIndex进行单独处理
if (k == "opacity") {
var target = obj[k] * 100;
var leader = getStyle(tag, k) * 100 || 0;
var step = (target - leader) / 10;
//设置取整，保证元素可以进行运动
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
tag.style[k] = leader / 100;//缩小对应的倍数，并且去除单位
} else if (k == "zIndex") {
//zIndex不需要运动，只要进行修改设置即可
tag.style.zIndex = obj[k];
} else {
//k - 属性名 - attr - 要修改的样式名
//obj[k] - 属性值 - target - 要修改的样式的目标值
var target = obj[k];
var leader = parseInt(getStyle(tag, k)) || 0;
var step = (target - leader) / 10;
//设置取整，保证元素可以进行运动
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
tag.style[k] = leader + "px";
}
//如果有某一个样式没有运动到指定位置，阻止清除
if (leader != target) {
flag = false;
}
}
if (flag) {
clearInterval(tag.timer);
fn && fn();
}
}, 20);
}
//由于获取标签任意样式的值
function getStyle(tag, attr) {
if (tag.currentStyle) {
return tag.currentStyle[attr];
} else {
return getComputedStyle(tag, null)[attr];
}
}
转载请注明原文地址: https://ju.6miu.com/read-664761.html
