这篇文章主要介绍了微信小程序开发中如何实现animation循环动画,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。截图如下:实现代码:ind
这篇文章主要介绍了微信小程序开发中如何实现animation循环动画,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
截图如下:
实现代码:
index.wxml
<view class="clouds">
<image animation="{{animationCloudData}}" class="yun1" src="../../img/yun1.png"></image>
</view>
index.js
onReady: function () {
// 页面渲染完成
// 实例化一个动画
var that = this;
var i = 0
var ii = 0
var animationData = wx.createAnimation({
duration: 1000, // 默认为400 动画持续时间,单位ms
timingFunction: 'ease-in-out',
//transfORMOrigin: '4px 91px'
});
var animationCloudData = wx.createAnimation({
duration: 1000, // 默认为400 动画持续时间,单位ms
timingFunction: 'ease-in-out',
//transformOrigin: '4px 91px'
});
// 顺序执行,当已经执行完上面的代码就会开启定时器
// 循环执行代码
//dotAnFun = setInterval(function () {});
//动画的脚本定义必须每次都重新生成,不能放在循环外
animationCloudData.translateX(200).step({ duration: 5000 }).translateX(0).step({ duration: 5000 });
// 更新数据
that.setData({
// 导出动画示例
//animationData: animationData.export(),
animationCloudData: animationCloudData.export(),
})
setInterval(function () {
//动画的脚本定义必须每次都重新生成,不能放在循环外
animationCloudData.translateX(300).step({ duration: 5000 }).translateX(-100).step({ duration: 5000 });
// 更新数据
that.setData({
// 导出动画示例
//animationData: animationData.export(),
animationCloudData: animationCloudData.export(),
})
++ii;
console.log(ii);
}.bind(that),10000);//3000这里的设置如果小于动画step的持续时间的话会导致执行一半后出错
}
index.wxss
.clouds{
margin-top:320rpx;
}
.yun1{
width:320rpx;
height: 120rpx;
}
附:参考备用:
感谢你能够认真阅读完这篇文章,希望小编分享的“微信小程序开发中如何实现animation循环动画”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网node.js频道,更多相关知识等着你来学习!
--结束END--
本文标题: 微信小程序开发中如何实现animation循环动画
本文链接: https://www.lsjlt.com/news/68801.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0