feat(工具箱): 完善“原神时钟”,使用 CSS 计算实现图标高亮效果
This commit is contained in:
@@ -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 {
|
||||||
|
Reference in New Issue
Block a user