Article directory
foreword
Animation effects refer to presenting a dynamic visual effect through the movement, transformation or changes of other visual elements of graphics, images or videos. It can make an image or video more vivid, engaging, and better able to convey a message. Animation effects are widely used in film, television, advertising, web design, games and other fields, which can enhance the visual experience and the interactivity of the user interface. Common animation effects include blinking, panning, zooming, fading, rotating, color changing, etc.
1. Animation effect
1. Blinds
The blinds animation effect is a web animation effect that imitates the opening and closing of the actual blinds, and simulates the movement of the blinds through fast rotation, stretching and other animation effects. It is widely used in web design and can be used to optimize user experience and enhance page interactivity. It is often used in scenarios such as image carousel, menu expansion, and page switching.
The shutter animation effect mainly relies on the transform and transition properties of CSS3 to achieve. By rotating or stretching elements along the X and Y axes, you can create shutter animations with different directions and effects. At the same time, combined with JavaScript or CSS to dynamically add class names and other operations, you can control the triggering and stopping of animations to achieve more flexible effect display.
Generally speaking, the shutter animation effect needs to take into account the smoothness of the animation, the naturalness of the transition effect, and the ease of operation, so as to better enhance the user experience.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
canvas{
margin: 50px auto 0;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
const ctx = document.getElementById('canvas')
const gl = ctx.getContext('webgl')
// 创建着色器源码
const VERTEX_SHADER_SOURCE = `
// 只传递顶点数据
attribute vec4 aPosition;
varying vec4 vPosition;
void main() {
vPosition = aPosition;
gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)
gl_PointSize = 10.0;
}
`; // 顶点着色器
const FRAGMENT_SHADER_SOURCE = `
precision lowp float;
uniform float uHeight;
varying vec4 vPosition;
uniform float list[5]; // 声明一个数组变量
void main() {
for(int i = 0; i < 5; i++) {
if (vPosition.y > list[i + 1] && vPosition.y < list[i]) {
if (vPosition.y > uHeight - float(i) * 0.5) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
}
}
}
`; // 片元着色器
const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
const aPosition = gl.getAttribLocation(program, 'aPosition');
const uHeight = gl.getUniformLocation(program, 'uHeight');
const uList = gl.getUniformLocation(program,'list');
gl.uniform1fv(uList, [1.0, 0.5, 0.0, -0.5, -1.0]);
const points = new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
1.0, 1.0,
])
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition)
// gl.vertexAttrib2f(aPosition, 0.0, 0.0)
let value = 1;
function run() {
value -= 0.01;
gl.uniform1f(uHeight, value);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
requestAnimationFrame(run)
}
run();
</script>
2. Fade in and fade out
The fade-in and fade-out animation effect means that during the transition process of images or videos, the original picture gradually fades out, while the new picture gradually fades in, so as to achieve a smooth transition effect. Through the effect of fading in and fading out, the smoothness and beauty of the picture can be increased, making the visual effect more comfortable. This effect is commonly used in fields such as movies, TV shows, and web design.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
canvas{
margin: 50px auto 0;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
const ctx = document.getElementById('canvas')
const gl = ctx.getContext('webgl')
// 创建着色器源码
const VERTEX_SHADER_SOURCE = `
// 只传递顶点数据
attribute vec4 aPosition;
void main() {
gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)
gl_PointSize = 10.0;
}
`; // 顶点着色器
const FRAGMENT_SHADER_SOURCE = `
precision lowp float;
uniform float uOpacity;
void main() {
gl_FragColor = vec4(1.0,0.0,0.0,uOpacity);
}
`; // 片元着色器
const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
const aPosition = gl.getAttribLocation(program, 'aPosition');
const uOpacity = gl.getUniformLocation(program, 'uOpacity');
const points = new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
1.0, 1.0,
])
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition)
// gl.vertexAttrib2f(aPosition, 0.0, 0.0)
let value = 0;
function run() {
value += 0.01;
gl.uniform1f(uOpacity, value);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
requestAnimationFrame(run)
}
run();
</script>
3. Get in and out
A roll-in roll-out animation effect is a transition effect that is often used in web design or slideshow presentations. This animation effect "slides" an element from an off-screen or hidden position to an on-screen or revealed position, or "slides" an element from an on-screen or revealed position to an off-screen or hidden position. This transition is often accompanied by animation effects such as fades or scaling effects. Roll-in and roll-out animations can liven up a web page or slideshow and grab your audience's attention.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
canvas{
margin: 50px auto 0;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
const ctx = document.getElementById('canvas')
const gl = ctx.getContext('webgl')
// 创建着色器源码
const VERTEX_SHADER_SOURCE = `
// 只传递顶点数据
attribute vec4 aPosition;
varying vec4 vPosition;
void main() {
vPosition = aPosition;
gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)
gl_PointSize = 10.0;
}
`; // 顶点着色器
const FRAGMENT_SHADER_SOURCE = `
precision lowp float;
uniform float uHeight;
varying vec4 vPosition;
void main() {
// 向上卷 vPosition.y > uHeight uHeight 的取值范围 -1.0 1.0
// 向下卷 vPosition.y < uHeight uHeight 的取值范围 -1.0 1.0
// 向左卷 vPosition.x < uHeight uHeight 的取值范围 -1.0 1.0
// 向右卷 vPosition.x > uHeight uHeight 的取值范围 -1.0 1.0
// 左下-右上
// vPosition.x > uHeight && vPosition.y > uHeight
// uHeight 从 -1.0 到 1.0
if (vPosition.y > uHeight) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
} else {
gl_FragColor = vec4(1.0, 0.0, 0.0, 0.0);
}
}
`; // 片元着色器
const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
const aPosition = gl.getAttribLocation(program, 'aPosition');
const uHeight = gl.getUniformLocation(program, 'uHeight');
const points = new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
1.0, 1.0,
])
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition)
// gl.vertexAttrib2f(aPosition, 0.0, 0.0)
let value = -1;
function run() {
value += 0.01;
gl.uniform1f(uHeight, value);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
requestAnimationFrame(run)
}
run();
</script>