enhance(client): improve analog-clock

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>

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,