js可以做出哪些效果、javascript能干啥 收藏 0

2022年最好的10个JavaScript动画库

如果你想抓住你的网站访问者的注意力，还有什么能比动画更好呢？使用网络上免费提供的许多应用引擎，你可以很容易地让你的网站元素褪色、跳动或嗖嗖作响。在今天的文章中，我们将看到JavaScript动画库如何帮助实现这一切。

首先，介绍一下JavaScript的动画

添加只需要一个动作的简单动画（例如，切换）是一回事。对于这一点，你总是可以使用简单的CSS动画。但是，对于更复杂或高级的效果。 JavaScript是一个更好的工具。不言而喻，使用JavaScript来创建动画比使用CSS更具挑战性。

然而，JavaScript可以处理CSS所不能处理的事情。这给了开发者更多的权力来控制需要协调多个移动部件的复杂动画。

JavaScript动画是通过在一个元素的样式上添加渐变来实现的。你可以把它们作为你代码的一部分在线添加，或者把它们包含在其他对象中。在渲染时，这些变化由一个定时器调用。另外，你可以通过调整变化的时间间隔来控制动画的连续性。

让我们从Anime.js开始这个JavaScript动画库的列表。这个轻量级的动画库在GitHub上有35K多颗星。 通过一个强大的API工作，你可以用它来为HTML、CSS、JS、SVG和DOM属性制作动画。通过一个内置的交错系统，它可以使创建波纹、定向运动、跟随和重叠的效果显得很简单。这个系统在定时和属性上都是可用的。

使用内置的回调和控制函数，你可以做很多事情。例如，你可以同步播放、暂停、控制、逆转和触发事件。

Velocity.js结合了jQuery和CSS转换的优点。它的评分接近17K星，在 GitHub上有接近17K颗星，并拥有像WhatsApp和Motorola这样的杰出用户。 Mailchimp.循环、反转、延迟、隐藏/显示元素、属性数学（+、-、*、/）和硬件加速，都是其功能的一部分。

你可以使用Velocity.js来滚动 browser windows.它既可以与浏览器中加载的jQuery一起工作，也可以独立于它，甚至可以撤消之前的动画效果。

在接近 18K星，Popmotion是一个适用于任何JavaScript环境的功能性动画库。它几乎可以与任何接受数字输入的API一起工作，如 React，Three.js，A-Frame和PixiJS。

Popmotion的重量只有11.7kB，但却很有冲击力。它的特点是动画，如关键帧、衰减、用于同步多个实例的时间线等。你可以错开任何系列的动画或函数，也可以使用纯函数来组成你自己的配置。

Three.js以60K以上的星级在这个JavaScript动画库列表中排名第一。 它依靠的是 WebGL来创建和渲染浏览器中的3D动画。

有大量的文档可以帮助你，一旦你通过了学习曲线，使用这个库就没有什么不能完成的。首先，使用Three.js编辑器，你可以创建一个场景。此后，你可以添加几何图形，并调整灯光和摄像机。材料、纹理、物体、颜色和雾化都可以进行调整，最后的文件可以发布到你的项目中。

GreenSock的GSAP与一组小的JavaScript文件一起工作，使动画在所有主要的浏览器中看起来很好。它能顺利地将多个动画属性连接起来，并消除浏览器的错误。

GSAP的动作包括在Canvas上创建动画，以及为场景中的任何对象制作动画。还可以逐步揭示、变形或沿路径移动任何对象。为此，它与一堆软件应用一起工作，如SVGPlugins、PixiPlugin、WebGL、Adobe Animate和EaseJS。它的模块化结构有助于你选择你需要的功能。拥有800万用户和10K+颗星的 GitHub上有800万用户和10K多颗星，这个强大的库有很多优点。

6. AniJS

在这个列表中的JavaScript库中，AniJS有些独特。它允许你在一个简单的 \”句子 \”结构中为元素添加动画，这对刚接触动画的人来说是很好的。更重要的是，它的非特定性质使得几乎每个人都可以在日常的用户体验设计中使用它。

上 GitHub，AniJS的评分超过了3.5K星。它不依赖任何第三方库，通常有助于加快开发速度。它在安卓和iOS上都能很好地工作。 Android and iOS，也可以在所有流行的浏览器中使用。

7. Mo.js

运动图形在动画中起着很大的作用，Mo.js是一个可以让你产生影响的选择。由于有大量的教程和演示帮助，初学者可能不会发现创建几何形状和时间动画的难度。

这些API可能看起来很简单，但你可以用它们做很多事情。在这个工具包中，你会发现一个曲线编辑器和时间线编辑器来帮助你建立你的动画，以及一个播放器来控制你的动画。有不同的模块用于交错、缓和、时间线和更多。所有这些为Mo.js赢得了接近16K星的评价。

8. Vivus.js

