Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2022-03-30 15:44:03 +08:00
parent 6ed11186d4
commit b8fd0cd28f
3 changed files with 63 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/app/layout/passport/particle.ts
View File

@ -17,7 +17,7 @@ export default class Particle {
var ParticleNetworkAnimation: any, PNA: any; var ParticleNetworkAnimation: any, PNA: any;
ParticleNetworkAnimation = PNA = function () {}; ParticleNetworkAnimation = PNA = function () {};
PNA.prototype.init = function (element: any) { PNA.init = function (element: any) {
console.log(this); console.log(this);
this.$el = document.getElementsByClassName(element); this.$el = document.getElementsByClassName(element);
@ -33,7 +33,7 @@ export default class Particle {
return this; return this;
}; };
PNA.prototype.bindUiActions = function () { PNA.bindUiActions = function () {
(window as any).on('resize', () => { (window as any).on('resize', () => {
// this.sizeContainer(); // this.sizeContainer();
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@ -42,7 +42,7 @@ export default class Particle {
}); });
}; };
PNA.prototype.sizeCanvas = function () { PNA.sizeCanvas = function () {
this.canvas.width = this.container.offsetWidth; this.canvas.width = this.container.offsetWidth;
this.canvas.height = this.container.offsetHeight; this.canvas.height = this.container.offsetHeight;
}; };
@ -125,21 +125,19 @@ export default class Particle {
this.ctx.fill(); this.ctx.fill();
}; };
var ParticleNetwork: any = function (parent: { canvas: any; ctx: any; }) { var ParticleNetwork: any = (parent: { canvas: any; ctx: any }) => ({
this.options = { options: {
velocity: 1, // the higher the faster velocity: 1, // the higher the faster
density: 15000, // the lower the denser density: 15000, // the lower the denser
netLineDistance: 200, netLineDistance: 200,
netLineColor: '#929292', netLineColor: '#929292',
particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ] particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
}; },
this.canvas = parent.canvas; canvas: parent.canvas,
this.ctx = parent.ctx; ctx: parent.ctx
});
this.init(); ParticleNetwork.init = function () {
};
ParticleNetwork.prototype.init = function () {
// Create particle objects // Create particle objects
this.createParticles(true); this.createParticles(true);
@ -149,7 +147,7 @@ export default class Particle {
this.bindUiActions(); this.bindUiActions();
}; };
ParticleNetwork.prototype.createParticles = function (isInitial) { ParticleNetwork.createParticles = function (isInitial: any) {
// Initialise / reset particles // Initialise / reset particles
var me = this; var me = this;
this.particles = []; this.particles = [];
@ -158,18 +156,15 @@ export default class Particle {
if (isInitial) { if (isInitial) {
var counter = 0; var counter = 0;
clearInterval(this.createIntervalId); clearInterval(this.createIntervalId);
this.createIntervalId = setInterval( this.createIntervalId = setInterval(() => {
function () { if (counter < quantity - 1) {
if (counter < quantity - 1) { // Create particle object
// Create particle object this.particles.push(new Particle(this));
this.particles.push(new Particle(this)); } else {
} else { clearInterval(me.createIntervalId);
clearInterval(me.createIntervalId); }
} counter++;
counter++; }, 50);
}.bind(this),
50
);
} else { } else {
// Create particle objects // Create particle objects
for (var i = 0; i < quantity; i++) { for (var i = 0; i < quantity; i++) {
@ -178,7 +173,7 @@ export default class Particle {
} }
}; };
ParticleNetwork.prototype.createInteractionParticle = function () { ParticleNetwork.createInteractionParticle = function () {
// Add interaction particle // Add interaction particle
this.interactionParticle = new Particle(this); this.interactionParticle = new Particle(this);
this.interactionParticle.velocity = { this.interactionParticle.velocity = {
@ -189,7 +184,7 @@ export default class Particle {
return this.interactionParticle; return this.interactionParticle;
}; };
ParticleNetwork.prototype.removeInteractionParticle = function () { ParticleNetwork.removeInteractionParticle = function () {
// Find it // Find it
var index = this.particles.indexOf(this.interactionParticle); var index = this.particles.indexOf(this.interactionParticle);
if (index > -1) { if (index > -1) {
@ -199,7 +194,7 @@ export default class Particle {
} }
}; };
ParticleNetwork.prototype.update = function () { ParticleNetwork.update = function () {
if (this.canvas) { if (this.canvas) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.globalAlpha = 1; this.ctx.globalAlpha = 1;
@ -247,21 +242,21 @@ export default class Particle {
} }
}; };
ParticleNetwork.prototype.bindUiActions = function () { ParticleNetwork.bindUiActions = function () {
// Mouse / touch event handling // Mouse / touch event handling
this.spawnQuantity = 3; this.spawnQuantity = 3;
this.mouseIsDown = false; this.mouseIsDown = false;
this.touchIsMoving = false; this.touchIsMoving = false;
this.onMouseMove = function (e) { this.onMouseMove = (e: { offsetX: any; offsetY: any }) => {
if (!this.interactionParticle) { if (!this.interactionParticle) {
this.createInteractionParticle(); this.createInteractionParticle();
} }
this.interactionParticle.x = e.offsetX; this.interactionParticle.x = e.offsetX;
this.interactionParticle.y = e.offsetY; this.interactionParticle.y = e.offsetY;
}.bind(this); };
this.onTouchMove = function (e) { this.onTouchMove = (e: { preventDefault: () => void; changedTouches: { clientX: any; clientY: any }[] }) => {
e.preventDefault(); e.preventDefault();
this.touchIsMoving = true; this.touchIsMoving = true;
if (!this.interactionParticle) { if (!this.interactionParticle) {
@ -269,59 +264,53 @@ export default class Particle {
} }
this.interactionParticle.x = e.changedTouches[0].clientX; this.interactionParticle.x = e.changedTouches[0].clientX;
this.interactionParticle.y = e.changedTouches[0].clientY; this.interactionParticle.y = e.changedTouches[0].clientY;
}.bind(this); };
this.onMouseDown = function (e) { this.onMouseDown = () => {
this.mouseIsDown = true; this.mouseIsDown = true;
var counter = 0; var counter = 0;
var quantity = this.spawnQuantity; var quantity = this.spawnQuantity;
var intervalId = setInterval( var intervalId = setInterval(() => {
function () { if (this.mouseIsDown) {
if (this.mouseIsDown) { if (counter === 1) {
if (counter === 1) { quantity = 1;
quantity = 1;
}
for (var i = 0; i < quantity; i++) {
if (this.interactionParticle) {
this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y));
}
}
} else {
clearInterval(intervalId);
} }
counter++; for (var i = 0; i < quantity; i++) {
}.bind(this), if (this.interactionParticle) {
50 this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y));
); }
}.bind(this); }
} else {
clearInterval(intervalId);
}
counter++;
}, 50);
};
this.onTouchStart = function (e) { this.onTouchStart = (e: { preventDefault: () => void; changedTouches: { clientX: any; clientY: any }[] }) => {
e.preventDefault(); e.preventDefault();
setTimeout( setTimeout(() => {
function () { if (!this.touchIsMoving) {
if (!this.touchIsMoving) { for (var i = 0; i < this.spawnQuantity; i++) {
for (var i = 0; i < this.spawnQuantity; i++) { this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
}
} }
}.bind(this), }
200 }, 200);
); };
}.bind(this);
this.onMouseUp = function (e) { this.onMouseUp = () => {
this.mouseIsDown = false; this.mouseIsDown = false;
}.bind(this); };
this.onMouseOut = function (e) { this.onMouseOut = function () {
this.removeInteractionParticle(); this.removeInteractionParticle();
}.bind(this); };
this.onTouchEnd = function (e) { this.onTouchEnd = function (e: { preventDefault: () => void }) {
e.preventDefault(); e.preventDefault();
this.touchIsMoving = false; this.touchIsMoving = false;
this.removeInteractionParticle(); this.removeInteractionParticle();
}.bind(this); };
// this.canvas.addEventListener('mousemove', this.onMouseMove); // this.canvas.addEventListener('mousemove', this.onMouseMove);
// this.canvas.addEventListener('touchmove', this.onTouchMove); // this.canvas.addEventListener('touchmove', this.onTouchMove);
@ -332,7 +321,7 @@ export default class Particle {
// this.canvas.addEventListener('touchend', this.onTouchEnd); // this.canvas.addEventListener('touchend', this.onTouchEnd);
}; };
ParticleNetwork.prototype.unbindUiActions = function () { ParticleNetwork.unbindUiActions = function () {
if (this.canvas) { if (this.canvas) {
// this.canvas.removeEventListener('mousemove', this.onMouseMove); // this.canvas.removeEventListener('mousemove', this.onMouseMove);
// this.canvas.removeEventListener('touchmove', this.onTouchMove); // this.canvas.removeEventListener('touchmove', this.onTouchMove);

7
src/app/layout/passport/passport.component.ts
View File

@ -1,5 +1,6 @@
import { Component, Inject, OnInit } from '@angular/core'; import { Component, Inject, OnInit } from '@angular/core';
import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth'; import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
import Particle from './particle';
@Component({ @Component({
selector: 'layout-passport', selector: 'layout-passport',
@ -11,10 +12,10 @@ export class LayoutPassportComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
// this.tokenService.clear(); // this.tokenService.clear();
this.loadJS(); // this.loadJS();
// const particle = new Particle(); const particle = new Particle();
// particle.init(); particle.init();
} }
loadJS() { loadJS() {

BIN
src/assets/images/login/4-界面背景.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 135 KiB

After

Width:  |  Height:  |  Size: 128 KiB