gsap+svg实现圣诞树烟花绽放动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+svg实现圣诞树烟花绽放动画效果代码,集合gsap全家桶插件实现炫酷烟花跟随鼠标绽放,圣诞树烟花绘制成型动画,文字动画,寓意2023年即将开始,明年会更好。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui,shrink-to-fit=no,viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <script>class ShaderProgram { constructor( holder, options = {} ) { options = Object.assign( { antialias: false, depthTest: false, mousemove: false, autosize: true, msaa: 0, vertex: ` precision highp float; attribute vec4 a_position; attribute vec4 a_color; uniform float u_time; uniform vec2 u_resolution; uniform vec2 u_mousemove; uniform mat4 u_projection; varying vec4 v_color; void main() { gl_Position = u_projection * a_position; gl_PointSize = (10.0 / gl_Position.w) * 100.0; v_color = a_color; }`, fragment: ` precision highp float; uniform sampler2D u_texture; uniform int u_hasTexture; varying vec4 v_color; void main() { if ( u_hasTexture == 1 ) { gl_FragColor = v_color * texture2D(u_texture, gl_PointCoord); } else { gl_FragColor = v_color; } }`, uniforms: {}, buffers: {}, camera: {}, texture: null, onUpdate: ( () => {} ), onResize: ( () => {} ), }, options ) const uniforms = Object.assign( { time: { type: 'float', value: 0 }, hasTexture: { type: 'int', value: 0 }, resolution: { type: 'vec2', value: [ 0, 0 ] }, mousemove: { type: 'vec2', value: [ 0, 0 ] }, projection: { type: 'mat4', value: [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ] }, }, options.uniforms ) const buffers = Object.assign( { position: { size: 3, data: [] }, color: { size: 4, data: [] }, }, options.buffers ) const camera = Object.assign( { fov: 60, near: 1, far: 10000, aspect: 1, z: 100, perspective: true, }, options.camera ) const canvas = document.createElement( 'canvas' ) const gl = canvas.getContext( 'webgl', { antialias: options.antialias } ) if ( ! gl ) return false this.count = 0 this.gl = gl this.canvas = canvas this.camera = camera this.holder = holder this.msaa = options.msaa this.onUpdate = options.onUpdate this.onResize = options.onResize this.data = {} holder.appendChild( canvas ) this.createProgram( options.vertex, options.fragment ) this.createBuffers( buffers ) this.createUniforms( uniforms ) this.updateBuffers() this.updateUniforms() this.createTexture( options.texture ) gl.enable( gl.BLEND ) gl.enable( gl.CULL_FACE ) gl.blendFunc( gl.SRC_ALPHA, gl.ONE ) gl[ options.depthTest ? 'enable' : 'disable' ]( gl.DEPTH_TEST ) if ( options.autosize ) window.addEventListener( 'resize', e => this.resize( e ), false ) if ( options.mousemove ) window.addEventListener( 'mousemove', e => this.mousemove( e ), false ) this.resize() this.update = this.update.bind( this ) this.time = { start: performance.now(), old: performance.now() } this.update() } mousemove( e ) { let x = e.pageX / this.width * 2 - 1 let y = e.pageY / this.height * 2 - 1 this.uniforms.mousemove = [ x, y ] } resize( e ) { const holder = this.holder const canvas = this.canvas const gl = this.gl const width = this.width = holder.offsetWidth const height = this.height = holder.offsetHeight const aspect = this.aspect = width / height const dpi = this.dpi = Math.max( this.msaa ? 2 : 1, devicePixelRatio ) canvas.width = width * dpi canvas.height = height * dpi canvas.style.width = width + 'px' canvas.style.height = height + 'px' gl.viewport( 0, 0, width * dpi, height * dpi ) gl.clearColor( 0, 0, 0, 0 ) this.uniforms.resolution = [ width, height ] this.uniforms.projection = this.setProjection( aspect ) this.onResize( width, height, dpi ) } setProjection( aspect ) { const camera = this.camera if ( camera.perspective ) { camera.aspect = aspect const fovRad = camera.fov * ( Math.PI / 180 ) const f = Math.tan( Math.PI * 0.5 - 0.5 * fovRad ) const rangeInv = 1.0 / ( camera.near - camera.far ) const matrix = [ f / camera.aspect, 0, 0, 0, 0, f, 0, 0, 0, 0, (camera.near + camera.far) * rangeInv, -1, 0, 0, camera.near * camera.far * rangeInv * 2, 0 ] matrix[ 14 ] += camera.z matrix[ 15 ] += camera.z return matrix } else { return [ 2 / this.width, 0, 0, 0, 0, -2 / this.height, 0, 0, 0, 0, 1, 0, -1, 1, 0, 1, ] } } createShader( type, source ) { const gl = this.gl const shader = gl.createShader( type ) gl.shaderSource( shader, source ) gl.compileShader( shader ) if ( gl.getShaderParameter (shader, gl.COMPILE_STATUS ) ) { return shader } else { console.log( gl.getShaderInfoLog( shader ) ) gl.deleteShader( shader ) } } createProgram( vertex, fragment ) { const gl = this.gl const vertexShader = this.createShader( gl.VERTEX_SHADER, vertex ) const fragmentShader = this.createShader( gl.FRAGMENT_SHADER, fragment ) const program = gl.createProgram() gl.attachShader( program, vertexShader ) gl.attachShader( program, fragmentShader ) gl.linkProgram( program ) if ( gl.getProgramParameter( program, gl.LINK_STATUS ) ) { gl.useProgram( program ) this.program = program } else { console.log( gl.getProgramInfoLog( program ) ) gl.deleteProgram( program ) } } createUniforms( data ) { const gl = this.gl const uniforms = this.data.uniforms = data const values = this.uniforms = {} Object.keys( uniforms ).forEach( name => { const uniform = uniforms[ name ] uniform.location = gl.getUniformLocation( this.program, 'u_' + name ) Object.defineProperty( values, name, { set: value => { uniforms[ name ].value = value this.setUniform( name, value ) }, get: () => uniforms[ name ].value } ) } ) } setUniform( name, value ) { const gl = this.gl const uniform = this.data.uniforms[ name ] uniform.value = value switch ( uniform.type ) { case 'int': { gl.uniform1i( uniform.location, value ) break } case 'float': { gl.uniform1f( uniform.location, value ) break } case 'vec2': { gl.uniform2f( uniform.location, ...value ) break } case 'vec3': { gl.uniform3f( uniform.location, ...value ) break } case 'vec4': { gl.uniform4f( uniform.location, ...value ) break } case 'mat2': { gl.uniformMatrix2fv( uniform.location, false, value ) break } case 'mat3': { gl.uniformMatrix3fv( uniform.location, false, value ) break } case 'mat4': { gl.uniformMatrix4fv( uniform.location, false, value ) break } } // ivec2 : uniform2i, // ivec3 : uniform3i, // ivec4 : uniform4i, // sampler2D : uniform1i, // samplerCube : uniform1i, // bool : uniform1i, // bvec2 : uniform2i, // bvec3 : uniform3i, // bvec4 : uniform4i, } updateUniforms() { const gl = this.gl const uniforms = this.data.uniforms Object.keys( uniforms ).forEach( name => { const uniform = uniforms[ name ] this.uniforms[ name ] = uniform.value } ) } createBuffers( data ) { const gl = this.gl const buffers = this.data.buffers = data const values = this.buffers = {} Object.keys( buffers ).forEach( name => { const buffer = buffers[ name ] buffer.buffer = this.createBuffer( 'a_' + name, buffer.size ) Object.defineProperty( values, name, { set: data => { buffers[ name ].data = data this.setBuffer( name, data ) if ( name == 'position' ) this.count = buffers.position.data.length / 3 }, get: () => buffers[ name ].data } ) } ) } createBuffer( name, size ) { const gl = this.gl const program = this.program const index = gl.getAttribLocation( program, name ) const buffer = gl.createBuffer() gl.bindBuffer( gl.ARRAY_BUFFER, buffer ) gl.enableVertexAttribArray( index ) gl.vertexAttribPointer( index, size, gl.FLOAT, false, 0, 0 ) return buffer } setBuffer( name, data ) { const gl = this.gl const buffers = this.data.buffers if ( name == null && ! gl.bindBuffer( gl.ARRAY_BUFFER, null ) ) return gl.bindBuffer( gl.ARRAY_BUFFER, buffers[ name ].buffer ) gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( data ), gl.STATIC_DRAW ) } updateBuffers() { const gl = this.gl const buffers = this.buffers Object.keys( buffers ).forEach( name => buffers[ name ] = buffer.data ) this.setBuffer( null ) } createTexture( src ) { const gl = this.gl const texture = gl.createTexture() gl.bindTexture( gl.TEXTURE_2D, texture ) gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array( [ 0, 0, 0, 0 ] ) ) this.texture = texture if ( src ) { this.uniforms.hasTexture = 1 this.loadTexture( src ) } } loadTexture( src ) { const gl = this.gl const texture = this.texture const textureImage = new Image() textureImage.onload = () => { gl.bindTexture( gl.TEXTURE_2D, texture ) gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage ) gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR ) gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR ) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE) // gl.generateMipmap( gl.TEXTURE_2D ) } textureImage.src = src } update() { const gl = this.gl const now = performance.now() const elapsed = ( now - this.time.start ) / 5000 const delta = now - this.time.old this.time.old = now this.uniforms.time = elapsed if ( this.count > 0 ) { gl.clear( gl.COLORBUFFERBIT ) gl.drawArrays( gl.POINTS, 0, this.count ) } this.onUpdate( delta ) requestAnimationFrame( this.update ) } }</script> <style> *, *::after, *::before { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; font-family: sans-serif; letter-spacing: 1px; } :root { font-size: 2.2ch; } html { display: block; page-transition-tag: root; } body { width: 100%; height: 100dvh; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; content-visibility: auto; contain-intrinsic-size: 350px; container-type: inline-size; transform: translateZ(0) translate3d(0, 0, 0); transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; -ms-perspective: 1000; perspective: 1000; } #snow { display: block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: #040b0e; background-image: linear-gradient(to bottom, #040b0e, #000); will-change: opacity, visibility; } /*partocles artificio*/ #particles { margin: 0; display: block; width: 100%; height: 100%; position: fixed; left: 0; top: 0; right: 0; bottom: 0; mix-blend-mode: difference; -webkit-mix-blend-mode: difference; overflow: hidden; } #fuori_artificio { width: 100vw; height: 100vh; } /*text effect*/ .albero { position: relative; z-index: 1; pointer-events: none; } .albero svg { width: 95%; height: 95%; visibility: hidden; } .sparkle { mix-blend-mode: luminosity; } /*augurio*/ .augurio { opacity: 0; color: white; } .augurio, .mask { position: relative; width: auto; height: auto; text-align: center; z-index: 2; padding: 2em; pointer-events: auto; color: white; } /*.mask{color:transparent}*/ /*.mask { -webkit-mask-image: -webkit-linear-gradient( left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100% ); }*/ .split-line { overflow: hidden; } .split-line * * { visibility: hidden; will-change: transform, opacity; } </style> </head> <body > <div id="snow" aria-hidden="true"></div> <div id='particles' aria-hidden="true"> <canvas id="fuori_artificio" width="550" height="500" aria-hidden="true"></canvas> </div> <div class="albero"> <svg role="img" aria-label="A shining Christmas Tree animated" class="mainSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600"> <defs> <circle id="circ" class="particle" cx="0" cy="0" r="1" /> <polygon id="star" class="particle" points="4.55,0 5.95,2.85 9.1,3.3 6.82,5.52 7.36,8.65 4.55,7.17 1.74,8.65 2.27,5.52 0,3.3 3.14,2.85 " /> <polygon id="cross" class="particle" points="4,3.5 2.5,2 4,0.5 3.5,0 2,1.5 0.5,0 0,0.5 1.5,2 0,3.5 0.5,4 2,2.5 3.5,4 " /> <path id="heart" class="particle" d="M2.9,0C2.53,0,2.2,0.18,2,0.47C1.8,0.18,1.47,0,1.1,0C0.49,0,0,0.49,0,1.1 C0,2.6,1.56,4,2,4s2-1.4,2-2.9C4,0.49,3.51,0,2.9,0z" /> <radialGradient id="grad" cx="3" cy="3" r="6" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:red" /> <stop offset="0.4" style="stop-color:#334673" /> <stop offset="0.6" style="stop-color:#EDDDC4" /> <stop offset="0.9" style="stop-color:#FEE8C7" /> <stop offset="1" style="stop-color:red" /> </radialGradient> <radialGradient id="dotGrad" cx="0" cy="0" r="50" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:1" /> <stop offset="0.1" style="stop-color:#0867C7;stop-opacity:0.6" /> <stop offset="1" style="stop-color:#081029;stop-opacity:0" /> </radialGradient> <mask id="treePathMask"> <path class="treePathMask" fill="none" stroke-width="18" stroke="#FFF" d="M252.9,447.9c0,0-30.8-21.6,33.9-44.7c64.7-23.1,46.2-37,33.9-41.6 c-12.3-4.6-59.3-11.6-42.4-28.5s114-52.4,81.7-66.2c-32.4-13.9-58.5-10.8-35.4-29.3s66.2-101.7,70.9-115.6 c4.4-13.2,16.9-18.5,24.7,0c7.7,18.5,44.7,100.1,67.........完整代码请登录后点击上方下载按钮下载查看
网友评论0