JavaScript之JS实现动画效果

JavaScript 是一种强大的编程语言，它可以在浏览器中执行，并且可以用于创建动画效果。以下是一个简单的 JavaScript 动画示例，该示例将使用 requestAnimationFrame 方法来创建一个元素在页面中移动的动画。

首先，我们需要在 HTML 中创建一个元素：

<!DOCTYPE html>  
<html>  
<body>  
    <div id="animatedElement" style="position:absolute; left:0px; width:50px; height:50px; background-color:red;"></div>  
    <button onclick="startAnimation()">开始动画</button>  
  
    <script src="animation.js"></script>  
</body>  
</html>

然后，在 animation.js 文件中，我们可以编写 JavaScript 代码来创建动画：

let start = null;  
const element = document.getElementById('animatedElement');  
let pos = 0;  
const id = setInterval(frame, 10);  
  
function frame() {  
    if (!start) start = Date.now();  
    const elapsed = Date.now() - start;  
    pos = Math.min(elapsed / 10, 200);  
    element.style.left = pos + 'px';   
}  
  
function startAnimation() {  
    if (id) {  
        clearInterval(id);  
    }  
    start = null;  
    pos = 0;  
    element.style.left = '0px';  
    const id = setInterval(frame, 10);  
}

在这个例子中，我们首先获取了页面中 id 为 “animatedElement” 的元素，并设置了一个初始位置 pos 为 0。然后，我们定义了一个函数 frame，这个函数会根据从动画开始到现在经过的时间（以毫秒为单位）来更新元素的位置。我们使用 setInterval 来每 10 毫秒调用一次 frame 函数，从而创建动画效果。

此外，我们还添加了一个按钮，当点击这个按钮时，会调用 startAnimation 函数。这个函数会清除之前的动画（如果有的话），然后重新设置初始状态，并开始新的动画。

注意，虽然 setInterval 可以用于创建动画，但是在实际的开发中，我们更推荐使用 requestAnimationFrame 方法来创建动画，因为它可以提供更平滑的动画效果，并且能够更好地控制动画的帧率。以下是使用 requestAnimationFrame 的示例：

let start = null;  
const element = document.getElementById('animatedElement');  
let pos = 0;  
  
function frame(timestamp) {  
    if (!start) start = timestamp;  
    const elapsed = timestamp - start;  
    pos = Math.min(elapsed / 10, 200);  
    element.style.left = pos + 'px';   
    if (pos < 200) {  
        window.requestAnimationFrame(frame);  
    }  
}  
  
function startAnimation() {  
    start = null;  
    pos = 0;  
    element.style.left = '0px';  
    window.requestAnimationFrame(frame);  
}

文中内容均来源于公开资料，受限于信息的时效性和复杂性，可能存在误差或遗漏。我们已尽力确保内容的准确性，但对于因信息变更或错误导致的任何后果，本站不承担任何责任。如需引用本文内容，请注明出处并尊重原作者的版权。

THE END