当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序iOS端如何暂停animated动画

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

2018-08-23 10:42 来源: 霸界科技

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

期权保本理财
  微信小程序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
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088