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