mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-11-25 15:46:17 +09:00
Code

enhance(client): improve analog-clock

Browse Source
This commit is contained in:
syuilo 2022-08-31 02:19:25 +09:00
parent 786b150ea7
commit 2d8e7b4da7
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/client/src/components/MkAnalogClock.vue
View File

@ -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>

12
packages/client/src/widgets/clock.vue
View File

@ -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,