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

一、效果

二、实现原理

       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>