无限循环动画实现

先来个效果图

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

实现代码

	<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 = thissetTimeout(()=>{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 = animationthis.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_birthdayuni.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 = thissetTimeout(() => {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_birthdayuni.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>