canvas动画制作教程 (canvas动画教程)

计算机动画的用途十分广泛，主要包括以下几个方面：增添多媒体的感官效果；游戏开发；电视动画制作；创作吸引人的广告；电影特技制作；生产过程及科研的模拟。它应用于远程教育、医疗、建筑等领域，为这些领域提供了直观、生动、便捷的展示和沟通工具。

我们已经有很多软件工具可以帮助我们制作计算机动画，例如：三维建模软件：如Maya、3ds Max等；动画制作软件：如After Effects等；特效软件：如Nuke、Houdini等；视频编辑软件：如Premiere、Final Cut等，可以编辑和合成动画；游戏引擎：如Unity、Unreal Engine等。

在很多情况下，我们并不需要非常复杂的动画，比如，我们准备在一块白板上为我们的项目制作一个动画的说明；或者我们准备制作一个物理原理的演示动画，这时候使用上述的工具显得大材小用。在这里介绍一个非常实用的，小巧的工具 - Motion Canvas，直接使用Javascript语言来编写动画。

Motion Canvas中可以通过包括：动画工作流、场景、定位、布局、变换、信号、定时事件、媒体等等多种API编写动画，编写完成的代码直接装载到项目环境中就可以渲染成为PNG序列或者MP4视频。

尤其是Motion Canvas是我们的“智能视频”技术的一个重要的工具。

本篇教程以官网上最为简单的一个小球移动为例，介绍如何创建和编写一个Motion Canvas动画。

首先需要我们在自己的电脑上安装Node JS版本16或者更高版本。在命令行窗口创建自己的项目：

npm init @motion-canvas@latest

并跟随系统提示回答相应的项目的具体参数，如下图：

以上我们创建了一个名为my-animation的动画项目。它在我们机器上的目录结构如下：

执行以下的命令启动Motion Canvas服务引擎：

cd my-animation

npm install

npm run serve

参见下图：

如果出现下图所示的内容，则说明你的Motion Canvas服务已经启动成功。

此时进入到浏览器并且输入网址：http://localhost:9000/。你将会看到Motion Canvas的环境。

注意，屏幕下方有example的字样，说明我们现在的my-animation项目的动画代码被存放在example.tsx文件中。通过资源管理器浏览你的项目的文件夹，你就可以找到这个文件。

接下来的这一步，找一个你自己熟悉的文本编辑器，对这个example.tsx文件进行编辑，在这个教程中我使用的是VS Code，输入下面的代码：

import {makeScene2D, Circle} from '@motion-canvas/2d';
import {all, createRef} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const myCircle = createRef<Circle>();

  view.add(
    <Circle
      ref={myCircle}
      // try changing these properties:
      x={-300}
      width={140}
      height={140}
      fill="#e13238"
    />,
  );

  yield* all(
    myCircle().position.x(300, 1).to(-300, 1),
    myCircle().fill('#e6a700', 1).to('#e13238', 1),
  );
});
});

回到Motion Canvas的环境中，你就可以看到你的第一个动画已经装载完成，你可以点击“Play”按钮或者按空格键就能看到动画的效果了。

视频加载中...

接下来我们将这个动画进行输出，有两个选择：一个是输出为PNG图片序列，另一个是输出为MP4影片。如果要输出MP4的话，必须实现安装FFmpeg。

我们输出MP4，如下图：

这一步输出PNG序列，如下图：

PNG的图片存储在我们的项目目录之下，如下图：

在最后一步，我们通过图片处理软件将PNG图片序列合成为GIF，并将其与背景进行融合，生成的最终的动画影片如下：

视频加载中...

下一篇教程我们继续介绍Motion Canvas的基础内容。

#智能视频#