mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-22 07:46:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Speed up canvas by removing fade-in animation

Browse source
This commit is contained in:
schlagmichdoch 2023-05-16 18:55:36 +02:00
parent 8a17b82fa4
commit df778ba42c
6 changed files with 22 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
public/index.html
View file

@ -303,6 +303,7 @@
</section>
<x-background></x-background>
</x-about>
<canvas class="circles"></canvas>
<!-- SVG Icon Library -->
<svg style="display: none;">
<symbol id=wifi-tethering viewBox="0 0 24 24">

14
public/scripts/ui.js
View file

@ -2249,14 +2249,7 @@ window.addEventListener('beforeinstallprompt', e => {
// Background Circles
Events.on('load', () => {
let c = document.createElement('canvas');
let style = c.style;
style.width = '100%';
style.position = 'absolute';
style.zIndex = -1;
style.top = 0;
style.left = 0;
style.animation = "fade-in 800ms";
let c = $$('canvas');
let cCtx = c.getContext('2d');
let x0, y0, w, h, dw, offset;
@ -2277,11 +2270,7 @@ Events.on('load', () => {
y0 = h - offset;
dw = Math.round(Math.max(w, h, 1000) / 13);
if (document.body.contains(c)) {
document.body.removeChild(c);
}
drawCircles(cCtx, dw);
document.body.appendChild(c);
}
Events.on('bg-resize', _ => init());
@ -2297,6 +2286,7 @@ Events.on('load', () => {
}
function drawCircles(ctx, frame) {
ctx.clearRect(0, 0, w, h);
for (let i = 0; i < 13; i++) {
drawCircle(ctx, dw * i + frame + 33);
}

8
public/styles.css
View file

@ -1178,6 +1178,14 @@ button::-moz-focus-inner {
align-self: end;
}
canvas .circles {
width: 100vw;
position: absolute;
z-index: -10;
top: 0;
left: 0;
}
/* Loading Indicator */
.progress {

1
public_included_ws_fallback/index.html
View file

@ -306,6 +306,7 @@
</section>
<x-background></x-background>
</x-about>
<canvas class="circles"></canvas>
<!-- SVG Icon Library -->
<svg style="display: none;">
<symbol id=wifi-tethering viewBox="0 0 24 24">

14
public_included_ws_fallback/scripts/ui.js
View file

@ -2250,14 +2250,7 @@ window.addEventListener('beforeinstallprompt', e => {
// Background Circles
Events.on('load', () => {
let c = document.createElement('canvas');
let style = c.style;
style.width = '100%';
style.position = 'absolute';
style.zIndex = -1;
style.top = 0;
style.left = 0;
style.animation = "fade-in 800ms";
let c = $$('canvas');
let cCtx = c.getContext('2d');
let x0, y0, w, h, dw, offset;
@ -2277,11 +2270,7 @@ Events.on('load', () => {
y0 = h - offset;
dw = Math.round(Math.max(w, h, 1000) / 13);
if (document.body.contains(c)) {
document.body.removeChild(c);
}
drawCircles(cCtx, dw);
document.body.appendChild(c);
}
Events.on('bg-resize', _ => init());
@ -2297,6 +2286,7 @@ Events.on('load', () => {
}
function drawCircles(ctx, frame) {
ctx.clearRect(0, 0, w, h);
for (let i = 0; i < 13; i++) {
drawCircle(ctx, dw * i + frame + 33);
}

8
public_included_ws_fallback/styles.css
View file

@ -1204,6 +1204,14 @@ button::-moz-focus-inner {
align-self: end;
}
canvas .circles {
width: 100vw;
position: absolute;
z-index: -10;
top: 0;
left: 0;
}
/* Loading Indicator */
.progress {