oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

refactor(frontend): MkNumberのアニメーションを内製してgsapを削除 (#12859)

Browse source 
* (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>
This commit is contained in:
かっこかり 2024-01-02 16:55:02 +09:00 • committed by GitHub
parent 09aba4cf16
commit 3187c6b28d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

21
packages/frontend/src/components/MkNumber.vue
View file

@ -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,
});