uni vue3实现环形倒计时环形部分已过去的时间颜色#FFC627未过去的时间黑色透明度0.4 环形中间颜色为黑色透明度0.4 动态设置环形的进度不使用tweenjs

要在uni-app的Vue3中实现这样一个环形倒计时效果，我们可以利用CSS动画和组件状态管理来达到目标。首先，创建一个自定义的`RingCounter`组件，并设置初始样式：

<template>
  <view class="ring-counter">
    <view :style="{ background: pastTimeColor, opacity: '0.4' }" v-for="(time, index) in times" :key="index"></view>
    <view :style="{ backgroundColor: middleColor, opacity: '0.4', borderRadius: '50%' }" class="middle-circle"></view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

export default {
  name: 'RingCounter',
  props: {
    totalSeconds: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const pastTimeColor = ref('#FFC627');
    const currentTime = ref(0);
    const times = computed(() => {
      let progress = (currentTime.value / props.totalSeconds) * 360;
      return Array.from({ length: Math.floor(props.totalSeconds) + 1 }, (_, i) => ({
        startAngle: i === 0 ? 0 : progress - 360 / (props.totalSeconds + 1),
        endAngle: i === 0 ? progress : progress - 360 / (props.totalSeconds + 1),
        completed: i >= currentTime.value,
      }));
    });

    // 更新倒计时
    function updateTimer() {
      currentTime.value++;
      if (currentTime.value > props.totalSeconds) {
        currentTime.value = 0;
      }
    }

    setInterval(updateTimer, 1000); // 每秒更新一次
  },
}
</script>

<style scoped>
.ring-counter {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.middle-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
}
</style>

在这个例子中，我们使用了Vue的ref和computed属性来动态计算每个时间块的颜色和完成状态。`pastTimeColor`用于存储已经过去的颜色，`currentTime`表示当前的秒数。每秒通过`updateTimer`函数递增`currentTime`并更新视图。

关于颜色的过渡动画，这里并未使用第三方库如`tweenjs`，而是依赖CSS的内建动画特性。当倒计时变化时，中间圈的颜色会平滑地从透明度0.4变为完全透明（或者其他颜色），以模拟动态效果。