gsap实现拖动老式留声机碟片音乐播放快进效果代码
代码语言:html
所属分类:多媒体
代码描述:gsap实现拖动老式留声机碟片音乐播放快进效果代码
代码标签: gsap 拖动 老式 留声机 碟片 音乐 播放 快进
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { margin: 0; height: 100%; overflow: hidden; } canvas { max-width: 100%; } </style> </head> <body> <canvas id="myCanvas"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script> <script > // Images Data const images = [ "//repo.bfw.wiki/bfwrepo/image/62e1fd6ee09cc.png", ]; imgRandomNum=0; // const imgRandomNum = Math.floor(Math.random() * 4); //console.log(imgRandomNum); // Environment Variables let updateFPS = 30; let showMouse = true; let count = 0; let bgColor = "#ddd"; // Controls const controls = { speed: 0, fadeRate: 0.99, play_05x: () => { cd.angleSpeed = 0.5; controls.fadeRate = 1; }, play_1x: () => { cd.angleSpeed = 1; controls.fadeRate = 1; }, play_2x: () => { cd.angleSpeed = 2; controls.fadeRate = 1; } }; const gui = new dat.GUI(); gui. add(controls, "speed", 0, 4). step(0.01). onChange(function (value) { if (cd) cd.angleSpeed = value; }). listen(); gui. add(controls, "fadeRate", 0.8, 1). step(0.001). onChange(function (value) {}). listen(); gui.add(controls, "play_05x"); gui.add(controls, "play_1x"); gui.add(controls, "play_2x"); //------ Vector 2D ------- class Vec2 { constructor(x, y) { this.x = x || 0; this.y = y || 0; } set(x, y) { this.x = x; this.y = y; } move(x, y) { this.x += x; this.y += y; } add(value) { return new Vec2(this.x + value.x, this.y + value.y); } sub(value) { return new Vec2(this.x - value.x, this.y - value.y); } mul(number) { return new Vec2(this.x * number, this.y * number); } get length() { return Math.sqrt(this.x * this.x + this.y * this.y); } set length(newValue) { let temp = this.unit.mul(newValue); this.set(temp.x, temp.y); } clone() { return new Vec2(this.x, this.y); } toString() { return `(${this.x}, ${this.y})`; } equal(compareElement) { return this.x == compareElement.x && this.y == compareElement.y; } get angle() { return Math.atan2(this.y, this.x); } get unit() { return this.mul(1 / this.length); }} //--- Canvas Selector ---- const canvas = document.querySelector("#myCanvas"); const ctx = canvas.getContext("2d"); ctx.circle = function (value, radius) { this.arc(value.x, value.y, radius, 0, Math.PI * 2); }; ctx.line = function (value1, value2) { this.moveTo(value1.x, value1.y); this.lineTo(value2.x, value2.y); }; // Set Canvas let ww, wh; initCanvas(); function initCanvas() { ww = canvas.width = window.innerWidth; wh = canvas.height = window.innerHeight; } let canvasCenter = new Vec2(ww / 2, wh / 2); let music = new Audio("//repo.bfw.wiki/bfwrepo/sound/62e1fdd3682aa.mp3"); music.volume = 0.24; if (typeof music.loop == "boolean") { music.loop = true; } else { music.addEventListener("ended", function () { this.currentTime = 0; this.play(); }); } class CD { constructor(args) { let def = { r: 400, p: new Vec2(), angle: 0, angleSpeed: 2, dragging: false, ...args }; Object.assign(this, def); } draw() { ctx.save(); ctx.rotate(this.angle); // Circle function function circle(p, r, fillColor, strokeColor) { ctx.beginPath(); ctx.circle(p, r); if (fillColor) { ctx.fillStyle = fillColor; ctx.fill(); } if (strokeColor) { ctx.strokeStyle = strokeColor; ctx.stroke(); } } // Draw Shadow ctx.shadowBlur = 100; ctx.shadowColor = "rgb(0 0 0 / 0.4)"; // Draw Circle circle(this.p, this.r, "black"); ctx.shadowBlur = 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0