js小学生动画,播放小学生动画 收藏 0

three.js cannon.js物理引擎之齿轮动画

今天继续说一说cannon.js物理引擎，并用之前已经学习过的知识实现一个小动画，知识点包括ConvexPolyhedron多边形、Shape几何体、Body刚体、HingeConstraint铰链约束等等知识。因为我之前用纯three.js 的THREEBSP实现过一个静态的齿轮，现在就想配合cannon.js让它的转动更加的符合实际而不是匀速转动。下面我们来说说我们要做的这个案例，这个小案例是由5个齿轮组成，最左面的是有动力的齿轮，我们可以控制它的速度，而右面三个齿轮是可以移动的，我们可以自由移动（有点类似于变速箱），嗯就是怎么简单。下面我们来说一说这个是怎么实现的，效果如下图，在线案例请点击博客原文。

three.js几何体在最前面我已经说过了，实现一个这样的模型（在不考虑引用模型的情况下），我们可以考虑直接使用Geometry来绘制或者向THREE.Group()对象中添加基础几何体来绘制，这里我们使用第二种方法。这里的思路就是使用ConvexGeometry凸包做出锯齿的齿，然后使用圆柱填充即可，如下图，

下面是相关部分代码

这里就要用到前面两篇的内容了，一个是HingeConstraint铰链约束，另一是ConvexPolyhedron多边形。齿轮沿着轴旋转，我们通过铰链约束把齿轮和轴约束到一起，让齿轮仅沿着轴的方向转动，接下来是通过ConvexPolyhedron多边形制作出齿轮的齿，然后通过Body的addShape方法，将齿轮的齿添加到刚体中。思路其实是很简单的，不过里面有一些小计算。下面我们看代码

然后在制作其他四个齿轮，然后放在不同的位置，在通过gui设置一些可操作项。这样我们就完成了一个简单的齿轮机组了，这一系列的cannon.js的文章应该还剩一两篇。希望大家都掌握好。

转载自：郭先生的博客（https://www.mrguo.link/article?id=57）

『Three.js』几个简单的入门动画（新手篇）

点赞 + 关注 + 收藏 = 学会了

还记得当初学 CSS 时，有点基础后立刻就想搞点动画出来玩一下。

在了解了 Three.js 的基础概念之后也有这个想法。

简单的动画可以提高 Three.js 初学者 的学习兴趣和信心。

本文会从初学者的角度出发讲解几个简单的动画，包括：平移、旋转、缩放、跳跃。

在开始制作动画前，需要把基础的元素创建出来，之后所有动画案例都是基于下面的代码。

基础元素包括：

1. 场景
2. 摄像机
3. 渲染器
4. 立方体
5. 辅助坐标轴

此时页面就会出现一个坐标轴和一个黄色的立方体，接下来就控制这个立方体运动。

如果对上面的代码还不太理解，可以先看看 《『Three.js』起飞！》 ，坐标轴方面可以看看 《『Three.js』辅助坐标轴》 。

这里讲的动画主要是指物体运动的效果。

第一个想到运动有关的 API 是 setInterval ，这个 API 可以设定每隔一定时间段就执行一次。比如 setInterval(() => {}, 1000) ，就1秒执行1次里面的函数。但 setInterval 在做动画时可能会遭遇阻塞的情况。所以不能保证每次执行的时间间隔都相同。于是推荐使用 requestAnimationFrame() 。

最简单的动画就是每一帧动一下，比如平移、旋转、缩放等。

平移可以理解成改变物体的位置。

在三维世界里，用 x、y、z 代表三个维度。

只要在每一帧都移动一下，不管是哪个维度都行，就可以做出一个平移动画。

比如，做一个以 x轴 方向的动画（来回移动）。

如果想做变速动画，可以使用 cos 计算新的步长。

旋转也是可以根据 x、y、z 轴方向进行旋转。

修改到的属性是 rotation 。

缩放也是有3个维度方向，同样也很简单，只需要修改立方体的 scale 属性。

跳跃需要改变2个维度的值。

为了让跳跃效果更加舒服，可以使用三角函数去计算步长。

数学很重要！

⭐几个Three.js简单动画

《『Three.js』起飞！》

《『Three.js』辅助坐标轴》

《『Three.js』场景 Scene》

《Canvas 从入门到劝朋友放弃（图解版）》

《Canvas 10款基础滤镜（原理篇）》

点赞 + 关注 + 收藏 = 学会了

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万颗星。

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