feat(ui): 星空背景组件支持过渡动画类型

- 导入 Transition 类型以支持动画过渡配置
- 为星层1添加明确的 Transition 类型注解
- 为星层2添加明确的 Transition 类型注解
- 为星层3添加明确的 Transition 类型注解
- 统一设置缓动函数为常量 "linear"
- 确保各星层动画持续时间按倍数递增
This commit is contained in:
coolxitech
2025-12-17 22:25:36 +08:00
parent bd24ca02ae
commit f30676df07

View File

@@ -88,7 +88,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { SpringOptions } from "motion-v"; import type {SpringOptions, Transition} from "motion-v";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { motion, useMotionValue, useSpring } from "motion-v"; import { motion, useMotionValue, useSpring } from "motion-v";
import { computed, onMounted, ref, watch } from "vue"; import { computed, onMounted, ref, watch } from "vue";
@@ -156,21 +156,21 @@ watch(
}, },
); );
const starLayer1Transition = computed(() => ({ const starLayer1Transition = computed<Transition>(() => ({
repeat: Infinity, repeat: Infinity,
duration: props.speed, duration: props.speed,
ease: "linear", ease: "linear" as const,
})); }));
const starLayer2Transition = computed(() => ({ const starLayer2Transition = computed<Transition>(() => ({
repeat: Infinity, repeat: Infinity,
duration: props.speed * 2, duration: props.speed * 2,
ease: "linear", ease: "linear" as const,
})); }));
const starLayer3Transition = computed(() => ({ const starLayer3Transition = computed<Transition>(() => ({
repeat: Infinity, repeat: Infinity,
duration: props.speed * 3, duration: props.speed * 3,
ease: "linear", ease: "linear" as const,
})); }));
</script> </script>