原生js实现国庆中秋回家动画效果代码
代码语言:html
所属分类:动画
代码描述:原生js实现国庆中秋回家动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } html, body { overflow: hidden; } body { position: relative; background: #1a2a6c; background: -webkit-linear-gradient( #1a2a6c 0%, #b21f1f 33.3%, #fdbb2d 66.6% ); background: linear-gradient( #1a2a6c 0%, #b21f1f 33.3%, #fdbb2d 66.6% ); } </style> </head> <body translate="no" > <script> /* * File Name / sunset.js * Created Date / Sep 22, 2020 * Aurhor / Toshiya Marukubo * Twitter / https://twitter.com/toshiyamarukubo */ /* Common Tool. */ class Tool { // random number. static randomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } // random color rgb. static randomColorRGB() { return ( "rgb(" + this.randomNumber(0, 255) + ", " + this.randomNumber(0, 255) + ", " + this.randomNumber(0, 255) + ")"); } // random color hsl. static randomColorHSL(hue, saturation, lightness) { return ( "hsl(" + hue + ", " + saturation + "%, " + lightness + "%)"); } // gradient color. static gradientColor(ctx, cr, cg, cb, ca, x, y, r) { const col = cr + "," + cg + "," + cb; const g = ctx.createRadialGradient(x, y, 0, x, y, r); g.addColorStop(0, "rgba(" + col + ", " + ca * 1 + ")"); g.addColorStop(0.5, "rgba(" + col + ", " + ca * 0.5 + ")"); g.addColorStop(1, "rgba(" + col + ", " + ca * 0 + ")"); return g; }} /* When want to use angle. */ class Angle { constructor(angle) { this.a = angle; this.rad = this.a * Math.PI / 180; } incDec(num) { this.a += num; this.rad = this.a * Math.PI / 180; return this.rad; }} /* When want to use controller. */ class Controller { constructor(id) { this.id = document.getElementById(id); } getVal() { return this.id.value; }} /* When want to use time. */ class Time { constructor(time) { this.startTime = time; this.lastTime; this.elapsedTime; } getElapsedTime() { this.lastTime = Date.now(); this.elapsedTime = (this.startTime - this.lastTime) * -1; return this.elapsedTime; }} let canvas; let offCanvas; class Canvas { constructor(bool) { // create canvas. this.canvas = document.createElement("canvas"); // if on screen. if (bool === true) { this.canvas.style.display = 'block'; this.canvas.style.top = 0; this.canvas.style.left = 0; document.getElementsByTagName("body")[0].appendChild(this.canvas); } this.ctx = this.canvas.getContext("2d"); this.width = this.canvas.width = window.innerWidth; this.height = this.canvas.height = window.innerHeight; // mouse infomation. this.mouseX = null; this.mouseY = null; // tree this.trees = []; this.xPos = 0; // sun this.sunNum = 10; this.suns = []; // ground this.groundNum = 1; this.grounds = []; // car this.carNum = 1; this.cars = []; // bird this.birdNum = 10; this.birds = []; // time this.time = new Time(new Date()); // style this.g = { one: 0, two: 33.3, three: 66.6 }; // behavior this.carBehavior = 0; } // init, render, resize init() { // init this.trees = []; this.xPos = 0; this.suns = []; this.grounds = []; this.cars = []; this.birds = []; this.time = new Time(new Date()); this.g = { one: 0, two: 33.3, three: 66.6 }; this.carBehavior = 0; // tree for (this.xPos = 0; this.xPos < this.width + 40;) { let rand = Tool.randomNumber(80, 130); const t = new Tree(this.ctx, this.xPos, this.height - this.height / 5); this.trees.push(t); this.xPos += rand; } // sun for (let i = 0; i < this.sunNum; i++) { const s = new Sun(this.ctx, this.width / 2, this.height / 2); this.suns.push(s); } // car for (let i = 0; i < this.carNum; i++) { const c = new Car(this.ctx, this.width / 2, this.height - this.height / 5); this.cars.push(c); } // bird for (let i = 0; i < this.birdNum; i++) { const b = new Bird(this.ctx, Tool.randomNumber(0, this.width), Tool.randomNumber(0, -this.height / 2)); this.birds.push(b); } // ground let g = new Ground(this.ctx, 0, this.height - this.height / 5); this.grounds.push(g); } render() { const e = this.time.getElapsedTime(); this.ctx.clearRect(0, 0, canvas.width, canvas.height); if (e > 2400) { for (let i = 0; i < this.suns.length; i++) { this.suns[i].render(); } } if (e > 3200) { for (let i = 0; i < this.birds.length; i++) { this.birds[i].render(); } } if (e > 800) { for (let i = 0; i < this.trees.length; i++) { this.trees[i].render(); } } if (e > 1600) { for (let i = 0; i < this.cars.length; i++) { this.cars[i].render(); } } for (let i = 0; i < this.grounds.length; i++) { this.grounds[i].render(); } } resize() { this.width = this.canvas.width = window.innerWidth; this.height = this.canvas.height = window.innerHeight; this.init(); }} /* style background */ function gradientBackground() { canvas.canvas.style.background = '-webkit-linear-gradient(#1a2a6c ' + canvas.g.one + '%, #b21f1f ' + canvas.g.two + '%, #fdbb2d ' + canvas.g.three + '%)'; canvas.canvas.style.background = 'linear-gradient(#1a2a6c ' + canvas.g.one + '%, #b21f1f ' + canvas.g.two + '%, #fdbb2d ' + canvas.g.three + '%)'; canvas.g.one += 0.05; canvas.g.two += 0.05; canvas.g.three += 0.05; } /* Bird class */ class Bird { constructor(ctx, x, y) { this.ctx = ctx; this.init(x, y); } init(x, y) { this.x = x; this.y = y; this.r = Tool.randomNumber(10, 100); this.c = 'rgb(166, 66, 94)'; this.a = new Angle(Tool.randomNumber(0, 360)); this.a1 = new Angle(Tool.randomNumber(-30, 30)); this.v = { x: 0, y: 0 }; this.ga = 1; this.rand = Tool.randomNumber(100, 2000); } draw() { const ctx = this.ctx; ctx.save(); ctx.lineWidth = this.r / 15; ctx.lineCap = 'round'; ctx.globalAlpha = this.ga; ctx.strokeStyle = this.c; ctx.translate(this.x, this.y); ctx.rotate(this.a1.rad); ctx.translate(-this.x, -this.y); ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.quadraticCurveTo(this.x + this.r / 2, Math.sin(this.a.rad) * this.r / 3 + this.y - this.r / 2, this.x + this.r, Math.sin(this.a.rad) * -this.r / 10 + this.y); ctx.stroke(); ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.quadraticCurveTo(this.x - this.r / 2, Math.sin(this.a.rad) * this.r / 3 + this.y - this.r / 2, this.x - this.r, Math.sin(this.a.rad) * -this.r / 10 + this.y); ctx.stroke(); ctx.restore(); } updateParams() { this.a.incDec(2); this.r *= 0.999; this.ga *= 0.999; if (this.ga < 0.2) { this.init(Tool.randomNumber(0, canvas.width), Tool.randomNumber(0, -canvas.height / 5)); } } updatePosition() { this.v.x = canvas.width / 2 - this.x; this.v.y = canvas.height / 2 - this.y; this.x += this.v.x / this.rand; this.y += this.v.y / this.rand; } render() { this.draw(); this.updateParams(); this.updatePosition(); }} /* Car class */ class Car { constructor(ctx, x, y) { this.ctx = ctx; this.init(x, y); } init(x, y) { this.x = -50; this.y = y; this.r = 50; this.c = 'rgb(166, 66, 94)'; this.v = { x: 0, y: 0 }; this.coll = false; this.fontSize = 50; this.text = 'Hurry Up!'; this.time; } draw() { const ctx = this.ctx; ctx.save(); ctx.fillStyle = this.c; ctx.strokeStyle = .........完整代码请登录后点击上方下载按钮下载查看
网友评论0