<template>
<image class="click-to-indoor-img" src="../../static/imgs/indoor.png" :animation="animationData" ></image>
</template>
<script>
export default {
data() {
return {
animationData: {}, // 在data中初始化animationData
};
},
onUnload() {
this.animationData = {}
// 页面关闭后清空数据
},
onReady: function(res) {
//初始化动画
this.animation = uni.createAnimation({
timingFunction: "ease-in-out",
})
//使用动画循环
//每2.5秒(2500 毫秒)做这个动作 :
setInterval(() => {
// 调用 step() 来表示一组动画完成(当前参数动画时间1s)
// step 可以配置参数用于指定当前组动画的配置。具体参数请看文档
this.animation.scale(1.07 + Math.random() * 0.01).step({
duration: 1000
})
this.animation.scale(1).step({
duration: 1000
})
// export方法导出动画数据
this.animationData = this.animation.export()
}, 2500)
},
}
</script>
<style>
.click-to-indoor-img{
position: fixed;
bottom: 770rpx;
right: 25rpx;
width: 170rpx;
height: 170rpx;
}
</style>
0 个回复