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

在知道有?animation-play-state?这个animation的参数时，我内心是激动的。在得知iOS端并不支持时，一股凉意袭来

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??♂? ?♂? ?♂? ?

幸得残阳映枫红在sf的一个问题中的回答让我找到了方向。感谢之～

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!