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

一、效果

二、实现原理

       1.uni.createAnimation 动画函数

        2.初始化uni.createAnimation方法

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

 三、代码

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

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}).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;}