如果你想在屏幕上实时地模仿钢笔画，你会用Vivus达到目的。它可以让你对SVG进行动画处理，给人以被绘制的感觉。由于它没有任何依赖性，所以它是快速和轻便的。

你可以选择任何一种可用的动画 – 延迟、同步或OneByOne。否则，你也可以创建一个自定义脚本来绘制你的SVG。为了提高灵活性，你可以用一个简单的JavaScript函数来覆盖每个路径的动画。超过1.3万名用户对这个库竖起了大拇指。

9. ScrollReveal JS

如果你希望在你的网页元素滚动进入视图时为它们制作动画，ScrollReveal不会让你失望。这个简单易学的动画库没有任何依赖性，在GitHub上有18.5K多颗星。

ScrollReveal支持不同类型的效果，在网络和移动浏览器上运行良好。它故意用一个裸露的配置来工作，所以你可以把它作为你的创造力的画布。为了使动画的效果最大化，创作者建议你少用它。

10. Typed.js

Typed.js是一个简单的库（更像是一个插件，真的），用于在你的屏幕上对打字进行动画处理。一旦你输入任何字符串，访问者就可以看到它以设定的速度被打出来。不仅如此，你还可以操作退格按钮，以及开始一个新的句子。如果你希望让禁用JS的访问者也能看到，你只需要在页面上放置一个HTML div。这样一来，机器人和搜索引擎也能查看输入的文字。

该库在GitHub的评分为9.5K+星，强大的用户包括Slack和Envato。

11. Lottie by AirBnB

Lottie是一种轻量级的动画图形格式，平衡了高质量的图形和渲染成本。它使应用程序更小，并包括动态功能。它可以用于网络、安卓、iOS和物联网，不需要额外的软件。

Lottie可以在任何支持JavaScript的浏览器上运行。动画是以纯文本形式存储的，是人类可读的。由于文本数据是以JSON格式存储的，它很容易被任何JavaScript环境同化。这使得它成为一种流行的动画图形格式，以增强移动前端。仅仅是安卓版本就有接近3万颗星。

Three.js贴图效果一览

纹理贴图（Textures）字面意思就是給几何体对象贴上不同的纹理图！好比于我们每天选择穿不同的衣服，我们穿不同的衣服带来的感官会有很大变化！同理几何体不同贴图的视觉效果也会有千差万别。纹理贴图是 Three.js一个很重要的内容，掌握了纹理贴图可以让3d效果产生质的飞跃。

那现在就让我们进入正题吧！go!go!go!

如果没有纹理贴图，我们看到的3d物体将会是很糟糕的！例如下面这个最基础贴图例子。

不同的人穿同样的衣服显然是不合适的，好比一个140kg的胖子穿s码的T恤，那肯定是穿不下的！纹理贴图也是一样的道理，它并不是适合每种「材质对象（Material）」。材质对象按大类分可分为五种。如下

• 点材质
• 线材质
• 网格材质
• 精灵Sprite材质
• 自定义着色器材质

「网络（Mesh）材质」顾名思义，网格类模型才会使用的材质对象。那现在就来看看它带来的贴图效果吧。

网格基础材质，不受带有方向光源影响，没有棱角感。使用示例如下：

材质常用属性简介：color材质颜色，比如蓝色0x0000ff；wireframe将几何图形渲染为线框。默认值为false；opacity透明度设置，0表示完全透明，1表示完全不透明；transparent是否开启透明，默认false

网格法向量材质,是一种比较特殊的材质。它使得物体的每一个面的颜色都从该面向外指的法向量计算得到的。

材质常用属性简介：flatShading可以让每个小平面更加的平坦突出

由一个材质捕捉（MatCap，或光照球（Lit Sphere））纹理所定义，其编码了材质的颜色与明暗。由于mapcap图像文件编码了烘焙过的光照，因此MeshMatcapMaterial 不对灯光作出反应。

材质特别属性简介：matcap贴图属性

使用这种材质的物体，其外观不是由光照或某个材质属性决定的;而是由物体到相机的距离决定的。「当物体离相机较近时会呈现白色，较远时会呈现黑色。贴图和颜色对其无效果」，可以将这种材质与其他材质相结合，从而很容易创建逐渐消失的效果。

MeshLambertMaterial这是一种暗淡的非光泽表面的材质,没有镜面高光,并且会对光源做出反应。高光网格材质MeshPhongMaterial除了和MeshLambertMaterial一样可以实现光源和网格表面的漫反射光照计算，还可以产生高光效果(镜面反射)。

MeshLambertMaterial特别属性简介:specular高光部分的颜色；shininess高光部分的亮度，默认30

MeshStandardMaterial和MeshPhysicalMaterial类是PBR物理材质，可以更好的模拟光照计算，相比光网格材质MeshPhongMaterial渲染效果更逼真。我们今天只看MeshStandardMaterial贴图效果。

