介绍 & lt; view 类=癱louds"比;
,,& lt; image 动画=皗{animationCloudData}}“,类=皔un1", src=https://www.yisu.com/zixun/img/yun1.png ">
onReady:, function (), {//才能,页面渲染完成//,才能实例化一个动画
var 才能;that =,;
var 才能小姐:=0
var 才能;ii =0
var 才能;animationData =, wx.createAnimation ({
,,,时间:1000年,,//,默认为400,,,动画持续时间,单位女士
,,,timingFunction: & # 39; ease-in-out& # 39;
,,//transformOrigin:, & # 39; 4 px 91 px # 39;
,,});
var 才能;animationCloudData =, wx.createAnimation ({
,,,时间:1000年,,//,默认为400,,,动画持续时间,单位女士
,,,timingFunction: & # 39; ease-in-out& # 39;
,,//transformOrigin:, & # 39; 4 px 91 px # 39;
,,});//,才能顺序执行,当已经执行完上面的代码就会开启定时器//才能,循环执行代码//dotAnFun 才能=,setInterval (function (), {});,,/*才能setInterval (function (), {//,,,动画脚本定义
,,//animationData.rotate(6, *,(我)+ +).step ()
,,//animationData.scale (2, 2) .rotate (45) .step () .scale (1, 1) .step ();
,,animationData.translateY (10) .step({,时间:500年,}).translateY (-10) .step({,时间:500年,});//,,,更新数据
,,that.setData ({
,,,//,导出动画示例
,,,animationData:, animationData.export (),
,,,//animationCloudData:, animationCloudData.export (),,,,,
,,})
我,,+ +;
,,console.log(我);
}.bind才能(,),,2000);//循环时间,这1000年里是1秒
,*///动才能画的脚本定义必须每次都重新生成,不能放在循环外
animationCloudData.translateX才能(200).step({,时间:5000年,}).translateX (0) .step({,时间:5000年,});//,才能更新数据
that.setData({才能
,,//,导出动画示例
,,//animationData:, animationData.export (),
,,,animationCloudData: animationCloudData.export (),
})才能
setInterval(才能function (), {
,,//动画的脚本定义必须每次都重新生成,不能放在循环外
,,animationCloudData.translateX (300) .step({,时间:5000年,}).translateX (-100) .step({,时间:5000年,});//,,,更新数据
,,that.setData ({
,,,//,导出动画示例
,,,//animationData:, animationData.export (),
,,,animationCloudData:, animationCloudData.export (),
,,})
第二,,+ +;
,,console.log (ii);
}.bind才能(,),10000);//3000这里的设置如果小于动画一步的持续时间的话会导致执行一半后出的错
} .clouds {
,margin-top: 320 rpx;
}
.yun1 {
,宽度:320 rpx;
,身高:120 rpx;
}
这篇文章将为大家详细讲解有关动画如何实现让云朵飘的动画实例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创建一个动画实例动画。调用实例的方法来描述动画。最后通过动画实例的出口方法导出动画数据传递给组件的动画属性。
注意:出口方法每次调用后会清掉之前的动画操作
微信小程序提供了实现动画的api——动画,但却不能循环播放,都是一次性的,动完就结束了,下面提供一个用微信小程序的动画来实现循环动画的玩具,抛砖引玉,希望大家能想出更好的方法来实现真正的循环。说是玩具是因为这个循环动画通过js脚本的setInterval来实现的,但& # 39;setInterval # 39;在实际运行中会出现越来越严重的延迟,这是由于js的单线程运行模式所决定的(具体可以搜本关资料看),所以动画间隙并不是那么流畅,所以先玩玩吧,让我们来实现让云朵飘……
截图如下:
实现代码:
索引。wxml
索引。js
索引。wxs
关于“动画如何实现让云朵飘的动画实例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
