gsap实现拖动老式留声机碟片音乐播放快进效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：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.........完整代码请登录后点击上方下载按钮下载查看