diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2024-01-02 16:55:02 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-01-02 16:55:02 +0900 |
| commit | 3187c6b28dc1fdca0ff058c435346fa2f3f45619 (patch) | |
| tree | cf9051e18a0e74dbb28a726d8b0b360ff722295b /packages/frontend/src/components/MkNumber.vue | |
| parent | chore(backend/logger): log data for every level if exists (#12863) (diff) | |
| download | sharkey-3187c6b28dc1fdca0ff058c435346fa2f3f45619.tar.gz sharkey-3187c6b28dc1fdca0ff058c435346fa2f3f45619.tar.bz2 sharkey-3187c6b28dc1fdca0ff058c435346fa2f3f45619.zip | |
refactor(frontend): MkNumberのアニメーションを内製してgsapを削除 (#12859)
* (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>
Diffstat (limited to 'packages/frontend/src/components/MkNumber.vue')
| -rw-r--r-- | packages/frontend/src/components/MkNumber.vue | 21 |
1 files changed, 18 insertions, 3 deletions
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, }); |