webgl+snap.svg实现花朵绽放漩涡慢动画效果代码

代码语言:html

所属分类:动画

代码描述:webgl+snap.svg实现花朵绽放漩涡慢动画效果代码,注意,动画很慢,特使是开始的时候。

代码标签: webgl snap.svg 花朵 绽放 漩涡 动画

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

<!DOCTYPE html>
<html lang="en" >

<head>
 
<meta charset="UTF-8">
 

 
 
<style>
body
,
html
{
 
overflow: hidden;
}

body
{
 
height: 100vh;
 
width: 100vw;
 
background: #0700cc;
 
z-index: -2;
 
margin: 0;
 
width: 100%;
 
overflow: hidden;
 
position: absolute;
 
filter: contrast(0.9) brightness(1.1);
 
top: 0;
 
left: 0;
 
mix-blend-mode: difference;
 
animation: filter 10s 5s ease-in 1 forwards;
}

@keyframes filter {
  to
{
   
filter: contrast(2.5) brightness(1.4);
 
}
}
canvas
{
 
position: absolute;
 
left: 0;
 
top: 0;
 
z-index: -1;
 
mix-blend-mode: difference;
}

#glcanvas {
 
width: 99.9vw;
 
height: 100vh;
 
position: absolute;
 
left: 0;
 
top: 0;
 
filter: contrast(1.5);
 
z-index: 0;
 
mix-blend-mode: hue;
}
</style>


 
</head>

<body translate="no">

 
<canvas id="glcanvas"></canvas>
 
<script id="vertex-shader" type="x-shader/x-vertex">
    attribute vec2 a_position
;
   
void main() {
      gl_Position
= vec4(a_position, 0.0, 1.0);
   
}
 
</script>
 
<script id="fragment-shader" type="x-shader/x-fragment">
    #ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;

float oscillate(float time, float minVal, float maxVal) {
    float sineWave = atan(time);
    float normalizedSine = (sineWave + 1.0) / 2.50;
    return mix(minVal, maxVal, normalizedSine);
}

vec3 palette(float t) {
    vec3 a = vec3(0.323, 0.1, 0.45);
    vec3 b = vec3(0.5, 0.3, 0.12);
    vec3 c = vec3(0.323, 0.9, 0.7);
    vec3 d = vec3(0.6, 0.3, 0.2);
    return a + b * tan(20.28318 * (c * t + d));
}

float removeDiscontinuity(float angle) {
    return smoothstep(angle, 0.0, 0.0);
}



void main() {
    vec2 uv = (gl_FragCoord.xy / u_resolution) * 2.0 - 1.0;
    uv.x *= u_resolution.x / u_resolution.y;
    float time = u_time/1.50;
   
    vec3 finalColor = vec3(0.0);

    float angle = atan(uv.y, uv.x);
    float radius = length(uv);

    float newAngle = removeDiscontinuity(angle);

    float spiral = sin(radius * oscillate(time, 1.0, 10.0) - time * .050 + angle * 15.0);
    spiral += sin(radius/oscillate(time, 0.01, 0.09) - time * 0.001 + angle * 15.0.........完整代码请登录后点击上方下载按钮下载查看

网友评论0