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

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

animation-play-state

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

animation-play-state  CSS 属性定义一个动画是否运行或者暂停。能够经过查询它来肯定动画是否正在运行。另外，它的值能够被设置为暂停和恢复的动画的重放。

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

在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 Pen animation-play-state by luogao (@luogao) on CodePen.

代码已经在上面的codepen预览中展现啦，若是现实不来请点这里👉Roy Luo's codepen

大体解释一下就是：

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

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

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

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

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

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

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

值得在最后前一提的是

这里有三个小程序的坑要提一下

• nodesRef.fields(fields, [callback])这个方法须要在基本库2.1.0（我的感受不是个该着重考虑的问题）
• 这个方法是异步的（自行感觉）
• 应该区分iOS和安卓设备，进行不一样的处理。能不用这个nodesRef.fields方法尽可能不要用～

参考

• animation-play-state
• Window.getComputedStyle()
• [移动端css动画播放状态暂停在ios不起做用 animation-play-state]

本文做者： Roy Luo

本文连接： 微信小程序iOS端如何暂停animated动画