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

miracledan 发布于2019-08-23 10:30 / 1261人阅读

摘要：可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。在文档中了解到，这是一个实验中的功能，但是其作用还是强大的。也就是说我们使用这个方法可以获取一个正在进行动画的元素当前的值。

在知道有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预览中展示啦，如果现实不来请点这里

GPU云服务器云服务器微信小程序如何快速微信小程序如何开发如何创作微信小程序如何使用微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96401.html

300行代码写一个音乐播放器小程序

摘要：项目主要是微信小程序也用到了等。前端部分主要是歌曲播放控制和交互部分的代码，更多关于小程序的内容可见微信小程序开发文档小程序框架结构微信小程序的入口是根目录下的它们分别描述的小程序的主题逻辑和公共配置部分。刚进公司不久，因为公司部门年后业务拓展的关系，可能在年后会被分配到公司的微信公众号组做小程序相关的开发工作，因此写了个微信小程序wx-audio踩坑。目前还有一些功能没有写完：如返...

chenatu 2019-08-20 13:56 评论0 收藏0
指尖一点歌声来--微信小程序之仿网易云音乐心得

摘要：为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。查文档发现，小程序中图片加载完成后，有一个加载完成事件。前者在微信客户端版本就不开始维护了，后者低版本需做兼容处理。目前还有一些功能暂未实现，会在以后继续完善项目，继续学习。为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。期间踩过了大把的坑，bug出现的难受和解决bug欢喜，一直是伴随我阶段性学习这个项目的心情。初步完成...

KitorinZero 2019-08-22 11:18 评论0 收藏0
在微信小程序中绘制图表（part3）

摘要：本期大纲饼图绘制如何添加动画效果使用构建项目相关阅读在微信小程序中绘制图表在微信小程序中绘制图表关注我的项目查看完整代码。本期大纲 1、饼图绘制2、如何添加动画效果3、使用rollup构建项目相关阅读：在微信小程序中绘制图表（part1）在微信小程序中绘制图表（part2）关注我的 github 项目查看完整代码。很久没更新了，最近事情比较多，今天来把坑填上！饼图绘制 ...

褰辩话 2019-08-21 11:20 评论0 收藏0
小程序练习，仿bilibili小程序

摘要：微信小程序学习仿哔哩哔哩制作的小程序待完善项目预览图小程序大改变之前就被朋友安利使用小程序，最近接近了小程序，发现了它竟然带来了一场大革命。微信小程序学习仿哔哩哔哩制作的小程序（待完善）项目预览图 showImg(https://segmentfault.com/img/remote/1460000010418829); 小程序？大改变？之前就被朋友安利使用小程序，最近接近了...

2shou 2019-08-20 18:24 评论0 收藏0