动画的播放状态控制

动画的播放状态控制

CSS动画的播放状态控制主要通过animation-play-state属性实现，它允许开发者动态暂停或恢复动画播放。这个属性特别适合需要交互控制的场景，比如用户悬停时暂停动画、点击按钮切换播放状态等。

基本语法与取值

animation-play-state属性接受两个值：

• running：动画正常播放（默认值）
• paused：动画暂停在当前帧

.element {
  animation: spin 2s linear infinite;
  animation-play-state: paused; /* 初始状态为暂停 */
}

.element:hover {
  animation-play-state: running; /* 悬停时恢复播放 */
}

与JavaScript的联动控制

通过JavaScript可以更灵活地控制动画状态。以下示例展示如何通过按钮切换播放状态：

<div class="box"></div>
<button id="toggleBtn">暂停/播放</button>

<style>
.box {
  width: 100px;
  height: 100px;
  background: coral;
  animation: bounce 1s alternate infinite;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-50px); }
}
</style>

<script>
const box = document.querySelector('.box');
const btn = document.getElementById('toggleBtn');

btn.addEventListener('click', () => {
  const currentState = getComputedStyle(box).animationPlayState;
  box.style.animationPlayState = currentState === 'paused' ? 'running' : 'paused';
});
</script>

多动画状态控制

当元素应用多个动画时，可以用逗号分隔值来控制每个动画的状态：

.element {
  animation: 
    fadeIn 2s ease-in,
    slideRight 3s ease-out;
  animation-play-state: paused, running; /* 暂停第一个，播放第二个 */
}

实际应用场景

轮播图控制

<div class="carousel">
  <div class="slides"></div>
  <button class="pause-btn">暂停</button>
</div>

<style>
.slides {
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-300%); }
}
</style>

<script>
const slides = document.querySelector('.slides');
const pauseBtn = document.querySelector('.pause-btn');

pauseBtn.addEventListener('click', () => {
  const isPaused = getComputedStyle(slides).animationPlayState === 'paused';
  slides.style.animationPlayState = isPaused ? 'running' : 'paused';
  pauseBtn.textContent = isPaused ? '暂停' : '播放';
});
</script>

游戏角色动画

.character {
  animation: 
    idle 1s steps(4) infinite,
    walk 0.8s steps(8) infinite;
  animation-play-state: running, paused;
}

.character.walking {
  animation-play-state: paused, running;
}

性能优化注意事项

1. 硬件加速：对transform和opacity属性应用动画性能更好
2. will-change：对需要频繁切换状态的元素使用will-change: animation
3. 减少重绘：避免在动画中修改会引起布局变化的属性

.optimized {
  will-change: animation;
  transform: translateZ(0);
  animation: optimizedAnim 2s linear infinite;
}

浏览器兼容性解决方案

对于不支持animation-play-state的老版本浏览器，可以考虑以下替代方案：

// 回退方案：移除/添加动画类
function toggleAnimation(element) {
  if ('animationPlayState' in document.body.style) {
    // 支持原生属性
    const currentState = getComputedStyle(element).animationPlayState;
    element.style.animationPlayState = currentState === 'paused' ? 'running' : 'paused';
  } else {
    // 回退方案
    element.classList.toggle('paused');
  }
}

配合CSS：

.anim-element {
  animation: spin 2s linear infinite;
}

.anim-element.paused {
  animation: none;
}

高级状态控制技巧

与animation-fill-mode配合

.card {
  animation: reveal 1s forwards;
  animation-play-state: paused;
}

.card.active {
  animation-play-state: running;
}

@keyframes reveal {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

动态计算暂停位置

通过JavaScript获取和设置动画进度：

let animationProgress = 0;
const element = document.querySelector('.animated');

function pauseAnimation() {
  const style = getComputedStyle(element);
  const animationName = style.animationName;
  const animationDuration = parseFloat(style.animationDuration) * 1000;
  
  // 计算当前动画进度
  const anim = element.getAnimations().find(a => a.animationName === animationName);
  if (anim) {
    animationProgress = anim.currentTime / animationDuration;
    anim.pause();
  }
}

function resumeAnimation() {
  const anim = element.getAnimations()[0];
  if (anim) {
    anim.currentTime = animationProgress * anim.effect.getTiming().duration;
    anim.play();
  }
}

响应式设计中的应用

结合媒体查询控制动画状态：

.widget {
  animation: pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .widget {
    animation-play-state: paused;
  }
}