pixi实现随音乐舞动的多彩圆点粒子动画效果代码
代码语言:html
所属分类:粒子
代码描述:pixi实现随音乐舞动的多彩圆点粒子动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<style>
html, body {
margin:0;
overflow:hidden;
background:#000;
color:white;
font-family:Arial;
}
.message{
padding:20px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
background:black;
cursor:pointer;
font-size:14px;
border:1px solid white;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<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/pixi.1.6.1.js"></script>
</head>
<body>
<h2 class="message">PLAY</h2>
<script>
(function() {
var AUDIO_URL, TOTAL_BANDS, analyser, analyserDataArray, arrCircles, audio, build, buildCircles, canplay, changeMode, changeTheme, circlesContainer, cp, createCircleTex, gui, hammertime, init, initAudio, initGUI, initGestures, isPlaying, k, message, modes, mousePt, mouseX, mouseY, params, play, renderer, resize, stage, startAnimation, texCircle, themes, themesNames, update, v, windowH, windowW;
AUDIO_URL = "//repo.bfw.wiki/bfwrepo/sound/5e148aa3821f2.mp3";
modes = ["cubic", "conic"];
themes = {
pinkBlue: [0xFF0032, 0xFF5C00, 0x00FFB8, 0x53FF00],
yellowGreen: [0xF7F6AF, 0x9BD6A3, 0x4E8264, 0x1C2124, 0xD62822],
yellowRed: [0xECD078, 0xD95B43, 0xC02942, 0x542437, 0x53777A],
blueGray: [0x343838, 0x005F6B, 0x008C9E, 0x00B4CC, 0x00DFFC],
blackWhite: [0xFFFFFF, 0x000000, 0xFFFFFF, 0x000000, 0xFFFFFF]
};
themesNames = [];
for (k in themes) {
v = themes[k];
themesNames.push(k);
}
// PARAMETERS
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0