一、效果
二、实现原理
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改为widthANIMATION.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>
