无限循环动画实现

深藏阁楼爱情的钟 2022-11-12 08:25 254阅读 0赞

先来个效果图

![20210323111313446.gif][]

示例代码是先缩小移动，然后无限循环左右晃动，希望能够帮助到你，点个赞吧~

实现代码

var animation, that, ani_start_time=600;
    
    		data() {
    			return {
    				animationData: {},
    				animation: {},
    			}
    		},
    		onLoad(option) {
    			that = this
    		},
    		methods: {
    			element1_load() {
    				var animation = wx.createAnimation({})
    				var data = {
    					duration: 150,
    					timingFunction: 'linear',
    					delay: 1
    				}
    				//设置循环动画
    				animation.translateX(80).scale(.34, .34).step({
    					duration: ani_start_time,
    					delay: 10
    				})
    				this.animationData = animation.export()
    				var next = true;
    				setTimeout(() => {
    					setInterval(() => {
    						if (next) {
    							animation.rotate(3).step(data)
    						} else {
    							animation.rotate(-3).step(data)
    						}
    						next = !next;
    						this.animationData = animation.export()
    					}, 150)
    				}, ani_start_time)
    			},
        }

看一下完整代码页面的效果图

![20210323163030859.gif][]

代码

<template>
    	<view>
    		
    
    		<image class="bg" mode="widthFix"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/1_bg.png"></image>
    
    		<image class="title_img" @load="title_load" :animation="animationData_title_img"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/1_title.png" mode="widthFix">
    		</image>
    
    		<image v-if="a_show" class="element1" @load="element1_load" :animation="animationData"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/element1.png" mode="widthFix">
    		</image>
    
    		<image v-if="b_show" class="element2" @load="element2_load" :animation="animationData2"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/element2.png" mode="widthFix">
    		</image>
    
    		<image v-if="c_show" class="element3" @load="element3_load" :animation="animationData3"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/element3.png" mode="widthFix">
    		</image>
    
    		<image v-if="d_show" class="element4" @load="element4_load" :animation="animationData4"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/element4.png" mode="widthFix">
    		</image>
    
    		<image @load="btn_load" :animation="animationData_btn"  class="btnImg" mode="widthFix" @click="nav"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/1_btn.png"></image>
    	</view>
    
    </template>
    
    <script>
    	var that;
    	var ani_start_time = 400,delay=300;
    	import sliderBar from "@/components/sliderBar.vue"
    	export default {
    		components: {
    			sliderBar
    		},
    		data() {
    			return {
    				a_show:false,
    				b_show:false,
    				c_show:false,
    				d_show:false,
    				animationData_btn:false,
    				animationData: {},
    				animationData2: {},
    				animationData3: {},
    				animationData4: {},
    				anima_if: false,
    				show_gou: false,
    				animationData_title_img: {},
    			}
    		},
    		onLoad(option) {
    			that = this
    			setTimeout(()=>{
    				this.a_show=true
    			},500)
    			setTimeout(()=>{
    				this.b_show=true
    			},1000)
    			setTimeout(()=>{
    				this.c_show=true
    			},1500)
    			setTimeout(()=>{
    				this.d_show=true
    			},2000)
    		},
    		methods: {
    			// 按钮加载完成
    			btn_load() {
    				console.log('按钮加载完成')
    				setTimeout(()=>{
    					var animation_btn = uni.createAnimation({
    						duration: ani_start_time*7.5,
    						timingFunction: 'linear',
    						delay: delay
    					})
    					animation_btn.translateY(-120).step()
    					this.animationData_btn = animation_btn.export()
    					
    					var data = {
    						duration: 450,
    						timingFunction: 'linear',
    						delay: 1
    					}
    					var next = true;
    					setTimeout(() => {
    						setInterval(() => {
    							if (next) {
    								animation_btn.scale(1.05).step(data)
    							} else {
    								animation_btn.scale(0.95).step(data)
    							}
    							next = !next;
    							this.animationData_btn = animation_btn.export()
    						}, 450)
    					}, ani_start_time*7.5)
    				},2300)
    			},
    			// 标题图片加载完成
    			title_load() {
    				console.log('标题图片加载完成')
    				setTimeout(()=>{
    					var animation_title_img = uni.createAnimation({
    						duration: ani_start_time,
    						timingFunction: 'linear',
    						delay: delay
    					})
    					animation_title_img.translateX(-510).step()
    					animation_title_img.translateX(-500).step()
    					animation_title_img.translateX(-505).step()
    					this.animationData_title_img = animation_title_img.export()
    					
    				},2100)
    			},
    			element2_load() {
    				var animation = wx.createAnimation({})
    				var data = {
    					duration: 150,
    					timingFunction: 'linear',
    					delay: 1
    				}
    				//设置循环动画
    				animation.translateX(50).scale(.34, .34).step({
    					duration: ani_start_time,
    					delay: delay
    				})
    				var next = true;
    				setTimeout(() => {
    					setInterval(() => {
    						if (next) {
    							animation.rotate(3).step(data)
    						} else {
    							animation.rotate(-3).step(data)
    						}
    						next = !next;
    						this.animationData2 = animation.export()
    					}, 150)
    				}, ani_start_time)
    			},
    			element3_load() {
    				var animation = wx.createAnimation({})
    				var data = {
    					duration: 150,
    					timingFunction: 'linear',
    					delay: 1
    				}
    				//设置循环动画
    				animation.translateX(-80).scale(.34, .34).step({
    					duration: ani_start_time,
    					delay: delay
    				})
    				var next = true;
    				setTimeout(() => {
    					setInterval(() => {
    						if (next) {
    							animation.rotate(3).step(data)
    						} else {
    							animation.rotate(-3).step(data)
    						}
    						next = !next;
    						this.animationData3 = animation.export()
    					}, 150)
    				}, ani_start_time)
    			},
    			element4_load() {
    				var animation = wx.createAnimation({})
    				var data = {
    					duration: 150,
    					timingFunction: 'linear',
    					delay: 1
    				}
    				//设置循环动画
    				animation.translateX(-40).scale(.34, .34).step({
    					duration: ani_start_time,
    					delay: delay
    				})
    				var next = true;
    				setTimeout(() => {
    					setInterval(() => {
    						if (next) {
    							animation.rotate(3).step(data)
    						} else {
    							animation.rotate(-3).step(data)
    						}
    						next = !next;
    						this.animationData4 = animation.export()
    					}, 150)
    				}, ani_start_time)
    			},
    			// 元素1加载完成
    			element1_load() {
    				var animation = wx.createAnimation({})
    				var data = {
    					duration: 150,
    					timingFunction: 'linear',
    					delay: 1
    				}
    				//设置循环动画
    				this.animation = animation
    				this.animation.translateX(80).scale(.34, .34).step({
    					duration: ani_start_time,
    					delay: delay
    				})
    				this.animationData = animation.export()
    				var next = true;
    				setTimeout(() => {
    					setInterval(() => {
    						if (next) {
    							this.animation.rotate(3).step(data)
    						} else {
    							this.animation.rotate(-3).step(data)
    						}
    						next = !next;
    						this.animationData = animation.export()
    					}, 150)
    				}, ani_start_time)
    			},
    			nav() {
    				this.$request(this.$api.Baby.babyList).then(res => {
    					console.log(res)
    					if (res.data.baby_list.length > 0) {
    						var id = res.data.baby_list[0].id;
    						let data = {
    							baby_id: id
    						}
    						uni.setStorageSync('baby_id', id)
    						this.$request(this.$api.Baby.babyGrowList, data).then(ress => {
    							console.log('aaaaaaaaa', ress)
    							if (ress.data.grow_info_list.length > 0) {
    								var baby_birthday = ress.data.baby_info.baby_birthday
    								uni.setStorageSync('baby_birthday', baby_birthday)
    								uni.navigateTo({
    									url: '../babyGrowthRecord/babyGrowthRecord'
    								})
    							} else {
    								uni.navigateTo({
    									url: '../addGrowthRecord/addGrowthRecord'
    								})
    							}
    						})
    					} else {
    						uni.reLaunch({
    							url: '../addInfo/addInfo'
    						})
    					}
    				})
    			},
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    
    
    	.bg {
    		width: 100%;
    	}
    
    	img {
    		display: block;
    	}
    
    	.element1 {
    		position: absolute;
    		top: 140rpx;
    		right: 0;
    		width: 420rpx;
    		height: 420rpx;
    		z-index: 2;
    	}
    
    	.element2 {
    		position: absolute;
    		top: 490rpx;
    		right: 30rpx;
    		width: 320rpx;
    		height: 320rpx;
    		z-index: 2;
    	}
    
    	.element3 {
    		position: absolute;
    		top: 740rpx;
    		left: 180rpx;
    		width: 280rpx;
    		height: 280rpx;
    		z-index: 2;
    	}
    
    	.element4 {
    		position: absolute;
    		top: 690rpx;
    		left: 0;
    		width: 240rpx;
    		height: 240rpx;
    		z-index: 2;
    	}
    
    	.title_img {
    		position: absolute;
    		top: 30rpx;
    		right: -950rpx;
    		width: 96%;
    		z-index: 2;
    	}
    
    	.btnImg {
    		position: absolute;
    		bottom: -100rpx;
    		left: 15%;
    		width: 70%;
    		height: 80rpx;
    		z-index: 2;
    		// background-color: red;
    
    	}
    
    	.bottomBlock {
    		position: relative;
    
    		.gou_block {
    			position: absolute;
    			bottom: 20rpx;
    			width: 40%;
    			left: 30%;
    			height: 60rpx;
    
    		}
    
    		.home_gou {
    			width: 46rpx;
    			position: absolute;
    			bottom: 20rpx;
    			left: 11%;
    		}
    	}
    </style>

第三版本

效果图

![20210324183757730.gif][]

<template>
    	<view>
    		
    		<image class="bg" mode="widthFix"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/1_bg1.png"></image>
    
    		<image class="bg3" mode="widthFix"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/1_bg33.gif"></image>
    		<image class="bg2" mode="widthFix"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/1_bg2.png"></image>
    
    		<image class="title_img" @load="title_load" :animation="animationData_title_img"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/1_title.png" mode="widthFix">
    		</image>
    
    		<image v-if="a_show" :class="!animationData?'anima':''" class="element1 " @load="element1_load" :animation="animationData"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/element1.png" mode="widthFix">
    		</image>
    
    		<image v-if="b_show" :class="!animationData2?'anima':''" class="element2 " @load="element2_load" :animation="animationData2"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/element2.png" mode="widthFix">
    		</image>
    
    		<image v-if="c_show" :class="!animationData3?'anima':''" class="element3 " @load="element3_load" :animation="animationData3"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/element3.png" mode="widthFix">
    		</image>
    
    		<image v-if="d_show" :class="!animationData4?'anima':''" class="element4 " @load="element4_load" :animation="animationData4"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/element4.png" mode="widthFix">
    		</image>
    
    		<image v-if="btn_show" class="btnImg anima" mode="widthFix" @click="nav"
    			src="cloud://yun-6g7hq5oz4c910180.7975-yun-6g7hq5oz4c910180-1305191802/static/1_btn.png"></image>
    	</view>
    
    </template>
    
    <script>
    	var that;
    	var ani_start_time = 400,
    		delay = 300;
    	import sliderBar from "@/components/sliderBar.vue"
    	export default {
    		components: {
    			sliderBar
    		},
    		data() {
    			return {
    				a_show: false,
    				b_show: false,
    				c_show: false,
    				d_show: false,
    				btn_show: false,
    				animationData_btn: false,
    				animationData: {},
    				animationData2: {},
    				animationData3: {},
    				animationData4: {},
    				anima_if: false,
    				show_gou: false,
    				animationData_title_img: {},
    			}
    		},
    		onLoad(option) {
    			that = this
    			setTimeout(() => {
    				this.a_show = true
    			}, 500)
    			setTimeout(() => {
    				this.b_show = true
    			}, 1000)
    			setTimeout(() => {
    				this.c_show = true
    			}, 1500)
    			setTimeout(() => {
    				this.d_show = true
    			}, 2000)
    			setTimeout(() => {
    				this.btn_show = true
    			}, 4400)
    		},
    		methods: {
    			// 元素1加载完成
    			element1_load() {
    				var animation = wx.createAnimation({})
    				var data = {
    					duration: 150,
    					timingFunction: 'linear',
    					delay: 1
    				}
    				animation.translateX(-510).step(data)
    				this.animationData = animation.export()
    				setTimeout(() => {
    					animation.translateX(0).step(data)
    					this.animationData = animation.export()
    				}, 150)
    				setTimeout(() => {				
    					this.animationData=false
    				}, 300)
    			},
    			// 标题图片加载完成
    			title_load() {
    				console.log('标题图片加载完成')
    				setTimeout(() => {
    					var animation_title_img = uni.createAnimation({
    						duration: ani_start_time,
    						timingFunction: 'linear',
    						delay: delay
    					})
    					animation_title_img.translateX(-500).step()
    					animation_title_img.translateX(-490).step()
    					animation_title_img.translateX(-495).step()
    					this.animationData_title_img = animation_title_img.export()
    
    				}, 2000)
    			},
    			element2_load() {
    				var animation = wx.createAnimation({})
    				var data = {
    					duration: 150,
    					timingFunction: 'linear',
    					delay: 1
    				}
    				animation.translateX(-510).step(data)
    				this.animationData2 = animation.export()
    				setTimeout(() => {
    					animation.translateX(0).step(data)
    					this.animationData2 = animation.export()
    				}, 150)
    				setTimeout(() => {				
    					this.animationData2 =false
    				}, 300)
    			},
    			element3_load() {
    				var animation = wx.createAnimation({})
    				var data = {
    					duration: 150,
    					timingFunction: 'linear',
    					delay: 1
    				}
    				animation.translateX(-510).step(data)
    				this.animationData3 = animation.export()
    				setTimeout(() => {
    					animation.translateX(0).step(data)
    					this.animationData3 = animation.export()
    				}, 150)
    				setTimeout(() => {				
    					this.animationData3=false
    				}, 300)
    			},
    			element4_load() {
    				var animation = wx.createAnimation({})
    				var data = {
    					duration: 150,
    					timingFunction: 'linear',
    					delay: 0
    				}
    				animation.translateX(-510).step(data)
    				this.animationData4 = animation.export()
    				setTimeout(() => {
    					animation.translateX(0).step(data)
    					this.animationData4 = animation.export()
    				}, 150)
    				setTimeout(() => {				
    					this.animationData4=false
    				}, 300)
    			},
    			nav() {
    				this.$request(this.$api.Baby.babyList).then(res => {
    					console.log(res)
    					if (res.data.baby_list.length > 0) {
    						var id = res.data.baby_list[0].id;
    						let data = {
    							baby_id: id
    						}
    						uni.setStorageSync('baby_id', id)
    						this.$request(this.$api.Baby.babyGrowList, data).then(ress => {
    							console.log('aaaaaaaaa', ress)
    							if (ress.data.grow_info_list.length > 0) {
    								var baby_birthday = ress.data.baby_info.baby_birthday
    								uni.setStorageSync('baby_birthday', baby_birthday)
    								uni.navigateTo({
    									url: '../babyGrowthRecord/babyGrowthRecord'
    								})
    							} else {
    								uni.navigateTo({
    									url: '../addGrowthRecord/addGrowthRecord'
    								})
    							}
    						})
    					} else {
    						uni.reLaunch({
    							url: '../addInfo/addInfo'
    						})
    					}
    				})
    			},
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.bg {
    		width: 100%;
    		z-index: -1;
    		position: absolute;
    		top: 0;
    	}
    
    	.bg3 {
    		width: 100%;
    		z-index: 1;
    		position: absolute;
    		top: 240rpx;
    	}
    
    	.bg2 {
    		width: 100%;
    		z-index: 1;
    		position: absolute;
    		top: 310rpx;
    	}
    
    	img {
    		display: block;
    	}
    
    	.element1 {
    		position: absolute;
    		top: 260rpx;
    		right: 0;
    		width: 120rpx;
    		height: 120rpx;
    		z-index: 2;
    	}
    
    	.element2 {
    		position: absolute;
    		top: 640rpx;
    		right: 40rpx;
    		width: 100rpx;
    		height: 100rpx;
    		z-index: 2;
    	}
    
    	.element3 {
    		position: absolute;
    		top: 820rpx;
    		left: 100rpx;
    		width: 110rpx;
    		height: 110rpx;
    		z-index: 2;
    	}
    
    	.element4 {
    		position: absolute;
    		top: 790rpx;
    		left: 0;
    		width: 90rpx;
    		height: 90rpx;
    		z-index: 2;
    	}
    
    	.title_img {
    		position: absolute;
    		top: 30rpx;
    		right: -950rpx;
    		width: 96%;
    		z-index: 2;
    	}
    
    	.btnImg {
    		position: absolute;
    		top: 990rpx;
    		left: 15%;
    		width: 70%;
    		height: 80rpx;
    		z-index: 2;
    		// background-color: red;
    
    	}
    
    	.anima {
    		animation-name: likes; // 动画名称
    		animation-direction: alternate; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
    		animation-timing-function: linear; // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；
    		animation-delay: 0s; // 动画延迟时间
    		animation-iteration-count: infinite; //  动画播放次数，infinite：一直播放
    		animation-duration: 1s; // 动画完成时间
    	}
    
    	@keyframes likes {
    		0% {
    			transform: scale(1);
    		}
    
    		25% {
    			transform: scale(0.9);
    		}
    
    		50% {
    			transform: scale(0.85);
    		}
    
    		75% {
    			transform: scale(0.9);
    		}
    
    		100% {
    			transform: scale(1);
    		}
    	}
    
    	.bottomBlock {
    		position: relative;
    
    		.gou_block {
    			position: absolute;
    			bottom: 20rpx;
    			width: 40%;
    			left: 30%;
    			height: 60rpx;
    
    		}
    
    		.home_gou {
    			width: 46rpx;
    			position: absolute;
    			bottom: 20rpx;
    			left: 11%;
    		}
    	}
    </style>

[20210323111313446.gif]: https://img-blog.csdnimg.cn/20210323111313446.gif
[20210323163030859.gif]: /images/20221022/31cb6bf6e9624389bf315ea1ff06e707.png
[20210324183757730.gif]: /images/20221022/a17277314433494d8971a3398b26723f.png