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

网友评论0