uniapp使用css实现进度条带动画过渡效果

原创于 2025-07-25 18:03:15 发布 · 484 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #uni-app #css #vue

一、效果

二、实现原理

1.uni.createAnimation 动画函数

2.初始化uni.createAnimation方法

3.监听值的变化调用动画执行方法

三、代码

1.实现方式比较简单，目前是vue3的写法，vue2只需要稍微改动即可

<template>
	<view class="layout_progress">
		<view class="progress_step" :animation="animationData" :style="{background:activeColor}"></view>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch } from "vue";
	const { count, activeColor } = defineProps({
		count: {                        //数量
			type: [String, Number],
			default: 0
		},
		activeColor: {                 //进度条颜色
			type: String,
			default: "red"
		}
	})
	const animationData = ref({});
	const animation = ref(null);
	//设置动画
	const setAnimation = ():void => {
		const ANIMATION = animation.value;
        //转换成百分比，自己定义数据类型，如果是横向排列的，将height改为width
		ANIMATION.height(`${count}%`).step();    
		animationData.value = ANIMATION.export()
	}
	//初始化动画
	const initAnimation = () : void => {        
		const ANIMATION = uni.createAnimation({
			duration: 1000,
			timingFunction: 'ease',
		})
		animation.value = ANIMATION;
	}
	//执行
	initAnimation()
	//监听值的变化，只要当值变化或存在才会执行动画方法
	watch(() => count, (newV, oldV) =>
		newV && setAnimation(), {
		immediate: true
	})
</script>

<style scoped lang="scss">
	.layout_progress {
		width: 16rpx;
		height: 112rpx;
		background: #F3F4F6;
		border-radius: 8rpx;
		transform: rotate(180deg);    //因为是竖向排列的，所有要翻转180°
	}

	.progress_step {
		width: 16rpx;
		height: 0rpx;                //如果是横向排列的，只需要改动width属性
		border-radius: 8rpx;
	}
</style>