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

feat: impl IdlingRenderScheduler (#10547)

Browse source 
* feat: impl IdleRender

* test: pin time on Chromatic

* test: pin time on Chromatic

* fix: typo

* style: rename

* style: rename

* chore: back to setTimeout

* style: linebreak

* refactor: remove unused budget option

* refactor: use raw unix time

* fix: conflict error

* fix: floor

* fix: subtract

* Revert "fix: subtract"

This reverts commit 2ef4afaafc69d2fb8329b04c1b124dfa97b7e863.

* Revert "fix: floor"

This reverts commit bef8ecdf45c6afc52138921d16e2caca78cfd38d.

* Revert "refactor: use raw unix time"

This reverts commit 5199e13cb2829f3036101f95445cca3cb9c83703.
This commit is contained in:
Acid Chicken (硫酸鶏) 2023-05-20 03:38:07 +09:00 • committed by GitHub
parent 1eb35dd5bc
commit ee3f408c7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 100 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

34
packages/frontend/src/components/MkAnalogClock.vue
View file

@ -39,6 +39,7 @@
-->
<line
ref="sLine"
:class="[$style.s, { [$style.animate]: !disableSAnimate && sAnimation !== 'none', [$style.elastic]: sAnimation === 'elastic', [$style.easeOut]: sAnimation === 'easeOut' }]"
:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
@ -73,9 +74,10 @@
</template>
<script lang="ts" setup>
import { computed, onMounted, onBeforeUnmount } from 'vue';
import { computed, onMounted, onBeforeUnmount, ref } from 'vue';
import tinycolor from 'tinycolor2';
import { globalEvents } from '@/events.js';
import { defaultIdlingRenderScheduler } from '@/scripts/idle-render.js';
// https://stackoverflow.com/questions/1878907/how-can-i-find-the-difference-between-two-angles
const angleDiff = (a: number, b: number) => {
@ -145,6 +147,7 @@ let mAngle = $ref<number>(0);
let sAngle = $ref<number>(0);
let disableSAnimate = $ref(false);
let sOneRound = false;
const sLine = ref<SVGPathElement>();
function tick() {
const now = props.now();
@ -160,17 +163,21 @@ function tick() {
}
hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
mAngle = Math.PI * (m + s / 60) / 30;
if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
if (sOneRound && sLine.value) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
sAngle = Math.PI * 60 / 30;
window.setTimeout(() => {
defaultIdlingRenderScheduler.delete(tick);
sLine.value.addEventListener('transitionend', () => {
disableSAnimate = true;
window.setTimeout(() => {
requestAnimationFrame(() => {
sAngle = 0;
window.setTimeout(() => {
requestAnimationFrame(() => {
disableSAnimate = false;
}, 100);
}, 100);
}, 700);
if (enabled) {
defaultIdlingRenderScheduler.add(tick);
}
});
});
}, { once: true });
} else {
sAngle = Math.PI * s / 30;
}
@ -194,20 +201,13 @@ function calcColors() {
calcColors();
onMounted(() => {
const update = () => {
if (enabled) {
tick();
window.setTimeout(update, 1000);
}
};
update();
defaultIdlingRenderScheduler.add(tick);
globalEvents.on('themeChanged', calcColors);
});
onBeforeUnmount(() => {
enabled = false;
defaultIdlingRenderScheduler.delete(tick);
globalEvents.off('themeChanged', calcColors);
});
</script>