js动态效果代码、js动态效果代码怎么写 收藏 0

12 个最佳 JavaScript 动画库，让您的 Web 页面动起来

你准备好把你的网页设计提升到一个新的水平了吗？JavaScript 动画库是可以将静态页面转换为动态、引人注目的体验的秘密武器。无论您是经验丰富的开发人员还是刚刚起步的开发人员，这些库都能提供强大的工具，将您的创意愿景变为现实。让我们深入了解 12 年掀起波澜的 2024 大 JavaScript 动画库！

GSAP就像动画库的瑞士军刀。它坚固耐用、用途广泛，深受全球专业人士的喜爱。

例：

这个简单的代码使框元素向右移动 300 像素，同时旋转 360 度，具有弹性效果。

Anime.js证明，有时候，少即是多。它的轻巧特性不会在功率上妥协。

例：

此动画在 3 秒内平滑移动并放大圆形元素。

Velocity.js都是关于性能的，同时又不牺牲功能。这就像在你的动画上绑上火箭一样！

例：

此代码将元素向下转换 200 像素，并在一秒钟内将其旋转 45 度。

Three.js开辟了一个全新的维度 – 从字面上看！它是您在浏览器中创建令人惊叹的 3D 图形的门户。

例：

此代码段创建了一个简单的绿色 3D 立方体，您可以对其进行操作和动画制作。

Lottie 将复杂的动画变成了小菜一碟。这就像你的口袋里有一个专业的动画师！

例：

此代码从 JSON 文件加载并播放 Lottie 动画。

Popmotion就像一条变色龙 – 它可以轻松适应任何JavaScript环境。

例：

这个简单的动画从 0 到 100 计数，记录每个值。

Mo.js使创建动态图形就像用蜡笔绘图一样简单，但结果却更加壮观！

例：

此代码创建一个连拍动画，其中包含五个扩展和改变颜色的圆圈。

Typed.js为您的文本增添了人情味。这就像在您的网站上有一个幽灵打字员！

例：

这将创建一个在两个短语之间交替的键入动画。

AniJS 就像魔术一样 – 您无需编写任何代码即可创建动画！

例：

此 HTML 属性在单击时创建淡入动画。

Framer、Motion 和 React 就像花生酱和果冻一样搭配在一起。它是你的 React 工具包的完美补充。

例：

这个 React 组件在 2 秒内向右移动 100 个像素。

ScrollMagic 将滚动变成一场冒险。这就像在用户滚动浏览您的网站时创建一部迷你电影！

例：

这将创建一个动画，该动画在用户滚动时缩放元素。

Motion One 证明了好东西来自小包装。它很轻，但很有冲击力！

例：

这条简单的线在一秒钟内将一个盒子向右移动 100 像素。

你有这12 个令人惊叹的 JavaScript 动画库，可以将您的 Web 项目从普通转变为非凡。无论您是创建简单的悬停效果还是复杂的 3D 世界，这些库都能满足您的需求。

请记住，最适合您的库取决于您的特定需求和项目要求。不要害怕尝试不同的选项来找到您的完美匹配。

「开源分享」Three.js实现脸书元宇宙3D动态Logo

Facebook 近期将其母公司改名为 Meta，宣布正式开始进军 元宇宙 领域。本文主要讲述通过 Three.js + Blender 技术栈，实现 Meta 公司炫酷的 3D 动态 Logo，内容包括基础模型圆环、环面扭结、管道及模型生成、模型加载、添加动画、添加点击事件、更换材质等。

元宇宙 Metaverse 一词源于 1992 年尼尔·斯蒂芬森的 《雪崩》，该书描述了一个平行于现实世界的虚拟世界 Metaverse，所有现实生活中的人都有一个网络分身 Avatar。维基百科 对元宇宙的描述是：通过虚拟增强的物理现实，呈现收敛性和物理持久性特征的，基于未来互联网，具有链接感知和共享特征的 3D 虚拟空间。

元宇宙的内涵是吸纳了信息革命 5G/6G、互联网革命 web3.0、人工智能革命，以及 VR、AR、MR，特别是游戏引擎在内的虚拟现实技术革命的成果，向人类展现出构建与传统物理世界平行的全息数字世界的可能性；引发了信息科学、量子科学，数学和生命科学的互动，改变科学范式；推动了传统的哲学、社会学甚至人文科学体系的突破；囊括了所有的数字技术。正如电影 《头号玩家》 的场景，在未来某一天，人们可以随时随地切换身份，自由穿梭于物理世界和数字世界，在虚拟空间和时间节点所构成的元宇宙中生活学习。

进入正题，先来看看本文示例的实现效果。

在线预览：https://dragonir.github.io/3d-meta-logo （由于模型较大，加载进度可能比较缓慢，需要耐心等待）

注意：上述示例动图展示的是试炼四，不想看试错过程（试炼一、试炼二、试炼三）的，可直接跳转到试炼四段落查看详细实现流程。失败流程中都列出了难点，知道解决方案的大佬请在评论区不吝赐教。

开发之前我们先观察一下 Meta Logo，可以发现它是一个圆环经过对折扭曲形成的，因此实现它的时候可以从实现圆环开始。

