粒子线调下雨滑动动画效果-html代码-BFW代码库

粒子线调下雨滑动动画效果

代码语言：html

所属分类：粒子

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style>
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}.container{width:100％;height:100%;margin:0;padding:0;background-color:#000000}
</style>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="jsi-water-line-container" class="container"></div>
<script>
var RENDERER={MAX_LINE_COUNT:700,DELTA_LINE_COUNT:5,DELTA_THETA:Math.PI/1000,init:function(){this.setParameters();this.reconstructMethods();this.createLines();this.render()},setParameters:function(){var $container=$('#jsi-water-line-container');this.width=$container.width();this.height=$container.height();this.context=$('<canvas />').attr({width:this.width,height:this.height}).appendTo($container).get(0).getContext('2d');this.lines=[];this.theta=0;this.thresholdX1=this.width*3/5;this.thresholdX2=this.width/8;this.thresholdY1=this.height/6;this.thresholdY2=-this.height/8;this.aspectRatio=(this.thresholdY1-this.thresholdY2)/(this.thresholdX1-this.thresholdX2)},reconstructMethods:function(){this.render=this.render.bind(this)},createLines:function(){if(this.lines.length>=this.MAX_LINE_COUNT){return}for(var i=0,length=this.DELTA_LINE_COUNT;i<length;i++){this.lines.push(new LINE(this))}},getPosition:function(x){return{relation:(x>=-this.thresholdX2&&x<=this.thresholdX2)?0:1,floor:this.thresholdY1+(this.thresholdY2-this.thresholdY1)*(this.thresholdX1-Math.abs(x))/(this.thresholdX1-this.thresholdX2)}},render:function(){requestAnimationFrame(this.render);this.context.clearRect(0,0,this.width,this.height);var hue=200+30*Math.sin(this.theta);for(var i=0,length=this.lines.length;i<length;i++){this.lines[i].render(hue)}this.createLines();this.theta+=this.DELTA_THETA;this.theta%=Math.PI*2}};var LINE=function(renderer){this.renderer=renderer;this.init()};LINE.prototype={FOCUS_POSITION:600,NEAR_LIMIT:-400,FAR_LIMIT:600,LENGTH:10,RADIUS:5,INIT_COUNT:120,GRAVITY:-0.05,RESISTANCE:0.05,MAX_EXTEND_COUNT:30,MAX_RIPPLE_COUNT:50,VZ:-3,init:function(){this.x=this.getRandomValue(-this.renderer.width*3/5,this.renderer.width*3/5);this.y=this.renderer.height*3/4;this.z=this.getRandomValue(this.NEAR_LIMIT,this.FAR_LIMIT);this.vy=0;var position=this.renderer.getPosition(this.x);this.floor=position.floor;this.relation=position.relation;this.status=0;this.extendCount=0;this.rippleCount=0},getRandomValue:function(min,max){return min+(max-min)*Math.random()},controlStatus:function(context,hue){var rate=this.FOCUS_POSITION/(this.z+this.FOCUS_POSITION),axis={x1:this.renderer.width/2+this.x*rate,y1:this.renderer.height/2-this.y*rate,rate:rate,ratio:(this.FAR_LIMIT-this.z)/(this.FAR_LIMIT+this.FOCUS_.........完整代码请登录后点击上方下载按钮下载查看