效果图

各位长友，大家上午好！

今天给大家带来的是 canvas 弹簧网波动动画特效源码！

看完有没有想踩上去蹦一蹦的感觉！

有想要文件版源码的 可以私聊小编哦！

废话不多说，上源码!

JS：

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();Object.defineProperty(exports,"__esModule",{value:true});var _three=require("three");var _three2=_interopRequireDefault(_three);var _Wave=require("./objects/Wave");var _Wave2=_interopRequireDefault(_Wave);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}window.THREE=_three2.default;var Webgl=function(){function Webgl(width,height){_classCallCheck(this,Webgl);this.params={usePostprocessing:false};this.scene=new _three2.default.Scene;this.camera=new _three2.default.PerspectiveCamera(50,width/height,1,1e3);this.camera.position.z=100;this.renderer=new _three2.default.WebGLRenderer;this.renderer.setSize(width,height);this.renderer.setClearColor(2500134);this.composer=null;this.initPostprocessing();this.clock=new _three2.default.Clock(true);this.wave=new _Wave2.default;this.wave.position.set(0,0,0);this.scene.add(this.wave)}_createClass(Webgl,[{key:"initPostprocessing",value:function initPostprocessing(){if(!this.params.usePostprocessing){return}}},{key:"resize",value:function resize(width,height){if(this.composer){this.composer.setSize(width,height)}this.camera.aspect=width/height;this.camera.updateProjectionMatrix();this.renderer.setSize(width,height)}},{key:"render",value:function render(){if(this.params.usePostprocessing){}else{this.renderer.render(this.scene,this.camera)}var t=this.clock.getElapsedTime();this.wave.update(t)}}]);return Webgl}();exports.default=Webgl},{"./objects/Wave":3,three:8}],2:[function(require,module,exports){"use strict";var _Webgl=require("./Webgl");var _Webgl2=_interopRequireDefault(_Webgl);var _raf=require("raf");var _raf2=_interopRequireDefault(_raf);require("gsap");function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var webgl=undefined;var gui=undefined;webgl=new _Webgl2.default(window.innerWidth,window.innerHeight);document.body.appendChild(webgl.renderer.domElement);window.addEventListener("resize",resizeHandler);animate();function resizeHandler(){webgl.resize(window.innerWidth,window.innerHeight)}function animate(){(0,_raf2.default)(animate);webgl.render()}},{"./Webgl":1,gsap:4,raf:7}],3:[function(require,module,exports){"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();Object.defineProperty(exports,"__esModule",{value:true});var _three=require("three");var _three2=_interopRequireDefault(_three);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return call&&(typeof call==="object"||typeof call==="function")?call:self}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass)}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass}var Wave=function(_THREE$Object3D){_inherits(Wave,_THREE$Object3D);function Wave(){_classCallCheck(this,Wave);var _this=_possibleConstructorReturn(this,Object.getPrototypeOf(Wave).call(this));_this.ready=false;_this.particleSprite;_this.uniforms={time:{type:"f",value:0}};_this.nbParticles=0;_this.particleSize=2;_this.plane=new _three2.default.PlaneGeometry(150,100,150,150);_this.geometry=new _three2.default.BufferGeometry;_this.material=new _three2.default.ShaderMaterial({uniforms:_this.uniforms,vertexShader:"#define GLSLIFY 1\nattribute float size;\n\nuniform float time;\n\nvoid main() {\n vec3 newPosition = position;\n float displacement = sin( (position.x + time) * 0.3 ) * 2.0 +\n sin( (position.y + time) * 0.2 ) * 2.0;\n\n newPosition.z = displacement * (.06 * cos(0.5 * time) * position.x - 0.04 * position.y * sin(0.5 * time));\n // newPosition.z = displacement * 2.0 * sin(.06 * cos(time) * position.x + 0.04 * position.y * sin(time));\n\n // gl_PointSize = (sin( (position.x + time) * 0.3 ) + 1.0 ) * 1.5 +\n // (sin( (position.y + time) * 0.2 ) + 1.0 ) * 1.5;\n\n gl_PointSize = 2.0;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );\n}",fragmentShader:"#define GLSLIFY 1\nvoid main() {\n gl_FragColor = vec4( 1.0, 1.0, 1.0, 0.45 );\n}",depthTest:false,transparent:true});_this.init();_this.points=new _three2.default.Points(_this.geometry,_this.material);_this.points.rotation.x=-.45*Math.PI;_this.add(_this.points);_this.ready=true;return _this}_createClass(Wave,[{key:"init",value:function init(){this.nbParticles=this.plane.vertices.length;this.positions=new Float32Array(this.nbParticles*3);this.sizes=new Float32Array(this.nbParticles);for(var i=0,i3=0;i<this.nbParticles;i++,i3+=3){this.positions[i3+0]=this.plane.vertices[i].x;this.positions[i3+1]=this.plane.vertices[i].y;this.positions[i3+2]=this.plane.vertices[i].z;this.sizes[i]=this.particleSize}this.geometry.addAttribute("position",new _three2.default.BufferAttribute(this.positions,3));this.geometry.addAttribute("size",new _three2.default.BufferAttribute(this.sizes,1))}},{key:"update",value:function update(t){if(!this.ready){return}this.material.uniforms.time.value=t}}]);return Wave}(_three2.default.Object3D);exports.default=Wave},{three:8}],4:[function(require,module,exports){(function(global){var _gsScope=typeof module!=="undefined"&&module.exports&&typeof global!=="undefined"?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("TweenMax",["core.Animation","core.SimpleTimeline","TweenLite"],function(Animation,SimpleTimeline,TweenLite){var _slice=function(a){var b=[],l=a.length,i;for(i=0;i!==l;b.push(a[i++]));return b},_applyCycle=function(vars,targets,i){var alt=vars.cycle,p,val;for(p in alt){val=alt[p];vars[p]=typeof val==="function"?val.call(targets[i],i):val[i%val.length]}delete vars.cycle},TweenMax=function(target,duration,vars){TweenLite.call(this,target,duration,vars);this._cycle=0;this._yoyo=this.vars.yoyo===true;this._repeat=this.vars.repeat||0;this._repeatDelay=this.vars.repeatDelay||0;this._dirty=true;this.render=TweenMax.prototype.render},_tinyNum=1e-10,TweenLiteInternals=TweenLite._internals,_isSelector=TweenLiteInternals.isSelector,_isArray=TweenLiteInternals.isArray,p=TweenMax.prototype=TweenLite.to({},.1,{}),_blankArray=[];TweenMax.version="1.18.0";p.constructor=TweenMax;p.kill()._gc=false;TweenMax.killTweensOf=TweenMax.killDelayedCallsTo=TweenLite.killTweensOf;TweenMax.getTweensOf=TweenLite.getTweensOf;TweenMax.lagSmoothing=TweenLite.lagSmoothing;TweenMax.ticker=TweenLite.ticker;TweenMax.render=TweenLite.render;p.invalidate=function(){this._yoyo=this.vars.yoyo===true;this._repeat=this.vars.repeat||0;this._repeatDelay=this.vars.repeatDelay||0;this._uncache(true);return TweenLite.prototype.invalidate.call(this)};p.updateTo=function(vars,resetDuration){var curRatio=this.ratio,immediate=this.vars.immediateRender||vars.immediateRender,p;if(resetDuration&&this._startTime<this._timeline._time){this._startTime=this._timeline._time;this._uncache(false);if(this._gc){this._enabled(true,false)}else{this._timeline.insert(this,this._startTime-this._delay)}}for(p in vars){this.vars[p]=vars[p]}if(this._initted||immediate){if(resetDuration){this._initted=false;if(immediate){this.render(0,true,true)}}else{if(this._gc){this._enabled(true,false)}if(this._notifyPluginsOfEnabled&&this._firstPT){TweenLite._onPluginEvent("_onDisable",this)}if(this._time/this._duration>.998){var prevTime=this._time;this.render(0,true,false);this._initted=false;this.render(prevTime,true,false)}else if(this._time>0||immediate){this._initted=false;this._init();var inv=1/(1-curRatio),pt=this._firstPT,endValue;while(pt){endValue=pt.s+pt.c;pt.c*=inv;pt.s=endValue-pt.c;pt=pt._next}}}}return this};p.render=function(time,suppressEvents,force){if(!this._initted)if(this._duration===0&&this.vars.repeat){this.invalidate()}var totalDur=!this._dirty?this._totalDuration:this.totalDuration(),prevTime=this._time,prevTotalTime=this._totalTime,prevCycle=this._cycle,duration=this._duration,prevRawPrevTime=this._rawPrevTime,isComplete,callback,pt,cycleDuration,r,type,pow,rawPrevTime;if(time>=totalDur){this._totalTime=totalDur;this._cycle=this._repeat;if(this._yoyo&&(this._cycle&1)!==0){this._time=0;this.ratio=this._ease._calcEnd?this._ease.getRatio(0):0}else{this._time=duration;this.ratio=this._ease._calcEnd?this._ease.getRatio(1):1}if(!this._reversed){isComplete=true;callback="onComplete";force=force||this._timeline.autoRemoveChildren}if(duration===0)if(this._initted||!this.vars.lazy||force){if(this._startTime===this._timeline._duration){time=0}if(time===0||prevRawPrevTime<0||prevRawPrevTime===_tinyNum)if(prevRawPrevTime!==time){force=true;if(prevRawPrevTime>_tinyNum){callback="onReverseComplete"}}this._rawPrevTime=rawPrevTime=!suppressEvents||time||prevRawPrevTime===time?time:_tinyNum}}else if(time<1e-7){this._totalTime=this._time=this._cycle=0;this.ratio=this._ease._calcEnd?this._ease.getRatio(0):0;if(prevTotalTime!==0||duration===0&&prevRawPrevTime>0){callback="onReverseComplete";isComplete=this._reversed}if(time<0){this._active=false;if(duration===0)if(this._initted||!this.vars.lazy||force){if(prevRawPrevTime>=0){force=true}this._rawPrevTime=rawPrevTime=!suppressEvents||time||prevRawPrevTime===time?time:_tinyNum}}if(!this._initted){force=true}}else{this._totalTime=this._time=time;if(this._repeat!==0){cycleDuration=duration+this._repeatDelay;this._cycle=this._totalTime/cycleDuration>>0;if(this._cycle!==0)if(this._cycle===this._totalTime/cycleDuration){this._cycle--}this._time=this._totalTime-this._cycle*cycleDuration;if(this._yoyo)if((this._cycle&1)!==0){this._time=duration-this._time}if(this._time>duration){this._time=duration}else if(this._time<0){this._time=0}}if(this._easeType){r=this._time/duration;type=this._easeType;pow=this._easePower;if(type===1||type===3&&r>=.5){r=1-r}if(type===3){r*=2}if(pow===1){r*=r}else if(pow===2){r*=r*r}else if(pow===3){r*=r*r*r}else if(pow===4){r*=r*r*r*r}if(type===1){this.ratio=1-r}else if(type===2){this.ratio=r}else if(this._time/duration<.5){this.ratio=r/2}else{this.ratio=1-r/2}}else{this.ratio=this._ease.getRatio(this._time/duration)}}if(prevTime===this._time&&!force&&prevCycle===this._cycle){if(prevTotalTime!==this._totalTime)if(this._onUpdate)if(!suppressEvents){this._callback("onUpdate")}return}else if(!this._initted){this._init();if(!this._initted||this._gc){return}else if(!force&&this._firstPT&&(this.vars.lazy!==false&&this._duration||this.vars.lazy&&!this._duration)){this._time=prevTime;this._totalTime=prevTotalTime;this._rawPrevTime=prevRawPrevTime;this._cycle=prevCycle;TweenLiteInternals.lazyTweens.push(this);this._lazy=[time,suppressEvents];return}if(this._time&&!isComplete){this.ratio=this._ease.getRatio(this._time/duration)}else if(isComplete&&this._ease._calcEnd){this.ratio=this._ease.getRatio(this._time===0?0:1)}}if(this._lazy!==false){this._lazy=false}if(!this._active)if(!this._paused&&this._time!==prevTime&&time>=0){this._active=true}if(prevTotalTime===0){if(this._initted===2&&time>0){this._init()}if(this._startAt){if(time>=0){this._startAt.render(time,suppressEvents,force)}else if(!callback){callback="_dummyGS"}}if(this.vars.onStart)if(this._totalTime!==0||duration===0)if(!suppressEvents){this._callback("onStart")}}pt=this._firstPT;while(pt){if(pt.f){pt.t[pt.p](pt.c*this.ratio+pt.s)}else{pt.t[pt.p]=pt.c*this.ratio+pt.s}pt=pt._next}if(this._onUpdate){if(time<0)if(this._startAt&&this._startTime){this._startAt.render(time,suppressEvents,force)}if(!suppressEvents)if(this._totalTime!==prevTotalTime||isComplete){this._callback("onUpdate")}}if(this._cycle!==prevCycle)if(!suppressEvents)if(!this._gc)if(this.vars.onRepeat){this._callback("onRepeat")}if(callback)if(!this._gc||force){if(time<0&&this._startAt&&!this._onUpdate&&this._startTime){this._startAt.render(time,suppressEvents,force)}if(isComplete){if(this._timeline.autoRemoveChildren){this._enabled(false,false)}this._active=false}if(!suppressEvents&&this.vars[callback]){this._callback(callback)}if(duration===0&&this._rawPrevTime===_tinyNum&&rawPrevTime!==_tinyNum){this._rawPrevTime=0}}};TweenMax.to=function(target,duration,vars){return new TweenMax(target,duration,vars)};TweenMax.from=function(target,duration,vars){vars.runBackwards=true;vars.immediateRender=vars.immediateRender!=false;return new TweenMax(target,duration,vars)};TweenMax.fromTo=function(target,duration,fromVars,toVars){toVars.startAt=fromVars;toVars.immediateRender=toVars.immediateRender!=false&&fromVars.immediateRender!=false;return new TweenMax(target,duration,toVars)};TweenMax.staggerTo=TweenMax.allTo=function(targets,duration,vars,stagger,onCompleteAll,onCompleteAllParams,onCompleteAllScope){stagger=stagger||0;var delay=vars.delay||0,a=[],finalComplete=function(){if(vars.onComplete){vars.onComplete.apply(vars.onCompleteScope||this,arguments)}onCompleteAll.apply(onCompleteAllScope||vars.callbackScope||this,onCompleteAllParams||_blankArray)},cycle=vars.cycle,fromCycle=vars.startAt&&vars.startAt.cycle,l,copy,i,p;if(!_isArray(targets)){if(typeof targets==="string"){targets=TweenLite.selector(targets)||targets}if(_isSelector(targets)){targets=_slice(targets)}}targets=targets||[];if(stagger<0){targets=_slice(targets);targets.reverse();stagger*=-1}l=targets.length-1;for(i=0;i<=l;i++){copy={};for(p in vars){copy[p]=vars[p]}if(cycle){_applyCycle(copy,targets,i)}if(fromCycle){fromCycle=copy.startAt={};for(p in vars.startAt){fromCycle[p]=vars.startAt[p]}_applyCycle(copy.startAt,targets,i)}copy.delay=delay;if(i===l&&onCompleteAll){copy.onComplete=finalComplete}a[i]=new TweenMax(targets[i],duration,copy);delay+=stagger}return a};TweenMax.staggerFrom=TweenMax.allFrom=function(targets,duration,vars,stagger,onCompleteAll,onCompleteAllParams,onCompleteAllScope){vars.runBackwards=true;vars.immediateRender=vars.immediateRender!=false;return TweenMax.staggerTo