如何用Javascript实现动画效果？

JavaScript动画核心是按时间规律更新样式并依赖浏览器渲染，首选requestAnimationFrame实现60fps同步帧更新，避免setInterval/setTimeout掉帧；示例中通过时间戳计算进度完成200px位移。

用 JavaScript 实现动画效果，核心是**按时间规律反复更新元素的样式属性，并借助浏览器渲染机制呈现连续变化**。不依赖 CSS 动画或第三方库时，关键在于控制好“更新时机”和“更新逻辑”。

用 requestAnimationFrame 替代 setInterval

这是现代 JS 动画的首选方式。它让浏览器决定何时执行帧更新，与屏幕刷新率同步（通常是 60fps），更流畅、更省电，且在标签页不可见时自动暂停。

• 基本写法：定义一个动画函数，在内部调用 requestAnimationFrame(animate) 形成递归循环
• 避免用 setInterval 或 setTimeout 控制帧率，它们无法对齐刷新节奏，容易掉帧或卡顿
• 示例：让一个 p 水平移动 200px，耗时 1 秒

用 easing 函数控制运动节奏

直接线性变化（匀速）显得生硬。加入缓动函数（easing），能让动画有加速、减速或弹性等真实感。

• 常见 easing：ease-in（慢入）、ease-out（慢出）、ease-in-out（慢入慢出）、cubic-bezier(.25,.1,.25,1)
• 可手写简单函数，如 easeOutQuad(t) { return t * (2 - t); }（二次缓出）
• 把原始进度 t ∈ [0,1] 输入 easing 函数，再用返回值计算实际位置

封装可复用的动画函数

避免每次写一堆 timestamp 和 requestAnimationFrame 逻辑。抽离为通用函数，支持目标元素、属性、起止值、时长和 easing。

标签： css javascript java js seo 浏览器 edge safari win red