前言
本文主要介绍的是关于微信小程序实现可实时改变转速的css3旋转动画的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
先上效果图
最上面那一行就是个简单的换颜色效果，极其简答就不多说了，直接上代码。
WXML
<view class='box' style='background-color:{{backgroundcolor}}'>
</view>
<view class='viewBox'>
<button bindtap='changeColor' data-color='black' class='box'>黑</button>
<button bindtap='changeColor' data-color='violet' class='box'>紫</button>
<button bindtap='changeColor' data-color='orange' class='box'>橙</button>
<button bindtap='changeColor' data-color='blue' class='box'>蓝</button>
<button bindtap='changeColor' data-color='green' class='box'>绿</button>
</view>
JS
data: {
backgroundcolor:'red'
},
changeColor:function(e){
this.setData({
backgroundcolor: e.currentTarget.dataset.color
})
}
那么下面咱们说一说这个旋转的动画。小程序里呢，有自己的动画api，但是用起来感觉极其麻烦，而且容易产生倒转，对设备的性能消耗也多，动画多了以后就会极其卡顿，所以还是css3的动画比较好。
首先来写这个css3动画
css3旋转动画
<view class='animationSlow'></view>
.animationSlow {
width: 100rpx;
height: 100rpx;
background-color: orange;
animation-name: myfirst; /*动画的名称 */
animation-duration: 2000ms; /*动画从开始到结束的时间*/
animation-timing-function: linear; /*动画执行快慢的参数*/
animation-iteration-count: infinite; /*动画执行多少次的参数*//*以下是兼容ios所需，参数意义与上相同*/
-webkit-animation-name: myfirst;
-webkit-animation-duration: 2000ms;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@keyframes myfirst {
/*开始转的角度*/
from {
transform: rotate(0deg);
}/*结束的角度*/
to {
transform: rotate(360deg);
}
}
/*兼容ios*/
@-webkit-keyframes myfirst {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
效果图
如果只是一个一次性的动画效果，现在这些代码就OK了。
如果想要实时可以改变旋转的转速，我们还得再加点东西。
实现可以实时修改转速
微信小程序里涉及到实时数据就避免不了Page.data这个东西。
微信小程序中的Page
Page()定义在js文件中，Page() 函数用来注册一个页面。
Page()函数接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
object参数为：
1.我们需要将控制动画时间的css属性放到内联样式中去
<view class='animationSlow' style='animation-duration: 2000ms;-webkit-animation-duration: 2000ms;'></view>
2.在页面对应的js中，设置掌控时间的Page.data属性，将wxml里内联属性的时间改为Page.data的属性。
data: {
animationTime:'2000ms'
},
<view class='animationSlow' style='animation-duration: {{animationTime}};-webkit-animation-duration: {{animationTime}};'></view>
3.接下来我们写几个按钮，绑定上修改这个时间的方法，进而来改变转速。这一步都是基本代码，我就不贴代码了。放个效果图吧。
效果图
那么接下来重点来了：其实这里有个bug，这个效果呢在安卓机上是一点点问题都没有的。但是在苹果机上，动画一旦开始，再通过这个方法去修改转速，就不能生效了。
解决IOS系统的BUG
上面说了，IOS系统上呢，动画一旦开始，这个方法就不能用了。那么咱是不是可以先把这个动画停下来，然后再改转速呢？这个办法可不可以呢？答案是肯定的，但是不是去把动画时间改为0，而是采用了css3动画的一个属性。CSS3 动画教程
animation-play-state: paused|running;
简而言之就是先用这个属性把动画暂停，修改转速，然后再让它跑起来。这一切都得再js里进行。
1.需要在标签的内联样式里加上这个属性，在Page.data里再定义一个属性控制开始暂停。
<view class='animationSlow' style='animation-duration: {{animationTime}};-webkit-animation-duration: {{animationTime}};animation-play-state:{{status}};-webkit-animation-play-state:{{status}};'></view>
data: {
animationTime:'2000ms',
status: 'running'//paused
},
2.然后我们去修改改变转速的方法。暂停>(修改>跑起来)，效果上稍微有些延迟。
changeTime:function(e){
this.setData({
status: 'paused'
})
this.setData({
timeAnimation: e.currentTarget.dataset.time,
status: 'running'
})
},
3.来上效果图了。
效果图
可能动图上感觉不出来，不过你们可以去真机试一下，就可以展现出来了。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。
微信小程序,实时,旋转动画
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。