微信小程序iOS端如何暂停animated动画

微信小程序iOS端如何暂停animated动画，应该如何实现，下面为大家分析。

animation-play-state

先来介绍一下今天的主角 animation-play-state

animation-play-stateCSS属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。

在MDN文档中了解到，这是一个实验中的功能，但是其作用还是强大的。既可以控制/获取元素的动画状态（paused，running）

所以，这个animation的参数用来控制动画的播放状态再合适不过了。画外音：你还没考虑兼容性呢！对！就是这个兼容性问题。在chrome上这个参数是可以支持的，但是iOS设备上就不支持了...叹息。

在iOS上的处理

当然不能因为兼容性问题就不用这个参数了，当然不能让每个iOS用户去下载一个chrome浏览器，当然...

那我们怎么解决呢？？？用JS

通过 Window.getComputedStyle() 方法，我们可以获取元素实时的 style 的 CSSStyleDeclaration 对象，这个对象表示CSS属性键值对的集合。也就是说我们使用这个方法可以获取一个正在进行动画的元素当前的 style 值。

PS:关于 Window.getComputedStyle() 方法的值可以在MDN上了解到，这里不展开叙述。给出一个语法的例子（摘自MDN）

let style = window.getComputedStyle(element, [pseudoElt]);
复制代码

那么具体要怎么做呢？

实现

See the Penanimation-play-state by luogao (@luogao) onCodePen.

代码已经在上面的codepen预览中展示啦，如果现实不来请点这里:point_right:Roy Luo's codepen

大致解释一下就是：

在元素的外层的包裹元素上添加获取到的执行动画的元素的 style 计算属性，从而让执行动画的元素暂停下来。

那么在微信小程序中又是如何呢？

其实，最先遇到这个问题是在做小程序的时候。一个播放器的界面，中间一张专辑图片。在圆形的黑胶唱片边框中旋转。当播放停止，图片也同时停止旋转。 停在当前旋转的位置

当时看似简单的一个需求，使用了 animation-play-state 并且与预期一样达到了效果， 在模拟器中 。

没错，洋洋得意的以为完成了需求，结果真机（iOS）上一测试，原形毕露。

当时看到小程序的官方社区中提到说iOS不支持这个 animation-play-state ‍♂️ ‍♂️ ‍♂️ ‍

Hishop小程序工具开发公司长沙海商，是一家有着十年技术前沿的公司，我们以先进技术提供并解决各行业小程序开发，操作简单，支持多种社群营销活动，提供一套综合性的营销系统。以及可视化模板操作，大大减少人力物力成本。

HiShop小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店