enhance(client): tweak clock

This commit is contained in:
syuilo 2022-08-27 00:40:20 +09:00
parent 773139b737
commit 0dfb9f8291
2 changed files with 43 additions and 3 deletions

View File

@ -26,6 +26,7 @@
</text>
</template>
<!--
<line
:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
:y1="5 + (Math.cos(sAngle) * (sHandLengthRatio * handsTailLength))"
@ -35,6 +36,20 @@
:stroke-width="thickness / 2"
stroke-linecap="round"
/>
-->
<line
class="s"
:class="{ animate: !disableSAnimate }"
:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
:y2="5 - (1 * ((sHandLengthRatio * 5) - handsPadding))"
:stroke="sHandColor"
:stroke-width="thickness / 2"
:style="`transform: rotateZ(${sAngle}rad)`"
stroke-linecap="round"
/>
<line
:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
@ -59,7 +74,7 @@
</template>
<script lang="ts" setup>
import { ref, computed, onMounted, onBeforeUnmount, shallowRef } from 'vue';
import { ref, computed, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue';
import tinycolor from 'tinycolor2';
import { globalEvents } from '@/events.js';
@ -125,6 +140,8 @@ let s = $ref<number>(0);
let hAngle = $ref<number>(0);
let mAngle = $ref<number>(0);
let sAngle = $ref<number>(0);
let disableSAnimate = $ref(false);
let sOneRound = false;
function tick() {
const now = new Date();
@ -134,7 +151,21 @@ function tick() {
h = now.getHours();
hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
mAngle = Math.PI * (m + s / 60) / 30;
sAngle = Math.PI * s / 30;
if (sOneRound) { // (59->0)
sAngle = Math.PI * 60 / 30;
window.setTimeout(() => {
disableSAnimate = true;
window.setTimeout(() => {
sAngle = 0;
window.setTimeout(() => {
disableSAnimate = false;
}, 100);
}, 100);
}, 500);
} else {
sAngle = Math.PI * s / 30;
}
sOneRound = s === 59;
}
tick();
@ -175,5 +206,14 @@ onBeforeUnmount(() => {
<style lang="scss" scoped>
.mbcofsoe {
display: block;
> .s {
will-change: transform;
transform-origin: 50% 50%;
&.animate {
transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
}
}
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<div class="mkw-unixClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
<div v-if="widgetProps.showLabel" class="label">UNIX time</div>
<div v-if="widgetProps.showLabel" class="label">UNIX Epoch</div>
<div class="time">
<span v-text="ss"></span>
<span v-if="widgetProps.showMs" class="colon" :class="{ showColon }">:</span>