iOS端暂停animated动画的解决指南

2023-10-03 23:23:42

iOS端暂停animated动画的解决指南

在了解到iOS端不支持animation-play-state这个动画参数时，我们内心是无比失望的。

要知道，这是一个实验中的功能，但其作用还是强大的。因为它可以控制或获取元素的动画状态（paused，running）。

一、animation-play-state动画参数

1. 语法：

animation-play-state: running|paused|initial|inherit;

2. 说明：

running：动画正在播放。
paused：动画已暂停。
initial：使用元素的默认值。
inherit：从父元素继承值。

3. 兼容性：

animation-play-state动画参数兼容性如下：

Chrome: 是
Firefox: 是
Opera: 是
Safari: 是
Edge: 是
iOS Safari: 否

二、iOS端暂停animated动画的具体解决方案

1. 使用JavaScript

// 获取动画元素
const element = document.getElementById('my-animation');

// 暂停动画
element.style.animationPlayState = 'paused';

// 恢复动画
element.style.animationPlayState = 'running';

2. 使用CSS

/* 暂停动画 */
#my-animation {
  animation-play-state: paused;
}

/* 恢复动画 */
#my-animation {
  animation-play-state: running;
}

3. 使用Web动画API

// 获取动画元素
const element = document.getElementById('my-animation');

// 暂停动画
element.getAnimations().forEach((animation) => {
  animation.pause();
});

// 恢复动画
element.getAnimations().forEach((animation) => {
  animation.play();
});