【愚公系列】2024年02月 WEBGL专题-动画效果
【摘要】 🏆 作者简介，愚公搬代码🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，51CTO博客专家等。🏆《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。🏆《博客内容...
🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，51CTO博客专家等。
🏆《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏
🚀前言
动画效果是指通过图形、图像或视频的运动、变换或其他视觉元素的改变来呈现出一种动态的视觉效果。它可以使图像或视频更加生动、吸引人，并能够更好地传达信息。动画效果广泛应用于电影、电视、广告、网页设计、游戏等领域，可以增强视觉体验和用户界面的交互性。常见的动画效果包括闪烁、平移、缩放、淡入淡出、旋转、颜色变化等。
🚀一、动画效果
🔎1.百叶窗
百叶窗动画效果是一种网页动画效果，模仿实际百叶窗的开合方式，通过快速旋转、伸缩等动画效果来模拟百叶窗的运动。在网页设计中应用广泛，可以用来优化用户体验、增强页面交互性，常用于图片轮播、菜单展开、页面切换等场景。
百叶窗动画效果主要依赖于CSS3的transform和transition属性来实现。通过将元素沿着X、Y轴方向旋转或伸缩，可以制作出不同方向和效果的百叶窗动画。同时，结合JavaScript或CSS动态添加类名等操作，可以控制动画触发和停止，实现更加灵活的效果展示。
一般而言，百叶窗动画效果需要考虑到动画的流畅性、过渡效果的自然性和操作的易用性，更好地提升用户的体验感。
<!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.淡入淡出
淡入淡出动画效果是指在图像或视频的过渡过程中，原始画面逐渐淡出，同时新的画面逐渐淡入，以达到平滑过渡的效果。通过淡入淡出的效果，可以增加画面的流畅感和美感，使视觉效果更加舒适。该效果通常应用于电影、电视节目和网页设计等领域。
<!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.卷入卷出
卷入卷出动画效果是一种过渡效果，通常用于网页设计或幻灯片演示。这种动画效果将一个元素从屏幕外部或隐藏的位置“滑动”到屏幕内或显示的位置，或将一个元素从屏幕内部或显示的位置“滑动”到屏幕外或隐藏的位置。这种过渡通常伴随着动画效果，如淡入淡出或缩放效果。卷入卷出动画效果可以使网页或幻灯片更加生动有趣，吸引观众的注意力。
<!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>
🚀感谢：给读者的一封信
亲爱的读者，
我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。
如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。
我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。
如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。
再次感谢您的阅读和支持！
最诚挚的问候， “愚公搬代码”
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）