movy.js是一个直观的动画引擎，用于创建解释性视频。
代码开源链接、作者信息等，在文章末尾自取。
如何开始
请确保您的计算机上安装了node.js（版本>=12）。
node.js下载连接：https://nodejs.org/en/download/
-
1.从文末代码仓库中下载源代码，通过以下命令安装movy.js：npm i movy@latest -g
-
2.执行movy命令打开示例列表，查看参考示例（示例动画位于movy/examples文件夹中）：
-
3.执行movy hello.js，创建新的动画。如果该文件不存在，它将自动创建一个新的动画文件hello.js：
注意：修改源代码将自动刷新浏览器。
-
4.单击“渲染”按钮（render）将动画渲染到视频文件：xxx.webm
将对象添加到场景中
要添加新对象，可以使用mo.add__()，例如：
用mo.addCircle()，添加一个圆。
用mo.addRect()，添加一个矩形。
用mo.addTriangle()，添加一个三角形。
……还有不少，文档暂时还不完善
自定义对象
上面的所有方法都可以采用额外命名的参数进行自定义。例如，要设置对象的颜色和大小，可以使用：
这将创建0.5倍大小的黄色三角形（即一半大小）。
此外，你可以通过：
更多形状
此外，您还可以使用mo.add__Outline（）方法来创建轮廓形状。例如：
用mo.addCircleOutline()，添加一个圆形的轮廓。
用mo.addRectOutline()，添加一个矩形的轮廓。
用mo.addTriangleOutline()，添加一个三角形的轮廓。
……还有不少，文档暂时还不完善
上一节中提到的所有命名参数仍然适用于这些轮廓形状。此外，你可以通过：
用mo.addCircleOutline({，将圆形轮廓的线宽设置为0.3。
lineWidth: 0.3 })
用mo.addRectOutline({ width: 1.5, height: 1 })，您可以使用宽度和高度来指定形状的大小，而不是使用sx和sy来缩放形状。此方法不会不均匀地缩放线条笔划。
添加动画
对于每个添加的场景对象，您可以调用，例如obj.fadeIn()、obj.reveal()、obj.grow()等来添加不同的动画。
下面列出了movy.js支持的常见动画：
-
rect.fadeIn()
-
rect.wipeIn()
-
rect.grow()
-
rect.rotateIn()
-
rect.reveal()
-
rect.shake2D()
自定义动画
所有动画都可以采用以下参数进行自定义：
请注意，某些动画可能需要额外的参数。例如，您可以在obj.reveal()中传递｛direction:‘down’｝来指定对象显示的方向。
组合动画
通过将现有的动画与一些参数调整相结合，我们可以获得更复杂、更漂亮的动画。
(全文完) 制作不易，点个关注~
翻译：产品经理的锅，文档版本：2022年9月26日
代码仓库：https://github.com/rossning92/movy
代码仓库（备用）：https://gitee.com/DeweyDu/movy
开源作者：奇乐编程学院