jquery实现canvas粒子磁场流变形动画效果代码
代码语言:html
所属分类:粒子
代码描述:jquery实现canvas粒子磁场流变形动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> <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> </head> <body> <div id="jsi-particle-container" class="container"></div> <script> var RENDERER = { PARTICLE_COUNT : 1000, PARTICLE_RADIUS : 1, MAX_ROTATION_ANGLE : Math.PI / 60, TRANSLATION_COUNT : 500, init : function(strategy){ this.setParameters(strategy); this.createParticles(); this.setupFigure(); this.reconstructMethod(); this.bindEvent(); this.drawFigure(); }, setParameters : function(strategy){ this.$window = $(window); this.$container = $('#jsi-particle-container'); this.width = this.$container.width(); this.height = this.$container.height(); this.$canvas = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container); this.context = this.$canvas.get(0).getContext('2d'); this.center = {x : this.width / 2, y : this.height / 2}; this.rotationX = this.MAX_ROTATION_ANGLE; this.rotationY = this.MAX_ROTATION_ANGLE; this.strategyIndex = 0; this.translationCount = 0; this.theta = 0; this.strategies = strategy.getStrategies(); this.particles = []; }, createParticles : function(){ for(var i = 0; i < this.PARTICLE_COUNT; i ++){ this.particles.push(new PARTICLE(this.center)); } }, reconstructMethod : function(){ this.setupFigure = this.setupFigure.bind(this); this.drawFigure = this.drawFigure.bind(this); this.changeAngle = this.changeAngle.bind(this); }, bindEvent : function(){ this.$container.on('click', this.setupFigure); this.$container.on('mousemove', this.changeAngle); }, changeAngle : function(event){ var offset = this.$container.offset(), x = event.clientX - offset.left + this.$window.scrollLeft(), y = event.clientY - offset.top + this.$window.scrollTop(); this.rotationX = (this.center.y - y) / this.center.y * this.MAX_ROTATION_ANGLE; this.rotationY = (this.center.x - x) / this.center.x * this.MAX_ROTATION_ANGLE; }, setupFigure : function(){ for(var i = 0, length = this.particles.length; i < length; i++){ this.particles[i].setAxis(this.strategies[this.strategyIndex]()); } if(++this.strategyIndex == this.strategies.length){ this.strategyIndex = 0; } this.translationCount = 0; }, drawFigure : function(){ requestAnimationFrame(this.drawFigure); this.context.fillStyle = 'rgba(0, 0, 0, 0.2)'; this.context.fillRect(0, 0, this.width, this.height); for(var i = 0, length = this.particles.length; i < length; i++){ var axis = this.particles[i].getAxis2D(this.theta); this.context.beginPath(); this.context.fillStyle = axis.color; this.context.arc(axis.x, axis.y, this.PARTICLE_RADIUS, 0, Math.PI * 2, false); this.context.fill(); } this.theta++; this.theta %= 360; for(var i = 0, length = this.particles.length; i < length; i++){ this.particles[i].rotateX(this.rotationX); this.particles[i].rotateY(this.rotationY); } this.translationCount++; this.translationCount %= this.TRANSLATION_COUNT; if(this.translationCount == 0){ this.setupFigure(); } } }; var STRATEGY = { SCATTER_RADIUS :150, CONE_ASPECT_RATIO : 1.5, RING_COUNT : 5, getStrategies : function(){ var strategies = []; for(var i in this){ if(this[i] == arguments.callee || typeof this[i] != 'function'){ continue; } strategies.push(t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0