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

微信小程序如何在iOS端暂停动画动画，如何实现，以下是供大家分析的。

动画播放状态

让我们介绍今天的主角动画播放状态

animation-play-stateCSS属性定义动画是正在运行还是暂停。您可以通过查询来确定动画是否正在运行。此外，其值可以设置为播放暂停和恢复的动画。

从开始暂停时恢复暂停的动画，而不是从动画序列的开头开始。

正如您在MDN文档中了解到的，这是一个实验性功能，但它仍然非常强大。可以控制/获取元素的动画状态（暂停，运行）

因此，该动画的参数用于控制动画的回放状态。画外音：您尚未考虑兼容性！正确！这是兼容性问题。 Chrome上支持此参数，但iOS设备不支持此功能.叹息。

在iOS上处理

当然，由于兼容性问题，您无法使用此参数。当然，你不能让每个iOS用户下载Chrome浏览器，当然.

那么我们如何解决呢？使用JS

通过Window.getComputedStyle（）方法，我们可以获得元素实时样式的CSSStyleDeclaration对象，它表示CSS属性键值对的集合。换句话说，我们可以使用此方法来获取正在设置动画的元素的当前样式值。

PS:可以在MDN上找到Window.getComputedStyle（）方法的值。这里没有扩展描述。举一个语法的例子（取自MDN）

设style=window.getComputedStyle（element，[pseudoElt]）;复制代码

那你具体做什么？

实施

参见Luogao（@luogao）onCodePen的Penanimation-play-state。

代码已在上面的codepen预览中显示。如果现实没有到来，请点击这里。 point_right: Roy Luo的编码器

大致解释一下：

在元素外层的包装元素上添加执行动画的获取元素的样式计算属性，从而暂停执行动画的元素。

那么微信小程序呢？

实际上，在做小程序时遇到的第一个问题。一个玩家的界面，中间有一张专辑图片。旋转在圆形黑胶唱片的边框。播放停止时，图像也会同时停止旋转。停在当前的旋转位置

当时看似简单的要求，使用动画播放状态并在模拟器中实现与预期相同的效果。

是的，我很自豪需要完成需求，真机（iOS）最后一次测试的结果，原始形状显露出来。

当时我看到官方社区小程序提到iOS不支持这个动画 - 播放状态️️

Hvihi.com小程序工具开发公司沈阳汇海，是一家拥有十年技术前沿的公司。我们以先进的技术，简单的操作，支持各种社区营销活动，提供和解决各行业的小程序开发，并提供全面的营销体系。并且可视化模板操作，大大降低了人力和物力成本。

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序商店

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。