uniapp 背景动画 执行一次

接着前两篇博客，做出来背景动画以后，客户要求进 app 时执

行一次动画，到退出app 之前，都不再执行动画。因为这个动画是在首页加的，所以就是刚进app 时在首页执行动画，跳转其他页面回来动画也不执行。

首页的     

template：

   在template 里  稍加改动     加了一个 v-if 用来控制动画图片的显示隐藏

<view v-if="haveimg">
<image :src="item.url" mode="" class="img" v-for="(item,i) in images" :key='i' :style="{left:item.left,width:item.width,height:item.height;
animationDuration:item.animationDuration,animationDelay:item.animationDelay}"></image>
</view>

js：

<script>
	export default {
		data() {
			return {
				haveimg: false,  //  让图片先隐藏
			}
		},
		onShow() {
                //  让图片的显示隐藏 与 缓存连在一起 
			this.haveimg = uni.getStorageSync('haveAninmation');
			this.numimg();
		},
		onHide() {
                // 随便设一个缓存  
			uni.setStorageSync('haveAninmation', false);
		},
		methods: {
			// 背景图片动画
			numimg() {
				var url = this.images[Math.floor(Math.random() * this.images.length)];
				console.log(url);
				for (var i = 0; i < this.images.length; i++) {
					this.images[i].left = randomNum(5, 90).toFixed(0) + '%';
					this.images[i].width = randomNum(56,75).toFixed(0)+'upx';
					this.images[i].height = this.images[i].width;
					this.images[i].animationDuration = randomNum(5,8).toFixed(1)+'s';
					this.images[i].animationDelay = randomNum(0,4).toFixed(1)+'s';
				}
			},
			
		}
	}
</script>

css：

//  客户要求说就掉1次   所以animation-iteration-count 次数 是 1  不是 infinite（无限次）

.img {
		position: absolute;
		top: -80upx;
		z-index: 99;
		animation: snow   1s  linear  1 ;
	}

要在 登录页 也要加关于缓存的东西

点击登录按钮的时候，在登录的方法里  要加上：

login() {
	uni.setStorageSync('haveAninmation', true);
}

来源：CSDN

作者：Bing_lemon

链接：https://blog.csdn.net/Bing_lemon/article/details/103662992