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创意页面

本文由dragonir授权发布，作者还有很多关于Three.js的作品，刚开始看到这个作品，觉得很有趣，虽然对Three.js完全不懂，哈哈，原文地址：https://segmentfault.com/a/1190000041261707，接下来分享这篇文章。

先看看效果：

虎年 春节将至，本文使用 React + Three.js 技术栈，实现趣味 3D 创意页面。本文包含的知识点主要包括：ShadowMaterial、 MeshPhongMaterial 两种基本材质的使用、使用 LoadingManager 展示模型加载进度、OrbitControls 的缓动动画、TWEEN简单补间动画效果等。

在线预览，已适配移动端：https://dragonir.github.io/3d/#/lunar

其中 GLTFLoader、FBXLoader 用于加在模型、OrbitControls 用户镜头轨道控制、TWEEN 用于生成补间动画。

这部分内容主要用于初始化场景和参数，详细讲解可点击文章末尾链接阅读我之前的文章，本文不再赘述。

Fog 场景雾化

本例中，打开页面时模型由远及近加载，颜色由白色变为彩色的功能就是通过 Fog 实现的。Fog 类定义的是线性雾，雾的密度是随着距离线性增大的，即场景中物体雾化效果随着随距离线性变化。

构造函数：Fog(color, near, far)。

color 属性: 表示雾的颜色，比如设置为红色，场景中远处物体为黑色，场景中最近处距离物体是自身颜色，最远和最近之间的物体颜色是物体本身颜色和雾颜色的混合效果。near 属性：表示应用雾化效果的最小距离，距离活动摄像机长度小于 near 的物体将不会被雾所影响。far 属性：表示应用雾化效果的最大距离，距离活动摄像机长度大于 far 的物体将不会被雾所影响。

本例中使用了背景图，我需要一个既能呈现透明显示背景、又能产生阴影的材质生成地面，于是使用到 ShadowMaterial 材质。

ShadowMaterial 阴影材质

此材质可以接收阴影，但在其他方面完全透明。

构造函数：ShadowMaterial(parameters: Object)

parameters：（可选）用于定义材质外观的对象，具有一个或多个属性。

特殊属性：

.isShadowMaterial[Boolean]：用于检查此类或派生类是否为阴影材质。默认值为 true。因为其通常用在内部优化，所以不应该更改该属性值。.transparent[Boolean]：定义此材质是否透明。默认值为 true。

在老虎 底部地面创建一个炫酷的旋转自发光圆形魔法阵。

魔法阵的贴图：

MeshPhongMaterial 网格材质

一种用于具有镜面高光的光泽表面的材质。该材质使用非物理的 Blinn-Phong 模型来计算反射率。

构造函数：MeshPhongMaterial(parameters: Object)

parameters：（可选）用于定义材质外观的对象，具有一个或多个属性。

特殊属性：

.emissive[Color]：材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。.emissiveMap[Texture]：设置放射（发光）贴图。默认值为 null。放射贴图颜色由放射颜色和强度所调节。如果你有一个放射贴图，请务必将放射颜色设置为黑色以外的其他颜色。.emissiveIntensity[Float]：放射光强度。调节发光颜色。默认为 1。.shininess[Float]：specular 高亮的程度，越高的值越闪亮。默认值为 30。.specular[Color]：材质的高光颜色。默认值为 0x111111 的颜色 Color。这定义了材质的光泽度和光泽的颜色。.specularMap[Texture]：镜面反射贴图值会影响镜面高光以及环境贴图对表面的影响程度。默认值为 null。

与 MeshLambertMaterial 中使用的 Lambertian 模型不同，该材质可以模拟具有镜面高光的光泽表面（例如涂漆木材）。使用 Phong 着色模型计算着色时，会计算每个像素的阴影，与 MeshLambertMaterial 使用的 Gouraud 模型相比，该模型的结果更准确，但代价是牺牲一些性能。

MeshStandardMaterial 和 MeshPhysicalMaterial 也使用这个着色模型。在 MeshStandardMaterial 或 MeshPhysicalMaterial 上使用此材质时，性能通常会更高 ，但会牺牲一些图形精度。

