|
|
@@ -0,0 +1,321 @@
|
|
|
+/*
|
|
|
+ * @Author: wangjiacheng
|
|
|
+ * @Date: 2021-10-15 10:58:28
|
|
|
+ * @LastEditors: wangjiacheng
|
|
|
+ * @LastEditTime: 2021-10-15 14:17:38
|
|
|
+ * @Description:
|
|
|
+ */
|
|
|
+
|
|
|
+export default {
|
|
|
+ methods: {
|
|
|
+ /* eslint-disable */
|
|
|
+ fireworkss() {
|
|
|
+ // window.addEventListener("resize", resizeCanvas, false);
|
|
|
+ // window.addEventListener("DOMContentLoaded", onLoad, false);
|
|
|
+ onLoad()
|
|
|
+
|
|
|
+ window.requestAnimationFrame =
|
|
|
+ window.requestAnimationFrame ||
|
|
|
+ window.webkitRequestAnimationFrame ||
|
|
|
+ window.mozRequestAnimationFrame ||
|
|
|
+ window.oRequestAnimationFrame ||
|
|
|
+ window.msRequestAnimationFrame ||
|
|
|
+ function (callback) {
|
|
|
+ window.setTimeout(callback, 1000 / 60);
|
|
|
+ };
|
|
|
+
|
|
|
+ var canvas, ctx, w, h, particles = [], probability = 0.04,
|
|
|
+ xPoint, yPoint;
|
|
|
+ function onLoad() {
|
|
|
+ canvas = document.getElementById("canvas");
|
|
|
+ ctx = canvas.getContext("2d");
|
|
|
+ resizeCanvas();
|
|
|
+
|
|
|
+ window.requestAnimationFrame(updateWorld);
|
|
|
+ }
|
|
|
+
|
|
|
+ function resizeCanvas() {
|
|
|
+ if (!!canvas) {
|
|
|
+ w = canvas.width = window.innerWidth;
|
|
|
+ h = canvas.height = window.innerHeight;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateWorld() {
|
|
|
+ update();
|
|
|
+ paint();
|
|
|
+ window.requestAnimationFrame(updateWorld);
|
|
|
+ }
|
|
|
+
|
|
|
+ function update() {
|
|
|
+ if (particles.length < 500 && Math.random() < probability) {
|
|
|
+ createFirework();
|
|
|
+ }
|
|
|
+ var alive = [];
|
|
|
+ for (var i = 0; i < particles.length; i++) {
|
|
|
+ if (particles[i].move()) {
|
|
|
+ alive.push(particles[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ particles = alive;
|
|
|
+ }
|
|
|
+
|
|
|
+ function paint() {
|
|
|
+ ctx.globalCompositeOperation = 'source-over';
|
|
|
+ ctx.fillStyle = "rgba(0,0,0,0.2)";
|
|
|
+ ctx.fillRect(0, 0, w, h);
|
|
|
+ ctx.globalCompositeOperation = 'lighter';
|
|
|
+ for (var i = 0; i < particles.length; i++) {
|
|
|
+ particles[i].draw(ctx);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function createFirework() {
|
|
|
+ xPoint = Math.random() * (w - 200) + 100;
|
|
|
+ yPoint = Math.random() * (h - 200) + 100;
|
|
|
+ var nFire = Math.random() * 50 + 100;
|
|
|
+ var c = "rgb(" + (~~(Math.random() * 200 + 55)) + ","
|
|
|
+ + (~~(Math.random() * 200 + 55)) + "," + (~~(Math.random() * 200 + 55)) + ")";
|
|
|
+ for (var i = 0; i < nFire; i++) {
|
|
|
+ var particle = new Particle();
|
|
|
+ particle.color = c;
|
|
|
+ var vy = Math.sqrt(25 - particle.vx * particle.vx);
|
|
|
+ if (Math.abs(particle.vy) > vy) {
|
|
|
+ particle.vy = particle.vy > 0 ? vy : -vy;
|
|
|
+ }
|
|
|
+ particles.push(particle);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function Particle() {
|
|
|
+ this.w = this.h = Math.random() * 4 + 1;
|
|
|
+
|
|
|
+ this.x = xPoint - this.w / 2;
|
|
|
+ this.y = yPoint - this.h / 2;
|
|
|
+
|
|
|
+ this.vx = (Math.random() - 0.5) * 10;
|
|
|
+ this.vy = (Math.random() - 0.5) * 10;
|
|
|
+
|
|
|
+ this.alpha = Math.random() * .5 + .5;
|
|
|
+
|
|
|
+ this.color;
|
|
|
+ }
|
|
|
+
|
|
|
+ Particle.prototype = {
|
|
|
+ gravity: 0.05,
|
|
|
+ move: function () {
|
|
|
+ this.x += this.vx;
|
|
|
+ this.vy += this.gravity;
|
|
|
+ this.y += this.vy;
|
|
|
+ this.alpha -= 0.01;
|
|
|
+ if (this.x <= -this.w || this.x >= screen.width ||
|
|
|
+ this.y >= screen.height ||
|
|
|
+ this.alpha <= 0) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ draw: function (c) {
|
|
|
+ c.save();
|
|
|
+ c.beginPath();
|
|
|
+
|
|
|
+ c.translate(this.x + this.w / 2, this.y + this.h / 2);
|
|
|
+ c.arc(0, 0, this.w, 0, Math.PI * 2);
|
|
|
+ c.fillStyle = this.color;
|
|
|
+ c.globalAlpha = this.alpha;
|
|
|
+
|
|
|
+ c.closePath();
|
|
|
+ c.fill();
|
|
|
+ c.restore();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fireworks() {
|
|
|
+ var _createClass = function () {
|
|
|
+ function defineProperties(target, props) {
|
|
|
+ for (var i = 0; i < props.length; i++) {
|
|
|
+ var descriptor = props[i];
|
|
|
+ descriptor.enumerable = descriptor.enumerable || false;
|
|
|
+ descriptor.configurable = true;
|
|
|
+ if ("value" in descriptor) descriptor.writable = true;
|
|
|
+ Object.defineProperty(target, descriptor.key, descriptor);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return function (Constructor, protoProps, staticProps) {
|
|
|
+ if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
|
|
+ if (staticProps) defineProperties(Constructor, staticProps);
|
|
|
+ return Constructor;
|
|
|
+ };
|
|
|
+ }();
|
|
|
+
|
|
|
+ function _classCallCheck(instance, Constructor) {
|
|
|
+ if (!(instance instanceof Constructor)) {
|
|
|
+ throw new TypeError("Cannot call a class as a function");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var Progress = function () {
|
|
|
+ function Progress() {
|
|
|
+ var param = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
|
|
|
+
|
|
|
+ _classCallCheck(this, Progress);
|
|
|
+
|
|
|
+ this.timestamp = null;
|
|
|
+ this.duration = param.duration || Progress.CONST.DURATION;
|
|
|
+ this.progress = 0;
|
|
|
+ this.delta = 0;
|
|
|
+ this.progress = 0;
|
|
|
+ this.isLoop = !!param.isLoop;
|
|
|
+
|
|
|
+ this.reset();
|
|
|
+ }
|
|
|
+
|
|
|
+ Progress.prototype.reset = function reset() {
|
|
|
+ this.timestamp = null;
|
|
|
+ };
|
|
|
+
|
|
|
+ Progress.prototype.start = function start(now) {
|
|
|
+ this.timestamp = now;
|
|
|
+ };
|
|
|
+
|
|
|
+ Progress.prototype.tick = function tick(now) {
|
|
|
+ if (this.timestamp) {
|
|
|
+ this.delta = now - this.timestamp;
|
|
|
+ this.progress = Math.min(this.delta / this.duration, 1);
|
|
|
+
|
|
|
+ if (this.progress >= 1 && this.isLoop) {
|
|
|
+ this.start(now);
|
|
|
+ }
|
|
|
+
|
|
|
+ return this.progress;
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ _createClass(Progress, null, [{
|
|
|
+ key: "CONST",
|
|
|
+ get: function get() {
|
|
|
+ return {
|
|
|
+ DURATION: 1000
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }]);
|
|
|
+
|
|
|
+ return Progress;
|
|
|
+ }();
|
|
|
+
|
|
|
+ var Confetti = function () {
|
|
|
+ function Confetti(param) {
|
|
|
+ _classCallCheck(this, Confetti);
|
|
|
+
|
|
|
+ this.parent = param.elm || document.body;
|
|
|
+ this.canvas = document.createElement("canvas");
|
|
|
+ this.ctx = this.canvas.getContext("2d");
|
|
|
+ this.width = param.width || this.parent.offsetWidth;
|
|
|
+ this.height = param.height || this.parent.offsetHeight;
|
|
|
+ this.length = param.length || Confetti.CONST.PAPER_LENGTH;
|
|
|
+ this.yRange = param.yRange || this.height * 2;
|
|
|
+ this.progress = new Progress({
|
|
|
+ duration: param.duration,
|
|
|
+ isLoop: true
|
|
|
+ });
|
|
|
+ this.rotationRange = typeof param.rotationLength === "number" ? param.rotationRange : 10;
|
|
|
+ this.speedRange = typeof param.speedRange === "number" ? param.speedRange : 10;
|
|
|
+ this.sprites = [];
|
|
|
+
|
|
|
+ this.canvas.style.cssText = ["display: block", "position: absolute", "top: 0", "left: 0", "pointer-events: none"].join(";");
|
|
|
+
|
|
|
+ this.render = this.render.bind(this);
|
|
|
+
|
|
|
+ this.build();
|
|
|
+
|
|
|
+ this.parent.append(this.canvas);
|
|
|
+ this.progress.start(performance.now());
|
|
|
+
|
|
|
+ requestAnimationFrame(this.render);
|
|
|
+ }
|
|
|
+
|
|
|
+ Confetti.prototype.build = function build() {
|
|
|
+ for (var i = 0; i < this.length; ++i) {
|
|
|
+ var canvas = document.createElement("canvas"),
|
|
|
+ ctx = canvas.getContext("2d");
|
|
|
+
|
|
|
+ canvas.width = Confetti.CONST.SPRITE_WIDTH;
|
|
|
+ canvas.height = Confetti.CONST.SPRITE_HEIGHT;
|
|
|
+
|
|
|
+ canvas.position = {
|
|
|
+ initX: Math.random() * this.width,
|
|
|
+ initY: -canvas.height - Math.random() * this.yRange
|
|
|
+ };
|
|
|
+
|
|
|
+ canvas.rotation = this.rotationRange / 2 - Math.random() * this.rotationRange;
|
|
|
+ canvas.speed = this.speedRange / 2 + Math.random() * (this.speedRange / 2);
|
|
|
+
|
|
|
+ ctx.save();
|
|
|
+ ctx.fillStyle = Confetti.CONST.COLORS[Math.random() * Confetti.CONST.COLORS.length | 0];
|
|
|
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
+ ctx.restore();
|
|
|
+
|
|
|
+ this.sprites.push(canvas);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ Confetti.prototype.render = function render(now) {
|
|
|
+ var progress = this.progress.tick(now);
|
|
|
+
|
|
|
+ this.canvas.width = this.width;
|
|
|
+ this.canvas.height = this.height;
|
|
|
+
|
|
|
+ for (var i = 0; i < this.length; ++i) {
|
|
|
+ this.ctx.save();
|
|
|
+ this.ctx.translate(this.sprites[i].position.initX + this.sprites[i].rotation * Confetti.CONST.ROTATION_RATE * progress, this.sprites[i].position.initY + progress * (this.height + this.yRange));
|
|
|
+ this.ctx.rotate(this.sprites[i].rotation);
|
|
|
+ this.ctx.drawImage(this.sprites[i], -Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)) / 2, -Confetti.CONST.SPRITE_HEIGHT / 2, Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)), Confetti.CONST.SPRITE_HEIGHT);
|
|
|
+ this.ctx.restore();
|
|
|
+ }
|
|
|
+
|
|
|
+ requestAnimationFrame(this.render);
|
|
|
+ };
|
|
|
+
|
|
|
+ _createClass(Confetti, null, [{
|
|
|
+ key: "CONST",
|
|
|
+ get: function get() {
|
|
|
+ return {
|
|
|
+ SPRITE_WIDTH: 9,
|
|
|
+ SPRITE_HEIGHT: 16,
|
|
|
+ PAPER_LENGTH: 100,
|
|
|
+ DURATION: 8000,
|
|
|
+ ROTATION_RATE: 50,
|
|
|
+ COLORS: ["#EF5350", "#EC407A", "#AB47BC", "#7E57C2", "#5C6BC0", "#42A5F5", "#29B6F6", "#26C6DA", "#26A69A", "#66BB6A", "#9CCC65", "#D4E157", "#FFEE58", "#FFCA28", "#FFA726", "#FF7043", "#8D6E63", "#BDBDBD", "#78909C"]
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }]);
|
|
|
+
|
|
|
+ return Confetti;
|
|
|
+ }();
|
|
|
+
|
|
|
+ (function () {
|
|
|
+ var DURATION = 6000,
|
|
|
+ LENGTH = 220;
|
|
|
+
|
|
|
+ new Confetti({
|
|
|
+ width: window.innerWidth,
|
|
|
+ height: window.innerHeight,
|
|
|
+ length: LENGTH,
|
|
|
+ duration: DURATION
|
|
|
+ });
|
|
|
+
|
|
|
+ setTimeout(function () {
|
|
|
+ new Confetti({
|
|
|
+ width: window.innerWidth,
|
|
|
+ height: window.innerHeight,
|
|
|
+ length: LENGTH,
|
|
|
+ duration: DURATION
|
|
|
+ });
|
|
|
+ }, DURATION / 2);
|
|
|
+ })();
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
