diff --git a/packages/client/src/components/analog-clock.vue b/packages/client/src/components/analog-clock.vue index b138bfcb46..b709a22548 100644 --- a/packages/client/src/components/analog-clock.vue +++ b/packages/client/src/components/analog-clock.vue @@ -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> diff --git a/packages/client/src/widgets/unix-clock.vue b/packages/client/src/widgets/unix-clock.vue index c9e2b4b92a..cf85ac782c 100644 --- a/packages/client/src/widgets/unix-clock.vue +++ b/packages/client/src/widgets/unix-clock.vue @@ -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>