一、效果

二、實現原理

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