无限循环动画实现

先来个效果图

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

实现代码

	<image class="element1" @load="element1_load" :animation="animationData" src="../../static/element1.png" mode="widthFix"></image>

JS


	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)
			},
    }

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

 

代码

<template>
	<view>
		<!-- <sliderBar max='90' min='20' @change='change'></sliderBar> -->

		<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>

第三版本

效果图

<template>
	<view>
		<!-- <sliderBar max='90' min='20' @change='change'></sliderBar> -->
		<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>

 

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值