材质特别属性简介：metalness金属度属性(0.0到1.0之间的值可用于生锈的金属外观)；roughness粗糙度属性(0.0表示平滑的镜面反射，1.0表示完全漫反射. 默认 0.5)

这些网站主要是关于「贴图推荐」和「纹理贴图工具」。好的「贴图」可以让我们的物体更加的惟妙惟肖。所以推荐一下，希望对大家有帮助！

• 地址：https://www.textures.com/library
• 简介：这个网站贴图类别是我看过最齐全的啦！强大的搜索功能允许你搜索特定的纹理以及标签。不过国内加载有时会有点慢，不知道是不是我网络问题。不过还是极力推荐的！

• 地址：https://polyhaven.com/textures
• 简介：这是一个完全免费的3D素材网站。里面的贴图质量非常的高，贴图素材也很丰富！

• 地址：https://github.com/nidorx/matcaps
• 简介：是专为MeshMatcapMaterial材质准备的，太赞了！

• 地址：https://www..com/pbr/category/all/1
• 简介：网站能提供免费纹理、画笔和照片 高级账号可以下载更高分辨率的素材。

• 地址：https://texture.ninja/category/Wood/2
• 简介：网站能提供5106种贴图，如果你需要指纹贴图的话，这会是很好的选择！

• 地址：https://matheowis.github.io/HDRI-to-CubeMap/
• 简介：上传图片文件可以切割成6等分，环境贴图可以用到哈！

• 地址：http://www.tartanmaker.com/

• 地址：https://coolbackgrounds.io/

• 地址：http://www.stripegenerator.com/

本篇文章只是粗浅介绍了纹理贴图和常用网络材质的使用方法，并顺便引入了相机和光源。最后展示的贴图效果还是很不错的。如果你需要深入学习的话还是需要翻阅大量有关资料的。

three.js journey

Three.js零基础入门教程(郭隆邦)

三个3D可视化案例：不只酷炫，实用最重要

你眼中的3D可视化的案例是否是各种条形图、柱状图等等堆积在一起进行数据的展示？

今天看完为大家整理的三个3D可视化优秀作品，你就知道原来3D可视化应用还可以这样做，欢迎大家分享与收藏。

3D可视化工厂厂房在数字化的今天，已经被越来越多的公司和企业应用。智慧工厂3D可视化管理平台基于数字孪生的理念，集成工厂生产、经营、安全、监控、设备等业务系统的数据，结合三维仿真技术，创建虚拟数字孪生工厂，实现对现实世界的全域感知、镜像再现，在数字孪生世界里构建智慧工厂各类智能应用。主要建设内容有：地理位置可视化、工厂环境可视化、设备资产可视化、管线可视化、监控可视化、演示可视化、虚拟巡检、培训考核、智能运营中心等。构建工厂的三维展示、监控、告警、定位、分析一体化的3D可视化平台。

在城市和经济发展的新常态之下，除了满足基本的空间需求外，人们开始延展出楼宇识别、感知、交互等个性化需求，楼宇开启了向智慧的转变。

“智慧楼宇3D可视化系统”以可视化、智能化、网络化、集成化理念为目标，实现楼宇的园区、建筑、室内、设备的逐级可视；以楼宇的智能监控为重点，集成视频监控、智能照明、智能电梯、智能供水、智能消防等各种管理系统，构建楼宇管理的监控、预警、诊断、分析一体化的3D可视化平台。

交通作为城市发展的动脉，与人们的日常息息相关。“智慧交通”的出现为城市交通拥堵问题带来了新的解决方案。城市交通的主要方式体现在城市道路、公交、轨道交通等设施上，但随着城市化进程的加快和经济社会发展的推动下，城市交通问题日益严峻。各个系统都独立着解决其对应的问题，无法从整体的交通态势上进行综合掌控，而智慧交通的可视化管理系统可以很好地应对这一问题。

在智慧交通3D可视化系统里，呈现了拟真的红绿灯控制下十字路口实时车辆行驶的场景；还实现了路口摄像头的监控状态；其次还添加了许多实时数据的监控面板，实时监测车辆情况、汽车类型、十字路口车流量及能耗、交通态势分析等，提升交通服务质量、提高事件响应效率，降低安全风险。

以上的3D可视化作品均是使用ThingJS 3D可视化开发平台制作的，ThingJS是物联网可视化PaaS平台，采用原生JavaScript的开发语言，配合简捷易用的3D搭建工具，让前端程序员和实施人员都可以立即上手。无需为3D可视化开发组建和维持专有团队，在现有团队基础上即可高效率开发3D可视化应用，大幅降低成本。

目前有许多3D可视化实现方式可供选择，尺有所长，寸有所短，大家可以自己试一试，使之效用最大化地帮助你实现3D可视化应用。

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