yoshi实现12种不同的粒子动画效果集合代码
代码语言：html
所属分类：粒子
代码描述：yoshi实现12种不同的粒子动画效果代码，包括星星、泡泡、下雨、下雪、曲线、多彩线条等12种可调参数的粒子
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/yoshi.css">
<style>
@charset "utf-8";
/******************************************************************************
STYLES USED IN THE DEMO ONLY
******************************************************************************/
html, body {
min-height: 100%;
margin:0;
padding:0; }
body {
font-family:"Open Sans",sans-serif;
background:#ffdb43;
color:#000;
}
pre, code {
color:#000;
font-family: monospace;
font-size:18px;
}
.container {
margin:0 auto;
}
h1 {
font-size:62px;
color:#000;
font-family: 'Raleway', sans-serif;
font-weight:400;
}
h1 span {font-size:32px; }
p {
font-size:25px;
line-height:46px;
font-weight:100;
color:#000;
}
p.example {
padding:0;
margin:0;
font-size:20px;
line-height:32px;
font-weight:100;
color:#000;
}
h2 {
display:inline-block;
background:#000;
font-size:26px;
font-weight:400;
line-height:46px;
color:#ffdb43;
padding:2px 35px 2px 10px;
margin-top:45px;
margin-bottom:15px;
width:auto; }
ul li {
font-size:25px;
line-height:46px;
font-weight:100;
color:#000;
}
.setting {
font-weight:400;
display:inline-block;
width:170px;
}
input {
width:100px;
hieght:30px;
padding:8px;
font-size:16px;
background:#f2f2f2;
border:1px solid #000;
color:#333;
margin-right:10px;
margin-bottom:10px; }
label {
font-size:16px;
height:30px;
margin-right:10px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none;
}
.left {
width:50%;
float:left;
}
button {
width:100%;
padding:20px 0;
text-align:center;
font-size:28px;
cursor:pointer;
color:#000;
text-transform:uppercase;
margin-top:10px;
font-family:'Open Sans',sans-serif;
background:#ffdb43;
border:6px double #000;
letter-spacing:2px;
transition:all 500ms ease; }
button:hover {
background:#000;
color:#ffdb43;
letter-spacing:1px;
border-color:#ffdb43;
}
.preset {
display:inline-block;
width:95px;
padding:10px 0;
text-align:center;
font-size:12px;
cursor:pointer;
color:#000;
text-transform:uppercase;
margin-top:10px;
font-family:'Open Sans',sans-serif;
background:#ffdb43;
border:6px double #000;
letter-spacing:1px;
transition:all 500ms ease; }
.preset:hover {
background:#000;
color:#ffdb43;
border-color:#ffdb43; }
.yoshi_full_screen {
position:fixed;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%; }
.yoshi_full_screen .Yoshi_particleEffects {
width:100%;
height:100%; }
/* IPHONE */
@media (max-width:375px){
.container {
width:375px;
padding-top:500px;
}
}
/* IPAD */
@media (max-width:768px){
.container {
width:500px;
padding-top:250px;
}
.setting {display:block;}
}
/* DESKTOP */
@media (min-width:768px){
.container {
width:768px;
padding-top:200px;
}
}
/* DESKTOP + */
@media (min-width:1024px){
.container {
width:1000px;
padding-top:100px; }
}
</style>
<!-- LOAD JQUERY -->
<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/yoshi.js"></script>
<script>
/*********************************************************************************************/
// THIS IS CODE FOR THE GENERATOR/DEMO ONLY
/*********************************************************************************************/
$(document).ready(function(){
full_screen=false;
$('#update').on('click',function(){
// NEEDED TO PREVENT ANIMATION BUILDUP WHEN GENERATING
window.cancelAnimationFrame(yoshiID);
// GET PARTICLE SETTINGS
var numParticles=parseFloat($('#par1').val()),
dist=parseFloat($('#par2').val()),
psize=parseFloat($('#par3').val()),
maxsize=parseFloat($('#par4').val()),
pcolor='#'+$('#par5').val().replace('#','').removeWS(),
switchcolor=$('#par5a').val().toLowerCase().removeWS(),
pshape=$('#par6').val().removeWS().toLowerCase(),
pw=parseFloat($('#par7').val()),
mpw=parseFloat($('#par8').val()),
ph=parseFloat($('#par9').val()),
mph=parseFloat($('#par10').val()),
bgc=$('#gen1').val().replace('#','').removeWS().toLowerCase(),
xspeed=isNaN($('#gen2')) ? 'r' : parseFloat($('#gen2').val()),
xmaxspeed=parseFloat($('#gen2a').val()),
yspeed=isNaN($('#gen3')) ? 'r' : parseFloat($('#gen3').val()),
ymaxspeed=parseFloat($('#gen3a').val()),
xvel=parseFloat($('#gen4').val()),
yvel=parseFloat($('#gen5').val()),
xtype=parseFloat($('#gen6').val()),
ytype=parseFloat($('#gen7').val()),
xacc=parseFloat($('#gen8').val()),
yacc=parseFloat($('#gen9').val()),
draw=$('#line1').val().toLowerCase().removeWS(),
lcolor='#'+$('#line2').val().replace('#','').removeWS(),
lw=parseFloat($('#line3').val()),
ltype=$('#line4').val().removeWS().toLowerCase(),
ctax=$('#line5').val(),
ctay=$('#line6').val(),
ctbx=$('#line7').val(),
ctby=$('#line5').val();
// VALIDATE FIELDS BEFORE CONTINUING
if(typeof numParticles === 'undefined' || numParticles > 300 || isNaN(numParticles)){ alert("Number of Particles is too large or undefined"); return false; };
if(typeof dist === 'undefined' || isNaN(dist)){ alert("Minimum Distance is undefined"); return false; };
if(typeof psize === 'undefined' || isNaN(psize)){ alert("Particle Size is undefined"); return false; };
if(typeof maxsize === 'undefined' || isNaN(maxsize)){ alert("Maximum Particle Size is undefined"); return false; };
if(typeof pcolor === 'undefined'){ alert("Particle Color is undefined"); return false; };
if(typeof switchcolor === 'undefined' || switchcolor!=='true' && switchcolor!=='false'){ alert("Switch Color is undefined"); return false; };
if(typeof pshape === 'undefined' || pshape!=='circle' && pshape!=='line' && pshape!=='triangle'){
alert("Particle Shape is undefined or incorrect."); return false; };
if(typeof pw === 'undefined' || isNaN(pw)){ alert("Particle Width is undefined."); return false; };
if(typeof mpw === 'undefined' || isNaN(mpw)){ alert("Maximum Particle Width is undefined."); return false; };
if(typeof ph === 'undefined' || isNaN(ph)){ alert("Particle Height is undefined."); return false; };
if(typeof mph === 'undefined' || isNaN(mph)){ alert("Maximum Particle Height is undefined."); return false; };
if(typeof bgc === 'undefined'){ alert("Maximum Particle Height is undefined."); return false; };
if(bgc !=='transparent' && bgc!=='blend') var bgc='#'+bgc.replace('#','').removeWS();
if(typeof xspeed === 'undefined' || isNaN(xspeed) && xspeed!=='r'){ alert("X Axis Speed is undefined."); return false; };
if(typeof xmaxspeed === 'undefined' || isNaN(xmaxspeed)){ alert("Maximum X Axis Speed is undefined."); return false; };
if(typeof yspeed === 'undefined' || isNaN(yspeed) && yspeed!=='r'){ alert("Y Axis Speed is undefined."); return false; };
if(typeof ymaxspeed === 'undefined' || isNaN(ymaxspeed)){ alert("Maximum Y Axis Speed is undefined."); return false; };
if(typeof xvel === 'undefined' || isNaN(xvel)){ alert("X Axis Velocity is undefined."); return false; };
if(typeof yvel === 'undefined' || isNaN(yvel)){ alert("Y Axis Velocity is undefined."); return false; };
if(typeof xtype === 'undefined' || xtype < 0 || xtype > 4 || isNaN(xtype)){ alert("X Axis Type is undefined or out of range ( 0 - 4 )."); return false; };
if(typeof ytype === 'undefined' || ytype < 0 || ytype > 4 || isNaN(ytype)){ alert("Y Axis Type is undefined or out of range ( 0 - 4 )."); return false; };
if(typeof xacc === 'undefined' || isNaN(xacc)){ alert("X Acceleration is undefined."); return false; };
if(typeof yacc === 'undefined' || isNaN(yacc)){ alert("Y Acceleration is undefined."); return false; };
if(typeof draw === 'undefined' || draw!=='true' && draw!=='false'){ alert("Draw setting is undefined. True or False."); return false; };
if(draw==='true') draw=true;
if(draw==='false') draw=false;
if(typeof lcolor === 'undefined'){ alert("Line Color is undefined."); return false; };
if(typeof lw === 'undefined' || isNaN(lw)){ alert("Line Width is undefined."); return false; };
if(typeof ltype === 'undefined' || ltype!=='line' && ltype!=='quad' && ltype!=='random' && ltype!=='bezier'){
alert("Line type is undefined. Acceptable values are 'line', 'quad', 'bezier', or 'random'"); return false; };
if(typeof ctax === 'undefined'){ alert("Control Point A>X is undefined."); return false; };
if(typeof ctay === 'undefined'){ alert("Control Point A>Y is undefined."); return false; };
if(typeof ctbx === 'undefined'){ alert("Control Point B>X is undefined."); return false; };
if(typeof ctby === 'undefined'){ alert("Control Point B>Y is undefined."); return false; };
if(ctax==='true') ctax=true;
if(ctay==='true') ctay=true;
if(ctbx==='true') ctbx=true;
if(ctby==='true') ctby=true;
// INITIALIZE
var $el=full_screen ? $('div.yoshi_full_screen') : $('div.yoshi');
$el.html(' ').Yoshi({
num_particles:numParticles,
min_distance:dist,
particle_size:psize,
max_size:maxsize,
particle_color:pcolor,
particle_shape:pshape,
particle_width:pw,
max_particle_width:mpw,
particle_height:ph,
max_particle_height:mph,
canvas_color:bgc,
speed_x:xspeed,
max_speed_y:xmaxspeed,
speed_y:yspeed,
max_speed_y:ymaxspeed,
velocity_x:xvel,
velocity_y:yvel,
x_type:xtype,
y_type:ytype,
acceleration_x:xacc,
acceleration_y:yacc,
draw_line:draw,
line_color:lcolor,
line_width:lw,
line_type:ltype,
control_point_a_x:ctax,
control_point_a_y:ctay,
control_point_b_x:ctbx,
control_point_b_y:ctby
});
});
$('#update').click();
///////
// DUST
///////
$('#dust').on('click',function(){
$('#par1').val(200);
$('#par2').val(50);
$('#par3').val(1);
$('#par4').val(1);
$('#par5').val('#CCCCCC');
$('#par5a').val('false');
$('#par6').val('circle');
$('#par7').val(1);
$('#par8').val(1);
$('#par9').val(1);
$('#par10').val(1);
$('#gen1').val('#000000');
$('#gen2').val('r');
$('#gen2a').val(2);
$('#gen3').val('r');
$('#gen3a').val(-3);
$('#gen4').val(0.15);
$('#gen5').val(0.15);
$('#gen6').val(0);
$('#gen7').val(0);
$('#gen8').val(0);
$('#gen9').val(0);
$('#line1').val(false);
$('#line2').val('#000000');
$('#line3').val(2);
$('#line4').val('line');
$('#line5').val(true);
$('#line6').val(true);
$('#line7').val(true);
$('#line8').val(true);
$('#update').click();
});
///////
// RAIN
///////
$('#rain').on('click',function(){
$('#par1').val(150);
$('#par2').val(50);
$('#par3').val(3);
$('#par4').val(5);
$('#par5').val('#000000');
$('#par5a').val('false');
$('#par6').val('line');
$('#par7').val(2);
$('#par8').val(2);
$('#par9').val(0);
$('#par10').val(70);
$('#gen1').val('transparent');
$('#gen2').val('r');
$('#gen2a').val(0);
$('#gen3').val('r');
$('#gen3a').val(20);
$('#gen4').val(0);
$('#gen5').val(10);
$('#gen6').val(0);
$('#gen7').val(1);
$('#gen8').val(0.0);
$('#gen9').val(0.01);
$('#line1').val(false);
$('#line2').val('#000000');
$('#line3').val(2);
$('#line4').val('line');
$('#line5').val(true);
$('#line6').val(true);
$('#line7').val(true);
$('#line8').val(true);
$('#update').click();
});
///////
// SNOW
///////
$('#snow').on('click',function(){
$('#par1').val(120);
$('#par2').val(20);
$('#par3').val(0);
$('#par4').val(9);
$('#par5').val('#FFFFFF');
$('#par5a').val('false');
$('#par6').val('circle');
$('#par7').val(0);
$('#par8').val(0);
$('#par9').val(0);
$('#par10').val(0);
$('#gen1').val('transparent');
$('#gen2').val(1);
$('#gen2a').val(1);
$('#gen3').val(1);
$('#gen3a').val(3);
$('#gen4').val(0.5);
$('#gen5').val(1);
$('#gen6').val(1);
$('#gen7').val(1);
$('#gen8').val(0.01);
$('#gen9').val(0.01);
$('#line1').val(false);
$('#line2').val('#000000');
$('#line3').val(2);
$('#line4').val('line');
$('#line5').val(true);
$('#line6').val(true);
$('#line7').val(true);
$('#line8').val(true);
$('#update').click();
});
////////////
// MOLECULES
////////////
$('#molecules').on('click',function(){
$('#par1').val(100);
$('#par2').val(50);
$('#par3').val(3);
$('#par4').val(5);
$('#par5').val('#000000');
$('#par5a').val('false');
$('#par6').val('circle');
$('#par7').val(3);
$('#par8').val(3);
$('#par9').val(0);
$('#par10').val(0);
$('#gen1').val('transparent');
$('#gen2').val(2);
$('#gen2a').val(1);
$('#gen3').val(2);
$('#gen3a').val(1);
$('#gen4').val(1);
$('#gen5').val(1);
$('#gen6').val(1);
$('#gen7').val(1);
$('#gen8').val(0.01);
$('#gen9').val(0.01);
$('#line1').val(true);
$('#line2').val('#000000');
$('#line3').val(2);
$('#line4').val('line');
$('#line5').val(true);
$('#line6').val(true);
$('#line7').val(true);
$('#line8').val(true);
$('#update').click();
});
/////////////
// SLIPSTREAM
/////////////
$('#slipstream').on('click',function(){
$('#par1').val(100);
$('#par2').val(60);
$('#par3').val(0);
$('#par4').val(5);
$('#par5').val('#000000');
$('#par5a').val('false');
$('#par6').val('line');
$('#par7').val(500);
$('#par8').val(500);
$('#par9').val(2);
$('#par10').val(2);
$('#gen1').val('transparent');
$('#gen2').val(1);
$('#gen2a').val(1);
$('#gen3').val(1);
$('#gen3a').val(1);
$('#gen4').val(0);
$('#gen5').val(0);
$('#gen6').val(0);
$('#gen7').val(1);
$('#gen8').val(0.0);
$('#gen9').val(1.0);
$('#line1').val(true);
$('#line2').val('#000000');
$('#line3').val(2);
$('#line4').val('line');
$('#line5').val(true);
$('#line6').val(true);
$('#line7').val(true);
$('#line8').val(true);
$('#update').click();
});
////////
// LINES
////////
$('#lines_ex').on('click',function(){
$('#par1').val(150);
$('#par2').val(60);
$('#par3').val(0);
$('#par4').val(5);
$('#par5').val('#ff9700,#6739b6,#ff5521');
$('#par5a').val('true');
$('#par6').val('line');
$('#par7').val(0);
$('#par8').val(0);
$('#par9').val(1);
$('#par10').val(1);
$('#gen1').val('transparent');
$('#gen2').val(1);
$('#gen2a').val(1);
$('#gen3').val(1);
$('#gen3a').val(1);
$('#gen4').val(1);
$('#gen5').val(1);
$('#gen6').val(2);
$('#gen7').val(2);
$('#gen8').val(1);
$('#gen9').val(1);
$('#line1').val(true);
$('#line2').val('#ff9700,#6739b6,#ff5521');
$('#line3').val(1);
$('#line4').val('quad');
$('#line5').val(500);
$('#line6').val(500);
$('#line7').val(500);
$('#line8').val(500);
$('#update').click();
});
/////////
// CURVES
/////////
$('#curves_ex').on('click',function(){
$('#par1').val(100);
$('#par2').val(60);
$('#par3').val(0);
$('#par4').val(5);
$('#par5').val('#000000');
$('#par5a').val('false');
$('#par6').val('line');
$('#par7').val(0);
$('#par8').val(0);
$('#par9').val(1);
$('#par10').val(1);
$('#gen1').val('transparent');
$('#gen2').val(1);
$('#gen2a').val(1);
$('#gen3').val(1);
$('#gen3a').val(1);
$('#gen4').val(1);
$('#gen5').val(1);
$('#gen6').val(2);
$('#gen7').val(2);
$('#gen8').val(1);
$('#gen9').val(1);
$('#line1').val(true);
$('#line2').val('#000000');
$('#line3').val(1);
$('#line4').val('quad');
$('#line5').val(0);
$('#line6').val(500);
$('#line7').val(500);
$('#line8').val(200);
$('#update').click();
});
//////////
// SPINNER
//////////
$('#spinner').on('click',function(){
$('#par1').val(60);
$('#par2').val(100);
$('#par3').val(0);
$('#par4').val(5);
$('#par5').val('#FFFFFF');
$('#par5a').val('false');
$('#par6').val('circle');
$('#par7').val(3);
$('#par8').val(3);
$('#par9').val(2);
$('#par10').val(2);
$('#gen1').val('#000000');
$('#gen2').val(1);
$('#gen2a').val(1);
$('#gen3').val(1);
$('#gen3a').val(1);
$('#gen4').val(1);
$('#gen5').val(1);
$('#gen6').val(1);
$('#gen7').val(3);
$('#gen8').........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0