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

View file

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