实现类似jQuery里的animate动画效果的方法，可以通过纯JavaScript使用定时器setInterval()来实现。
1. 编写animate函数
在JavaScript中，编写一个animate函数，接收四个参数：元素对象、目标属性、动画时长和回调函数。动画时长使用毫秒作为单位，回调函数在动画完成时执行。
/**
* 实现 animate 动画方法
* @param {Object} element 要执行动画的元素对象
* @param {Object} targetObj 目标样式属性对象
* @param {Number} duration 动画完成时长，单位ms
* @param {Function} callback 动画结束后的回调函数
*/
function animate(element, targetObj, duration, callback) {
// 获取元素当前样式
var currentStyleObj = getCurrentStyleObj(element);
// 创建定时器对象
var intervalId = setInterval(function () {
// 计算每帧变化的值，并更新元素样式
for (var property in targetObj) {
var startValue = parseFloat(currentStyleObj[property]);
var targetValue = parseFloat(targetObj[property]);
var change = targetValue - startValue;
var elapsed = Date.now() - startTime;
var progress = elapsed / duration;
var val = startValue + change * progress;
element.style[property] = val + (property === 'opacity' ? '' : 'px');
}
// 判断动画是否结束，结束后清除定时器并执行回调函数
if (elapsed >= duration) {
clearInterval(intervalId);
element.style[property] = targetValue + (property === 'opacity' ? '' : 'px');
callback && callback();
}
}, 1000 / 60);
// 获取元素当前样式的函数
function getCurrentStyleObj(element) {
if (window.getComputedStyle) {
return window.getComputedStyle(element);
} else {
return element.currentStyle;
}
}
// 记录动画开始时间
var startTime = Date.now();
}
2. 示例说明
示例1：移动元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animate Demo</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
// 移动到100px, 200px
animate(box, { left: 100, top: 200 }, 1000, function () {
console.log('Animation complete');
});
</script>
</body>
</html>
示例2：调整元素透明度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animate Demo</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
opacity: 1;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
// 透明度从1变为0
animate(box, { opacity: 0 }, 1000, function () {
console.log('Animation complete');
});
</script>
</body>
</html>
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！