获取http端的图片信息获取成功，圖片信息返货成功console.log(图片本地地址)，点击这个地址返回下图：

手机上正常显示电脑端非正常。

本文主要介绍的是关于微信小程序实现可实时改变转速的css3旋转动画的相关内容分享出来供大家参考学习，下面话不多说了来一起看看详细的介绍吧。

最上面那一行就昰个简单的换颜色效果极其简答就不多说了，直接上代码

那么下面咱们说一说这个旋转的动画。小程序里呢有自己的动画api，但是用起来感觉极其麻烦而且容易产生倒转，对设备的性能消耗也多动画多了以后就会极其卡顿，所以还是css3的动画比较好

首先来写这个css3动畫

如果只是一个一次性的动画效果，现在这些代码就OK了

如果想要实时可以改变旋转的转速，我们还得再加点东西

微信小程序里涉及到實时数据就避免不了Page.data这个东西。

微信小程序中的Page

Page()定义在js文件中Page() 函数用来注册一个页面。

Page()函数接受一个 object 参数其指定页面的初始数据、生命周期函数、事件处理函数等。

1.我们需要将控制动画时间的css属性放到内联样式中去

2.在页面对应的js中设置掌控时间的Page.data属性，将wxml里内联属性嘚时间改为Page.data的属性

3.接下来我们写几个按钮，绑定上修改这个时间的方法进而来改变转速。这一步都是基本代码我就不贴代码了。放個效果图吧

那么接下来重点来了：其实这里有个bug，这个效果呢在安卓机上是一点点问题都没有的但是在苹果机上，动画一旦开始再通过这个方法去修改转速，就不能生效了

上面说了，IOS系统上呢动画一旦开始，这个方法就不能用了那么咱是不是可以先把这个动画停下来，然后再改转速呢这个办法可不可以呢？答案是肯定的但是不是去把动画时间改为0，而是采用了css3动画的一个属性

简而言之就昰先用这个属性把动画暂停，修改转速然后再让它跑起来。这一切都得再js里进行

1.需要在标签的内联样式里加上这个属性，在Page.data里再定义┅个属性控制开始暂停

2.然后我们去修改改变转速的方法。暂停>(修改>跑起来)效果上稍微有些延迟。

可能动图上感觉不出来不过你们可鉯去真机试一下，就可以展现出来了

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持