无限循环动画实现

最新推荐文章于 2025-06-11 14:30:19 发布
原创 最新推荐文章于 2025-06-11 14:30:19 发布 · 3.8k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#动画 #循环动画 #动画循环 #小程序无限循环动画实现 #H5无限循环动画实现

本文展示了如何使用微信小程序实现元素先缩小移动，然后进行无限循环的左右晃动动画。通过实例代码，包括wx.createAnimation和setInterval，详细解释了动画的创建和控制过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

先来个效果图

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

实现代码

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

 

无限循环执行动画 - 实现持续动画效果的微信小程序
TiCrystal的博客
09-17 764
在微信小程序中，实现无限循环执行动画是一种常见的需求。你可以根据自己的需求，修改动画的类型、持续时间等参数，来实现不同的动画效果。通过以上步骤，我们就可以在微信小程序中实现一个持续旋转的动画效果。当页面加载时，动画会自动开始，并且会持续循环执行，直到页面关闭或者停止动画。最后，在小程序页面的 WXML 文件中，我们可以通过绑定动画数据来展示动画效果。首先，我们需要在小程序页面的代码中定义一个动画对象。方法来创建一个动画对象，并设置动画的初始状态。方法中，我们定义了一个旋转动画，并将动画数据通过。
[uni-app ] uni.createAnimation二次失效问题处理
apple_50717761的博客
03-22 672
搞了一上午的动画，查了很多博客，如果旋转是以中心点为锚点的话可以这样做，亲测有效。
uniapp uni.createAnimation为文件交换位置动画效果
最新发布
xiaohuli_hyr的博客
06-11 521
使用uni-app的uni.createAnimation实现文件列表位置交换动画效果的方法。通过创建动画实例，获取元素位置信息并计算相对位移，实现平滑的上下移动动画效果。
关于uni-app中的uni.createAnimation循环播放动画的问题
weixin_44243056的博客
07-30 6702
如图，在使用createAnimation的时候打算写一个setInterval循环播放一个图片上下移动的动画，在电脑上模拟iphoneX时能够循环播放，但是手机真机测试时只会播放一次。解决办法是调用translateY的值需要为随机值，即Math.random()。如果是准确的值就会导致无法循环播放，不太懂这个机制产生的原因，询问了官方也没有答复。 ...
uni-app使用CSS实现无限旋转动画
培根芝士的专栏
09-15 2039
本来想用uni.createAnimation创建一个旋转动画，发现转完一圈后就不动了，没法循环旋转，最后采用了下面的这种方式，直接用CSS来实现循环旋转动画。
uni-app无限滚动
Ice__wine的博客
06-24 3834
uni-app无限滚动 <template> <view> <view class="roll"> <view class="roll_con"> <view class="roll_list" v-for="(item,index) in rollList" :key="index" :animation="animationData"> <view class="roll_dot"></view&
uniapp中for循环动画 animation问题
dongfangyueguang的博客
04-03 5087
uniapp 官方例子中是一个单独的animation的例子， 实际开发中，可能会遇到很多for 循环出来的 要写动画的情况，今天遇到插件作者，特此来记录，也是给我一个开发思路，很不错 <view class="" style="height: 1000px;"> <view class="" v-for="(item,index) in list" :key="index"...
CSS动画实现背景无缝无限循环的实现示例
12-28
一张图片从左向右无限循环移动 2. 代码 由于是应用在移动端，故使用rem单位，后面问题也发生在这。 HTML <div class=dog></div> CSS .dog { width: 5.4rem; \\图片宽度 height: 3.04rem; \\图片高度 ...
iOS-多媒体-强大的动画-序列帧和无限循环动画-9Cheetah-serial-repeating
05-20
本资源"iOS-多媒体-强大的动画-序列帧和无限循环动画-9Cheetah-serial-repeating"深入探讨了这些概念，并提供了具体的实现方法。 首先，序列帧动画是一种通过连续播放一系列静态图像来创建动态效果的方法。在iOS中...
Android ViewPager无限循环实现底部小圆点动态滑动
09-02
本话题将详细介绍如何实现一个带有无限循环特性的`ViewPager`，以及底部小圆点动态滑动的实现方法。 首先，`ViewPager`本身并不支持无限循环，但可以通过自定义适配器和一些巧妙的逻辑来模拟这一效果。以下是一些...
Unity无限循环列表demo
07-08
在Unity中实现无限循环列表，通常会涉及到Unity的UI系统，包括Canvas、RectTransform、ScrollRect组件以及脚本编程。以下是一些关键知识点： 1. **ScrollRect组件**：这是Unity UI系统中的核心组件，用于实现滚动...
微信小程序 动画的简单实例
12-28
微信小程序——简易动画案例 wxml： <view class=container> <view animation={{animation}} class=view>我在做动画</view> </view> <button type=primary bindtap=translate>旋转</button> js： //js Page({ data: { }, onReady: function () { // 页面渲染完成 //实例化一个动画 this.animation = wx.createAnimation({ // 动画持续时间，单
用CSS3实现无限循环的无缝滚动的示例代码
12-02
【CSS3实现无限循环无缝滚动】在网页设计中，为了创建动态效果，有时我们需要让一些内容如新闻、公告等在页面上实现无限循环滚动。本文将详细介绍如何利用CSS3的特性来实现这一功能，尤其关注`transform`和`...
uni.createAnimation创建一个旋转动画，只能执行一次
weixin_48198334的博客
04-10 646
后来又用setInterval每隔一个周期就把旋转角度加180度，发现运行一段时间后动画逐渐崩坏，应该是动画的周期和定时器的周期时间没有完全吻合导致的。本来想用uni.createAnimation创建一个旋转动画，发现转完一圈后就不动了，没法循环旋转，最后采用了下面的这种方式，直接用CSS来实现循环旋转动画。
android 动画重复间隔,Animation动作完成后停顿一段时间再次重复
weixin_36079559的博客
05-26 1982
animation 周期动作，且中途停顿：publicvoidalwaysWave(){AnimationSetas=newAnimationSet(true);ScaleAnimationsa=newScaleAnimation(1f,ANIMATION_SCALE_MULTIPLE,1f,ANIMATION_SCALE_MULTIPLE,ScaleAnimatio...
uniapp动画的爬坑之路---循环动画不生效
陈小白
12-07 7370
看了官方文档发现没有动画循环这个功能，所有要我们自己写个定时器去重复执行，但今天在做跑马灯的时候发现，获取的元素的宽度后，无法循环播放，后来发现，不能输入固定值，只能输入随机数才可以实现无线循环动画效果 <template> <view class="home"> <view class="notice-box"> <view clas...
Animation组合动画踩坑-实现循环播放动画，可控制次数
tinyVampire的博客
07-15 3093
Animation组合动画踩坑-实现循环播放动画，可控制次数 比如说期望如下： 如果使用View动画，那么很自然的就想到了通过res/anim下的xml文件来实现，组合动画的话使用set标签即可。 直接这样做真的能生效么？且让我们一步一步实践。先提前剧透下，官网的demo也是有问题的。 赶时间只想看解决方式的同学，可以直接移步到最后一步的demo。 1、使用res/anim下的xml文件，实现组合动画顺序执行的坑。 动画的顺序执行是依靠的startOffset属性，它的值等于前面所有动画的duration
uniapp使用uni.createInnerAudioContext实现音频的循环播放、进度拖拽、倍速播放
JackChan
05-08 1620
uniapp使用uni.createInnerAudioContext实现音频的循环播放、进度拖拽、倍速播放
云朵左右移动循环动画实现（H5和小程序通用）
a_靖的博客
07-08 2783
云朵在页面左右循环移动动画实现示例图加完整源码，可自己设置云朵飘动的速度和距离。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

a_靖

对你有帮助吗？打赏鼓励一下？

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值