JS原生封装动画函数
程序员文章站
2024-03-17 11:33:46
...
封装一个简单的原生匀速动画函数
/**
* 匀速动画函数
* @param {位移的元素} elm
* @param {位移的目标位置} target
*/
function moveAnimation(elm, target) {
clearInterval(elm.timeID);
let position = elm.offsetLeft;
let step = (target - position) > 0 ? 10 : -10;
elm.timeID = setInterval(
function () {
position += step;
if (Math.abs(target - position) > Math.abs(step)) {
elm.style.left = position + 'px';
} else {
elm.style.left = target + 'px';
clearInterval(elm.timeID);
}
}, 10
)
}
缓动动画函数
/**
* 缓动动画函数
* @param {位移元素} elm
* @param {位移目标} target
*/
function slowAnimation(elm, target) {
clearInterval(elm.timeID);
let position = elm.offsetLeft;
elm.timeID = setInterval(
function () {
let step = position > target ? Math.floor((target - position) / 10) : Math.ceil((target - position) / 10);
position += step;
elm.style.left = position + 'px';
if (target == position) {
clearInterval(elm.timeID);
}
}, 20
)
}
上一篇: Restricted Session