thm/test-card
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style: keep sync flash for sector indicator on screen for a few frames
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Tomáš Mládek 2024-02-18 21:21:29 +01:00
parent 3ba077add1
commit db5c718b75
1 changed files with 6 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
av-sync/src/components/SectorIndicator.svelte
View file

@ -6,6 +6,7 @@
$: center = el?.clientWidth / 2; $: center = el?.clientWidth / 2;
$: radius = center; $: radius = center;
let d = ''; let d = '';
let circleOpacity = 1;
$: { $: {
const angle = ((frame / fps) * 360) % 360; const angle = ((frame / fps) * 360) % 360;
@ -13,10 +14,13 @@
const x = center + radius * Math.cos(radians); const x = center + radius * Math.cos(radians);
const y = center + radius * Math.sin(radians); const y = center + radius * Math.sin(radians);
d = `M${center},${center} L${center + radius},${center} A${radius},${radius} 0 ${angle > 180 ? 1 : 0} 1 ${x},${y} Z`; d = `M${center},${center} L${center + radius},${center} A${radius},${radius} 0 ${angle > 180 ? 1 : 0} 1 ${x},${y} Z`;
const flashFrames = fps / 10;
circleOpacity = (flashFrames - (frame % fps)) / flashFrames;
} }
</script> </script>
<svg class="indicator" class:sync={frame % fps === 0} bind:this={el}> <svg class="indicator" style="--circle-opacity: {circleOpacity}" bind:this={el}>
<circle cx={center} cy={center} r={radius}></circle> <circle cx={center} cy={center} r={radius}></circle>
<path {d}></path> <path {d}></path>
</svg> </svg>
@ -28,12 +32,9 @@
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.indicator:not(.sync) circle {
display: none;
}
circle { circle {
fill: var(--color-active); fill: var(--color-active);
opacity: var(--circle-opacity);
} }
path { path {