From 2d8e7b4da759b23800d517ee5979fa83484faf00 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 31 Aug 2022 02:19:25 +0900
Subject: [PATCH] enhance(client): improve analog-clock
---
packages/client/src/components/MkAnalogClock.vue | 12 +++++++++---
packages/client/src/widgets/clock.vue | 12 ++++++++++++
2 files changed, 21 insertions(+), 3 deletions(-)
diff --git a/packages/client/src/components/MkAnalogClock.vue b/packages/client/src/components/MkAnalogClock.vue
index b709a22548..40ef626aed 100644
--- a/packages/client/src/components/MkAnalogClock.vue
+++ b/packages/client/src/components/MkAnalogClock.vue
@@ -40,7 +40,7 @@
<line
class="s"
- :class="{ animate: !disableSAnimate }"
+ :class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
@@ -99,6 +99,7 @@ const props = withDefaults(defineProps<{
twentyfour?: boolean;
graduations?: 'none' | 'dots' | 'numbers';
fadeGraduations?: boolean;
+ sAnimation?: 'none' | 'elastic' | 'easeOut';
}>(), {
numbers: false,
thickness: 0.1,
@@ -106,6 +107,7 @@ const props = withDefaults(defineProps<{
twentyfour: false,
graduations: 'dots',
fadeGraduations: true,
+ sAnimation: 'elastic',
});
const graduationsMajor = computed(() => {
@@ -161,7 +163,7 @@ function tick() {
disableSAnimate = false;
}, 100);
}, 100);
- }, 500);
+ }, 700);
} else {
sAngle = Math.PI * s / 30;
}
@@ -211,9 +213,13 @@ onBeforeUnmount(() => {
will-change: transform;
transform-origin: 50% 50%;
- &.animate {
+ &.animate.elastic {
transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
}
+
+ &.animate.easeOut {
+ transition: transform .7s cubic-bezier(0,.7,.3,1);
+ }
}
}
</style>
diff --git a/packages/client/src/widgets/clock.vue b/packages/client/src/widgets/clock.vue
index 660a1f0ecb..51d48b30a6 100644
--- a/packages/client/src/widgets/clock.vue
+++ b/packages/client/src/widgets/clock.vue
@@ -9,6 +9,7 @@
:graduations="widgetProps.graduations"
:fade-graduations="widgetProps.fadeGraduations"
:twentyfour="widgetProps.twentyFour"
+ :s-animation="widgetProps.sAnimation"
/>
<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :show-s="false" :offset="tzOffset"/>
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
@@ -70,6 +71,17 @@ const widgetPropsDef = {
type: 'boolean' as const,
default: true,
},
+ sAnimation: {
+ type: 'radio' as const,
+ default: 'elastic',
+ options: [{
+ value: 'none', label: 'None',
+ }, {
+ value: 'elastic', label: 'Elastic',
+ }, {
+ value: 'easeOut', label: 'Ease out',
+ }],
+ },
twentyFour: {
type: 'boolean' as const,
default: false,
--
GitLab