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

Background animation: offset for large screens / cleanup

Browse source
This commit is contained in:
RobinLinus 2020-12-20 22:08:16 +01:00
parent b40c5f2053
commit c6fb8899ef
1 changed files with 11 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

27
client/scripts/ui.js
View file

@ -546,29 +546,24 @@ window.addEventListener('beforeinstallprompt', e => {
// Background Animation // Background Animation
Events.on('load', () => { Events.on('load', () => {
var requestAnimFrame = (function() { let c = document.createElement('canvas');
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var c = document.createElement('canvas');
document.body.appendChild(c); document.body.appendChild(c);
var style = c.style; let style = c.style;
style.width = '100%'; style.width = '100%';
style.position = 'absolute'; style.position = 'absolute';
style.zIndex = -1; style.zIndex = -1;
style.top = 0; style.top = 0;
style.left = 0; style.left = 0;
var ctx = c.getContext('2d'); let ctx = c.getContext('2d');
var x0, y0, w, h, dw; let x0, y0, w, h, dw;
function init() { function init() {
w = window.innerWidth; w = window.innerWidth;
h = window.innerHeight; h = window.innerHeight;
c.width = w; c.width = w;
c.height = h; c.height = h;
var offset = h > 380 ? 100 : 65; let offset = h > 380 ? 100 : 65;
offset = h > 800 ? 116 : h;
x0 = w / 2; x0 = w / 2;
y0 = h - offset; y0 = h - offset;
dw = Math.max(w, h, 1000) / 13; dw = Math.max(w, h, 1000) / 13;
@ -578,28 +573,28 @@ Events.on('load', () => {
function drawCicrle(radius) { function drawCicrle(radius) {
ctx.beginPath(); ctx.beginPath();
var color = Math.round(255 * (1 - radius / Math.max(w, h))); let color = Math.round(255 * (1 - radius / Math.max(w, h)));
ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)'; ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)';
ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
ctx.stroke(); ctx.stroke();
ctx.lineWidth = 2; ctx.lineWidth = 2;
} }
var step = 0; let step = 0;
function drawCircles() { function drawCircles() {
ctx.clearRect(0, 0, w, h); ctx.clearRect(0, 0, w, h);
for (var i = 0; i < 8; i++) { for (let i = 0; i < 8; i++) {
drawCicrle(dw * i + step % dw); drawCicrle(dw * i + step % dw);
} }
step += 1; step += 1;
} }
var loading = true; let loading = true;
function animate() { function animate() {
if (loading || step % dw < dw - 5) { if (loading || step % dw < dw - 5) {
requestAnimFrame(function() { requestAnimationFrame(function() {
drawCircles(); drawCircles();
animate(); animate();
}); });