From 3187c6b28dc1fdca0ff058c435346fa2f3f45619 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
<67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Tue, 2 Jan 2024 16:55:02 +0900
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20MkNumber=E3=81=AE?=
=?UTF-8?q?=E3=82=A2=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3?=
=?UTF-8?q?=E3=82=92=E5=86=85=E8=A3=BD=E3=81=97=E3=81=A6gsap=E3=82=92?=
=?UTF-8?q?=E5=89=8A=E9=99=A4=20(#12859)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* (refactor) MkNumberのアニメーションを内製
* 秒数調整
* fix
* fix pnpm-lock
* Update packages/frontend/src/components/MkNumber.vue
* Update packages/frontend/src/components/MkNumber.vue
---------
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
packages/frontend/package.json | 1 -
packages/frontend/src/components/MkNumber.vue | 21 ++++++++++++++++---
pnpm-lock.yaml | 19 ++++++-----------
3 files changed, 24 insertions(+), 17 deletions(-)
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 3b944046b7..864779fd9d 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -45,7 +45,6 @@
"escape-regexp": "0.0.1",
"estree-walker": "3.0.3",
"eventemitter3": "5.0.1",
- "gsap": "3.12.4",
"idb-keyval": "6.2.1",
"insert-text-at-cursor": "0.3.0",
"is-file-animated": "1.0.2",
diff --git a/packages/frontend/src/components/MkNumber.vue b/packages/frontend/src/components/MkNumber.vue
index aa04ab253b..1ba4d713b0 100644
--- a/packages/frontend/src/components/MkNumber.vue
+++ b/packages/frontend/src/components/MkNumber.vue
@@ -9,7 +9,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { reactive, watch } from 'vue';
-import gsap from 'gsap';
import number from '@/filters/number.js';
const props = defineProps<{
@@ -20,8 +19,24 @@ const tweened = reactive({
number: 0,
});
-watch(() => props.value, (n) => {
- gsap.to(tweened, { duration: 1, number: Number(n) || 0 });
+watch(() => props.value, (to, from) => {
+ // requestAnimationFrameを利用して、500msでfromからtoまでを1次関数的に変化させる
+ let start: number | null = null;
+
+ function step(timestamp: number) {
+ if (start === null) {
+ start = timestamp;
+ }
+ const elapsed = timestamp - start;
+ tweened.number = (from ?? 0) + (to - (from ?? 0)) * elapsed / 500;
+ if (elapsed < 500) {
+ window.requestAnimationFrame(step);
+ } else {
+ tweened.number = to;
+ }
+ }
+
+ window.requestAnimationFrame(step);
}, {
immediate: true,
});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b94a2cc548..562c90595e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -739,9 +739,6 @@ importers:
eventemitter3:
specifier: 5.0.1
version: 5.0.1
- gsap:
- specifier: 3.12.4
- version: 3.12.4
idb-keyval:
specifier: 6.2.1
version: 6.2.1
@@ -877,10 +874,10 @@ importers:
version: 7.6.5
'@storybook/vue3':
specifier: 7.6.5
- version: 7.6.5(@vue/compiler-core@3.3.12)(vue@3.4.3)
+ version: 7.6.5(@vue/compiler-core@3.4.3)(vue@3.4.3)
'@storybook/vue3-vite':
specifier: 7.6.5
- version: 7.6.5(@vue/compiler-core@3.3.12)(typescript@5.3.3)(vite@5.0.10)(vue@3.4.3)
+ version: 7.6.5(@vue/compiler-core@3.4.3)(typescript@5.3.3)(vite@5.0.10)(vue@3.4.3)
'@testing-library/vue':
specifier: 8.0.1
version: 8.0.1(@vue/compiler-sfc@3.4.3)(vue@3.4.3)
@@ -7314,7 +7311,7 @@ packages:
file-system-cache: 2.3.0
dev: true
- /@storybook/vue3-vite@7.6.5(@vue/compiler-core@3.3.12)(typescript@5.3.3)(vite@5.0.10)(vue@3.4.3):
+ /@storybook/vue3-vite@7.6.5(@vue/compiler-core@3.4.3)(typescript@5.3.3)(vite@5.0.10)(vue@3.4.3):
resolution: {integrity: sha512-7wUCq2Lrjlekftd5ha3hG0GSGbbzuc370cKkBqSmwFuOfI38z5+VeYt7nDtAlncxcpVSH7DejTGRuKTlC7NyYg==}
engines: {node: ^14.18 || >=16}
peerDependencies:
@@ -7322,7 +7319,7 @@ packages:
dependencies:
'@storybook/builder-vite': 7.6.5(typescript@5.3.3)(vite@5.0.10)
'@storybook/core-server': 7.6.5
- '@storybook/vue3': 7.6.5(@vue/compiler-core@3.3.12)(vue@3.4.3)
+ '@storybook/vue3': 7.6.5(@vue/compiler-core@3.4.3)(vue@3.4.3)
'@vitejs/plugin-vue': 4.5.2(vite@5.0.10)(vue@3.4.3)
magic-string: 0.30.5
vite: 5.0.10(@types/node@20.10.5)(sass@1.69.5)(terser@5.26.0)
@@ -7339,7 +7336,7 @@ packages:
- vue
dev: true
- /@storybook/vue3@7.6.5(@vue/compiler-core@3.3.12)(vue@3.4.3):
+ /@storybook/vue3@7.6.5(@vue/compiler-core@3.4.3)(vue@3.4.3):
resolution: {integrity: sha512-tv/9rVc3XXDOJu5hfZtKhrhM8x4GTLKon62Rmaxlq06weqkGlfBi/V/g1EZ7OE71Pi+woKS/TX7p9qbRrvgahg==}
engines: {node: '>=16.0.0'}
peerDependencies:
@@ -7351,7 +7348,7 @@ packages:
'@storybook/global': 5.0.0
'@storybook/preview-api': 7.6.5
'@storybook/types': 7.6.5
- '@vue/compiler-core': 3.3.12
+ '@vue/compiler-core': 3.4.3
lodash: 4.17.21
ts-dedent: 2.2.0
type-fest: 2.19.0
@@ -12981,10 +12978,6 @@ packages:
engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
dev: true
- /gsap@3.12.4:
- resolution: {integrity: sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ==}
- dev: false
-
/gunzip-maybe@1.4.2:
resolution: {integrity: sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==}
hasBin: true