Media

在本章中，我们将了解 Motion Canvas 允许你添加到动画中的所有不同类型的媒体。

Audio

Motion Canvas 支持的一种媒体类型是音频。要将音频轨道添加到动画，你需要编辑 project.ts 文件。首先，我们需要按如下方式导入我们要使用的音频文件：

// my-animation/
// ├─ audio/
// │  └─ voice.mp3
// ├─ src/
// ...
import audio from '../audio/voice.mp3';

导入后，我们需要让 Motion Canvas 知道我们要使用这个音频文件。我们可以通过在项目配置中指定 audio 属性来做到这一点：

export default makeProject({
  // ...
  audio: audio,
});

如果我们现在打开编辑器，应该会看到你的音频轨道已添加。

然而，从头开始播放音频并不总是理想的。有时最好稍微延迟一下。配置音频后，你可以在 Video Settings 选项卡中编辑偏移量。你也可以按住 SHIFT 并直接在时间轴上左右拖动音频轨道。

Supported Formats

支持的文件格式列表可以在这里找到

Images

Motion Canvas 支持的另一种媒体类型是图像。要在动画中使用图像，我们需要导入图像：

// my-animation/
// ├─ images/
// │  └─ example.png
// ├─ src/
// ...
import examplePng from '../../images/example.png';

然后我们可以使用 Motion Canvas Img 组件来显示图像：

import {makeScene2D, Img} from '@motion-canvas/2d';

import examplePng from '../../images/example.png';

export default makeScene2D(function* (view) {
  view.add(<Img src={examplePng} />);
});

图像可以像 Motion Canvas 中的每个其他组件一样进行动画处理。为此，我们需要创建一个 Reference 并将其传递给 Img：

// ...
import {all, createRef} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const imageRef = createRef<Img>();

  view.add(<Img ref={imageRef} src={examplePng} scale={2} />);

  yield* all(
    imageRef().scale(2.5, 1.5).to(2, 1.5),
    imageRef().absoluteRotation(90, 1.5).to(0, 1.5),
  );
});

Supported Formats

支持的文件格式列表可以在这里找到

Video

Motion Canvas 中的视频与图像类似工作。首先，我们需要导入我们要显示的视频：

// my-animation/
// ├─ videos/
// │  └─ example.mp4
// ├─ src/
// ...
import exampleMp4 from '../../videos/example.mp4';

然后我们可以使用 Motion Canvas Video 组件来显示视频，如下所示：

import {makeScene2D, Video} from '@motion-canvas/2d';

import exampleMp4 from '../../videos/example.mp4';

export default makeScene2D(function* (view) {
  view.add(<Video src={exampleMp4} />);
});

然而，这只会显示视频，而不会播放它。为了播放视频，我们需要创建对元素的 Reference。

// ...
import {createRef} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const videoRef = createRef<Video>();

  view.add(<Video ref={videoRef} src={exampleMp4} />);
});

现在我们有了对 Video 元素的 Reference，我们可以使用它来为视频制作动画，以及 play 和 pause 它。

export default makeScene2D(function* (view) {
  // ...

  videoRef().play();
  yield* videoRef().scale(1.25, 1.5).to(1, 1.5);
});

Supported Formats

支持的文件格式列表可以在这里找到