Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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 <line
class="s" class="s"
:class="{ animate: !disableSAnimate }" :class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
:x1="5 - (0 * (sHandLengthRatio * handsTailLength))" :x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
:y1="5 + (1 * (sHandLengthRatio * handsTailLength))" :y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))" :x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
@ -99,6 +99,7 @@ const props = withDefaults(defineProps<{
twentyfour?: boolean; twentyfour?: boolean;
graduations?: 'none' | 'dots' | 'numbers'; graduations?: 'none' | 'dots' | 'numbers';
fadeGraduations?: boolean; fadeGraduations?: boolean;
sAnimation?: 'none' | 'elastic' | 'easeOut';
}>(), { }>(), {
numbers: false, numbers: false,
thickness: 0.1, thickness: 0.1,
@ -106,6 +107,7 @@ const props = withDefaults(defineProps<{
twentyfour: false, twentyfour: false,
graduations: 'dots', graduations: 'dots',
fadeGraduations: true, fadeGraduations: true,
sAnimation: 'elastic',
}); });
const graduationsMajor = computed(() => { const graduationsMajor = computed(() => {
@ -161,7 +163,7 @@ function tick() {
disableSAnimate = false; disableSAnimate = false;
}, 100); }, 100);
}, 100); }, 100);
}, 500); }, 700);
} else { } else {
sAngle = Math.PI * s / 30; sAngle = Math.PI * s / 30;
} }
@ -211,9 +213,13 @@ onBeforeUnmount(() => {
will-change: transform; will-change: transform;
transform-origin: 50% 50%; transform-origin: 50% 50%;
&.animate { &.animate.elastic {
transition: transform .2s cubic-bezier(.4,2.08,.55,.44); transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
} }
&.animate.easeOut {
transition: transform .7s cubic-bezier(0,.7,.3,1);
}
} }
} }
</style> </style>

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

@ -9,6 +9,7 @@
:graduations="widgetProps.graduations" :graduations="widgetProps.graduations"
:fade-graduations="widgetProps.fadeGraduations" :fade-graduations="widgetProps.fadeGraduations"
:twentyfour="widgetProps.twentyFour" :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"/> <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> <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, type: 'boolean' as const,
default: true, default: true,
}, },
sAnimation: {
type: 'radio' as const,
default: 'elastic',
options: [{
value: 'none', label: 'None',
}, {
value: 'elastic', label: 'Elastic',
}, {
value: 'easeOut', label: 'Ease out',
}],
},
twentyFour: { twentyFour: {
type: 'boolean' as const, type: 'boolean' as const,
default: false, default: false,