feat(工具箱): 完善“原神时钟”,使用 CSS 计算实现图标高亮效果

This commit is contained in:
2024-10-13 00:33:03 +08:00
parent 6516fe4905
commit 81b714333a

View File

@@ -52,10 +52,22 @@
<!-- 表盘 --> <!-- 表盘 -->
<div class="clock-dial bg-contain"> <div class="clock-dial bg-contain">
<div class="time-icons"> <div class="time-icons">
<div class="time-morning bg-contain"></div> <div
<div class="time-noon bg-contain"></div> class="time-morning bg-contain"
<div class="time-dusk bg-contain"></div> style="--self-angle-1: 270; --self-angle-2: 270;"
<div class="time-night bg-contain"></div> ></div>
<div
class="time-noon bg-contain"
style="--self-angle-1: 0; --self-angle-2: 360;"
></div>
<div
class="time-dusk bg-contain"
style="--self-angle-1: 90; --self-angle-2: 90;"
></div>
<div
class="time-night bg-contain"
style="--self-angle-1: 180; --self-angle-2: 180;"
></div>
</div> </div>
</div> </div>
@@ -107,8 +119,8 @@ const clockState = reactive({
/** 下层指针状态 */ /** 下层指针状态 */
const lowerPointer = reactive({ const lowerPointer = reactive({
/** 视图角度 */ /** 视图角度,用于显示 */
viewAngle: 60, viewAngle: 0,
}); });
@@ -118,11 +130,11 @@ const upperPointer = reactive({
/** 是否为第二圈 */ /** 是否为第二圈 */
isSecond: false, isSecond: false,
/** 实际角度 */ /** 上层指针与下层指针相差的角度 */
dataAngle: 0, dataAngle: 0,
/** 视图角度 */ /** 视图角度,用于显示和交互 */
viewAngle: 60, viewAngle: 0,
}); });
@@ -144,7 +156,9 @@ const elStyle = computed(() => {
'--image-time-icon-night': IMAGE_TIME_ICON_NIGHT, '--image-time-icon-night': IMAGE_TIME_ICON_NIGHT,
'--image-time-icon-noon': IMAGE_TIME_ICON_NOON, '--image-time-icon-noon': IMAGE_TIME_ICON_NOON,
'--pointer-lower-angle': `${lowerPointer.viewAngle}deg`, '--pointer-lower-angle': `${lowerPointer.viewAngle}deg`,
'--pointer-lower-angle-value': lowerPointer.viewAngle,
'--pointer-upper-angle': `${upperPointer.viewAngle}deg`, '--pointer-upper-angle': `${upperPointer.viewAngle}deg`,
'--pointer-upper-angle-value': upperPointer.viewAngle,
}; };
}); });
@@ -554,13 +568,28 @@ onBeforeUnmount(() => {
height: 100%; height: 100%;
> div { > div {
// [角度 1 相关计算]
// 计算指针角度与图标所在角度的差值(可能为负数)
--angle-1-diff: calc(var(--self-angle-1) - var(--pointer-lower-angle-value));
// 计算角度差值的绝对值
--angle-1-abs: ~"max(var(--angle-1-diff), var(--angle-1-diff) * -1)";
// 限制角度最大差值为 90
--angle-1-use: ~"min(90, var(--angle-1-abs))";
// [角度 2 相关计算,主要用于 360°]
// 计算指针角度与图标所在角度的差值(可能为负数)
--angle-2-diff: calc(var(--self-angle-2) - var(--pointer-lower-angle-value));
// 计算角度差值的绝对值
--angle-2-abs: ~"max(var(--angle-2-diff), var(--angle-2-diff) * -1)";
// 限制角度最大差值为 90
--angle-2-use: ~"min(90, var(--angle-2-abs))";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 1; // 根据角度计算透明度
// transition: opacity 1s; // 注:计算两个角度的透明度,取最大值
opacity: ~"calc((90 - min(var(--angle-1-use), var(--angle-2-use))) / 90)";
} }
.time-morning { .time-morning {