要直接控制动画暂停和继续，可通过操控animation-play-state属性或使用requestanimationframe实现。对于css动画，使用element.style.animationplaystate设置为'paused'或'running'即可暂停或继续；对于js动画，需维护isrunning标志位并使用requestanimationframe控制循环。平滑控制可通过transition过渡、记录动画进度或使用缓动函数实现。多个动画属性可分别封装控制函数或通过css变量统一管理。优化卡顿问题应使用requestanimationframe、减少dom操作、优先使用transform和opacity、避免复杂计算、优化图片资源、启用硬件加速、避免阻塞主线程，并借助性能分析工具持续优化。
直接控制动画暂停和继续，其实就是操控动画的播放状态。在JS中，我们可以通过修改元素的CSS属性来实现，但具体怎么做，还得看你用的是哪种动画。
解决方案
对于CSS动画，核心是animation-play-state属性。JS的作用就是切换这个属性的值。
// 获取需要控制的元素
const element = document.getElementById('myElement');
// 暂停动画
function pauseAnimation() {
element.style.animationPlayState = 'paused';
}
// 继续动画
function resumeAnimation() {
element.style.animationPlayState = 'running';
}
// 绑定按钮点击事件（示例）
document.getElementById('pauseButton').addEventListener('click', pauseAnimation);
document.getElementById('resumeButton').addEventListener('click', resumeAnimation);
这里，pauseAnimation函数将animationPlayState设置为paused，动画就会暂停。resumeAnimation函数将其设置为running，动画就会继续。 简单直接，对吧？
如果你的动画是基于JavaScript实现的（例如使用requestAnimationFrame），那么控制就更加灵活了。你需要维护一个动画是否正在运行的标志位，并在动画循环中根据这个标志位来决定是否更新元素的状态。
let animationId;
let isRunning = false;
function animate() {
// 动画逻辑，例如修改元素的位置
// ...
if (isRunning) {
animationId = requestAnimationFrame(animate);
}
}
function startAnimation() {
if (!isRunning) {
isRunning = true;
animationId = requestAnimationFrame(animate);
}
}
function stopAnimation() {
isRunning = false;
cancelAnimationFrame(animationId);
}
document.getElementById('startButton').addEventListener('click', startAnimation);
document.getElementById('stopButton').addEventListener('click', stopAnimation);
这种方式的优点是可以更精细地控制动画的每一帧，但复杂度也更高。
如何平滑地暂停和继续CSS动画？
直接切换animation-play-state有时会显得生硬，动画会瞬间停止或开始。想要更平滑的效果，可以考虑以下策略：
使用
transition过渡到暂停状态： 在暂停时，先将动画速度设置为一个非常小的值（例如animation-duration: 0.001s），然后通过transition属性平滑地过渡到暂停状态。恢复时，再将动画速度恢复到正常值。记录动画进度： 在暂停时，记录当前动画的进度（例如已播放的时间百分比），然后在恢复时，从记录的进度开始播放。这需要更复杂的JS逻辑，但可以实现更精确的控制。
使用缓动函数： 选择合适的缓动函数可以让动画的启动和停止过程更加自然。例如，使用
ease-in-out可以让动画在开始和结束时速度较慢，中间速度较快。
JS控制动画时，如何处理多个动画属性？
当元素有多个动画属性时，你需要分别控制每个属性的播放状态。 一个简单的方法是，将每个动画属性的控制逻辑封装成独立的函数，然后分别调用这些函数。
function pauseAnimationX() {
element.style.animationPlayStateX = 'paused';
}
function resumeAnimationX() {
element.style.animationPlayStateX = 'running';
}
function pauseAnimationY() {
element.style.animationPlayStateY = 'paused';
}
function resumeAnimationY() {
element.style.animationPlayStateY = 'running';
}
// ...
更优雅的方式是使用CSS变量和JS来统一控制。 例如，你可以定义一个CSS变量来表示动画的播放状态，然后在JS中修改这个变量的值。
:root {
--animation-state: running;
}
.element {
animation: myAnimation 2s linear var(--animation-state);
}
function setAnimationState(state) {
document.documentElement.style.setProperty('--animation-state', state);
}
function pauseAnimation() {
setAnimationState('paused');
}
function resumeAnimation() {
setAnimationState('running');
}
这种方式的好处是可以更方便地控制多个动画属性，并且可以避免重复的代码。
动画卡顿怎么办？如何优化JS控制的动画？
动画卡顿是个常见问题，尤其是在复杂的页面中。以下是一些优化建议：
使用
requestAnimationFrame： 这是浏览器提供的专门用于动画的API，它可以确保动画在最佳的时机执行，避免不必要的重绘和回流。避免频繁操作DOM： DOM操作是昂贵的，尽量减少DOM操作的次数。可以将多个DOM操作合并成一次，或者使用
DocumentFragment来批量更新DOM。使用
transform和opacity： 这两个属性的修改不会触发回流，因此性能更好。尽量使用这两个属性来实现动画效果。避免复杂的计算： 复杂的计算会占用大量的CPU资源，导致动画卡顿。尽量将计算放在后台线程中进行，或者使用Web Workers。
优化图片资源： 大的图片资源会占用大量的内存和带宽，导致动画卡顿。尽量使用压缩过的图片，并使用合适的图片格式。
使用硬件加速： 某些CSS属性可以触发硬件加速，例如
transform和opacity。利用硬件加速可以提高动画的性能。避免阻塞主线程： 长时间的JS操作会阻塞主线程，导致动画卡顿。使用
setTimeout或requestIdleCallback将任务分解成小块，避免长时间占用主线程。使用性能分析工具： 使用浏览器的性能分析工具可以帮助你找到性能瓶颈，并进行针对性的优化。
记住，优化是一个持续的过程，需要不断地分析和改进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
