mirror of
https://github.com/setube/ogame-vue-ts.git
synced 2026-05-12 07:55:11 +08:00
feat(ui): 星空背景组件支持过渡动画类型
- 导入 Transition 类型以支持动画过渡配置 - 为星层1添加明确的 Transition 类型注解 - 为星层2添加明确的 Transition 类型注解 - 为星层3添加明确的 Transition 类型注解 - 统一设置缓动函数为常量 "linear" - 确保各星层动画持续时间按倍数递增
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user