1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<span :class="$style.root">
<span ref="el" style="display: inline-block;">
<slot></slot>
</span>
<!-- なぜか path に対する key が機能しないため
<svg :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg">
<path v-for="particle in particles" :key="particle.id" style="transform-origin: center; transform-box: fill-box;"
:transform="`translate(${particle.x} ${particle.y})`"
:fill="particle.color"
d="M29.427,2.011C29.721,0.83 30.782,0 32,0C33.218,0 34.279,0.83 34.573,2.011L39.455,21.646C39.629,22.347 39.991,22.987 40.502,23.498C41.013,24.009 41.653,24.371 42.354,24.545L61.989,29.427C63.17,29.721 64,30.782 64,32C64,33.218 63.17,34.279 61.989,34.573L42.354,39.455C41.653,39.629 41.013,39.991 40.502,40.502C39.991,41.013 39.629,41.653 39.455,42.354L34.573,61.989C34.279,63.17 33.218,64 32,64C30.782,64 29.721,63.17 29.427,61.989L24.545,42.354C24.371,41.653 24.009,41.013 23.498,40.502C22.987,39.991 22.347,39.629 21.646,39.455L2.011,34.573C0.83,34.279 0,33.218 0,32C0,30.782 0.83,29.721 2.011,29.427L21.646,24.545C22.347,24.371 22.987,24.009 23.498,23.498C24.009,22.987 24.371,22.347 24.545,21.646L29.427,2.011Z"
>
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 0 0"
to="360 0 0"
:dur="`${particle.dur}ms`"
repeatCount="indefinite"
additive="sum"
/>
<animateTransform
attributeName="transform"
attributeType="XML"
type="scale"
:values="`0; ${particle.size}; 0`"
:dur="`${particle.dur}ms`"
repeatCount="indefinite"
additive="sum"
/>
</path>
</svg>
-->
<!-- MFMで上位レイヤーに表示されるため、リンクをクリックできるようにstyleにpointer-events: none;を付与。 -->
<svg v-for="particle in particles" :key="particle.id" :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: -32px; left: -32px; pointer-events: none;">
<!-- SVGのanimateTransformを使用するとChromeで描画できなくなるためCSSアニメーションを使用している (Issue 14155) -->
<path
:style="{
'--translateX': particle.x + 'px',
'--translateY': particle.y + 'px',
'--duration': particle.dur + 'ms',
'--size': particle.size,
}"
:class="$style.particle"
:fill="particle.color"
d="M29.427,2.011C29.721,0.83 30.782,0 32,0C33.218,0 34.279,0.83 34.573,2.011L39.455,21.646C39.629,22.347 39.991,22.987 40.502,23.498C41.013,24.009 41.653,24.371 42.354,24.545L61.989,29.427C63.17,29.721 64,30.782 64,32C64,33.218 63.17,34.279 61.989,34.573L42.354,39.455C41.653,39.629 41.013,39.991 40.502,40.502C39.991,41.013 39.629,41.653 39.455,42.354L34.573,61.989C34.279,63.17 33.218,64 32,64C30.782,64 29.721,63.17 29.427,61.989L24.545,42.354C24.371,41.653 24.009,41.013 23.498,40.502C22.987,39.991 22.347,39.629 21.646,39.455L2.011,34.573C0.83,34.279 0,33.218 0,32C0,30.782 0.83,29.721 2.011,29.427L21.646,24.545C22.347,24.371 22.987,24.009 23.498,23.498C24.009,22.987 24.371,22.347 24.545,21.646L29.427,2.011Z"
></path>
</svg>
</span>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
const particles = ref<{
id: string,
x: number,
y: number,
size: number,
dur: number,
color: string
}[]>([]);
const el = useTemplateRef('el');
const width = ref(0);
const height = ref(0);
const colors = ['#FF1493', '#00FFFF', '#FFE202', '#FFE202', '#FFE202'];
let stop = false;
let ro: ResizeObserver | undefined;
onMounted(() => {
ro = new ResizeObserver((entries, observer) => {
if (el.value == null) return;
width.value = el.value.offsetWidth + 64;
height.value = el.value.offsetHeight + 64;
});
if (el.value) ro.observe(el.value);
const add = () => {
if (stop) return;
const x = (Math.random() * (width.value - 64));
const y = (Math.random() * (height.value - 64));
const sizeFactor = Math.random();
const particle = {
id: Math.random().toString(),
x,
y,
size: 0.2 + ((sizeFactor / 10) * 3),
dur: 1000 + (sizeFactor * 1000),
color: colors[Math.floor(Math.random() * colors.length)],
};
particles.value.push(particle);
window.setTimeout(() => {
particles.value = particles.value.filter(x => x.id !== particle.id);
}, particle.dur - 100);
window.setTimeout(() => {
add();
}, 500 + (Math.random() * 500));
};
add();
});
onUnmounted(() => {
if (ro) ro.disconnect();
stop = true;
});
</script>
<style lang="scss" module>
.root {
position: relative;
display: inline-block;
}
.particle {
transform-origin: center;
transform-box: fill-box;
translate: var(--translateX) var(--translateY);
animation: particleAnimation var(--duration) linear infinite;
}
@keyframes particleAnimation {
0% {
rotate: 0deg;
scale: 0;
}
50% {
scale: var(--size);
}
100% {
rotate: 360deg;
scale: 0;
}
}
</style>
|