Three.js 提供的基础几何体 THREE.TorusGeometry（圆环），它是一种看起来像甜甜圈 的简单图形。主要参数：

• radius：可选。定义圆环的半径尺寸。默认值是 1。
• tube：可选。定义圆环的管子半径。默认值是 0.4。
• radialSegments：可选。定义圆环长度方向上的分段数。默认值是 8。
• tubularSegments：可选。定义圆环宽度方向上的分段数。默认值是 6。
• arc：可选。定义圆环绘制的长度。取值范围是 0 到 2 * π。默认值是 2 * π（一个完整的圆）。

语法示例：

失败：没有找到扭曲圆环的方法。

THREE.TorusKnotGeometry 可以用来创建三维环面扭结，环面扭结是一种比较特别的结，看上去像一根管子绕着它自己旋转了几圈。主要参数：

• radius：可选。设置完整圆环的半径，默认值是 1。
• tube：可选。设置管道的半径，默认值是 0.4。
• radialSegments：可选。指定管道截面的分段数，段数越多，管道截面圆越光滑，默认值是 8。
• tubularSegments：可选。指定管道的分段数，段数越多，管道越光滑，默认值是 64。
• p：可选。决定几何体将绕着其旋转对称轴旋转多少次，默认值是 2。
• q：可选。决定几何体将绕着其内部圆环旋转多少次，默认值是 3。

语法示例：

失败：没找到能够控制手动扭曲程度的方法。

THREE.TubeGeometry 沿着一条三维的样条曲线拉伸出一根管。你可以指定一些定点来定义路径，然后使用 THREE.TubeGeometry 创建这根管。主要参数：

• path：该属性用一个 THREE.SplineCurve3 对象来指定管道应当遵循的路径。
• segments：该属性指定构建这个管所用的分段数。默认值为 64.路径越长，指定的分段数应该越多。
• radius：该属性指定管的半径。默认值为 1.
• radiusSegments：该属性指定管道圆周的分段数。默认值为 8，分段数越多，管道看上去越圆。
• closed：如果该属性设置为 true，管道的头和尾会连起来，默认值为 false。

代码示例

勉强成功：但是管道连成的圆环不够圆，实现完美的圆弧需要精确的坐标，暂时没找到坐标计算方法。

虽然使用 THREE.TubeGeometry 可以勉强实现，但是效果并不好，要实现圆滑的环，需要为管道添加精确的扭曲圆环曲线路径函数。由于数学能力有限 ️，暂时没找到扭曲圆弧路径计算的方法。因此决定从建模层面解决。

成功 ：但是手残的我使用 Blender 建模花费了大量的时间 。

逛 B站 的时候发现了这位大佬发的宝藏视频，刚好解决了自己的难题。

传送门：【动态设计教程】AE+blender能怎么玩？脸书元宇宙Meta动态logo已完全解析，100%学会

使用 Blender 进行建模，并导出可携带动画的 fbx 格式，导出的时候不要忘记勾选 烘焙动画 选项。

想了解场景初始化的详细流程，可阅读我的另一篇文章《使用three.js实现炫酷的酸性风格3D页面》。

使用 FBXLoader 加载模型，并设置模型的位置和大小。

本文 Logo 使用的是 MeshPhysicalMaterial材质，它是一种 PBR 物理材质，可以更好的模拟光照计算，相比较高光网格材质 MeshPhongMaterial 渲染效果更逼真。使用 THREE.TextureLoader 为材质添加 map 属性来加载模型贴图。下图是金属质感的纹理贴图。

• AnimationMixer 对象是场景中特定对象的动画播放器。当场景中的多个对象独立动画时，可以为每个对象使用一个 AnimationMixer。
• AnimationMixer 对象的 clipAction 方法生成可以控制执行动画的实例。

添加动画之后，不要忘了要在 requestAnimationFrame 中更新动画。

FBXLoader 同时返回两个回调函数，可以像下面这样使用，用来展示模型加载进程展示以及加载失败的逻辑实现。

实现效果

监听页面的点击事件，通过 HREE.Raycaster 拿到当前点击对象，为了展示例子，我为点击对象更换了一种材质 THREE.MeshStandardMaterial，并赋予它随机的 color 颜色、metalness 金属质感以及 roughness 粗糙程度。

更多关于网格材质的知识，可参考文章末尾的链接。

人物模型的加载流程和 Logo 模型加载流程是一样的。我添加了一个正在施展龟派气功的人物，没想到与 Logo 模型的旋转动画非常契合 。

本文示例人物模型来源于mixamo.com，该网站有有上百种人物和上千种动作可自由组合，免费 下载。大家可以挑选自己喜欢的人物和动画动作来练习 Three.js。

本文中涉及到的主要知识点包括：

• THREE.TorusGeometry：圆环。
• THREE.TorusKnotGeometry：环面扭结。
• THREE.TubeGeometry：管道。
• Blender: 建模。
• FBXLoader: 加载模型，显示加载进度。
• TextureLoader：加载材质。
• THREE.AnimationMixer：加载动画。
• THREE.Raycaster：捕获点击模型。

如果你对源码感兴趣，请点赞+转发+关注+私信【logo】。

欢迎点赞+转发+关注！大家的支持是我分享最大的动力！！！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com