使用 FBXLoader 来加载恭喜发财，岁岁平安字样的 3D 文字模型。

哔哩哔哩 3D 文字生成教程传送门：iBlender中文版插件 老外教你用汉字中文字体 Font 3D Chinese And Japanese Characters Blender 插件教程

老虎模型是 gltf 格式，在使用 GLTFLoader 加载模型的过程中，发现有 bug，loader 无法读取到模型体积的 total 值，于是使用通用加载器 LoadingManager 来管理模型加载进度。

LoadingManager 加载器管理器

它的功能是处理并跟踪已加载和待处理的数据。如果未手动设置加强管理器，则会为加载器创建和使用默认全局实例加载器管理器。一般来说，默认的加载管理器已足够使用了，但有时候也需要设置单独的加载器，比如，你想为对象和纹理显示单独的加载条时。

构造方法：LoadingManager(onLoad: Function, onProgress: Function, onError: Function)

onLoad：可选，所有加载器加载完成后，将调用此函数。onProgress：可选，当每个项目完成后，将调用此函数。onError：可选，当一个加载器遇到错误时，将调用此函数。

属性：

.onStart[Function]：加载开始时被调用。参数: url 被加载的项的url；itemsLoaded 目前已加载项的个数；itemsTotal 总共所需要加载项的个数。此方法默认未定义。.onLoad[Function]：所有的项加载完成后将调用此函数。默认情况下，此方法时未定义的，除非在构造函数中进行传递。.onProgress[Function]：此方法加载每一个项，加载完成时进行调用。参数：url 被加载的项的 url；itemsLoaded 目前已加载项的个数；itemsTotal 总共所需要加载项的个数。默认情况下，此方法时未定义的，除非在构造函数中进行传递。.onError[Function]：此方法将在任意项加载错误时调用。参数：url 所加载出错误的项的 url。默认情况下，此方法时未定义的，除非在构造函数中进行传递。

模型加载完成后，通过结合使用 TWEEN.js 实现相机 移动实现漫游，也就是打开页面时看到的模型由远及近逐渐变大的动画效果。

调用示例：

是一个补间动画库，可以实现很多动画效果。它使一个对象在一定时间内从一个状态缓动变化到另外一个状态。TWEEN.js 本质就是一系列缓动函数算法，结合Canvas、Three.js 很简单就能实现很多效果。

基本使用：

要让动画真正动起来，需要在 requestAnimationFrame 中调用 update 方法。

TWEEN.update()

缓动类型：

TWEEN.js 最强大的地方在于提供了很多常用的缓动动画类型，由 api easing() 指定。如示例中用到的：

tween.easing(TWEEN.Easing.Cubic.InOut);

链式调用：

TWEEN.js 支持链式调用，如在 动画A 结束后要执行 动画B，可以这样 tweenA.chain(tweenB) 利用链式调用创建往复来回循环的动画：

controls.enableDamping 设置为true 可以开启鼠标移动场景时的缓动效果，产生运动惯性，开启后 3D 更具真实感。

最后不要忘记添加窗口缩放适配方法和 requestAnimationFrame 更新方法。

3D 文字样式主要通过叠加多层 text-shadow 实现的。

最终实现效果如下图所示，大家感兴趣可在线预览，已适配移动端。

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

• Fog 场景雾化
• ShadowMaterial 阴影材质
• MeshPhongMaterial 网格材质
• LoadingManager 加载器管理器
• TWEEN.js 补间动画
• THREE.OrbitControls 参数控制
• CSS 3D 文字样式

想了解场景初始化、光照、阴影及其他网格几何体的相关知识，可阅读我的其他文章。如果觉得文章对你有帮助，不要忘了 一键三连。

[1]. 使用Three.js实现炫酷的酸性风格3D页面[2]. Three.js 实现脸书元宇宙3D动态Logo[3]. Three.js 实现3D全景侦探小游戏[4]. 模型来源：sketchfab

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