Theatre.js:在JavaScript中创建复杂而强大的动画

尼耳多
1,062 阅读6分钟

在开发界有很多关于相对较新的Theatre.js的讨论。那么，它是否只是另一个JavaScript动画库？

答案是否定的，并非如此。Theatre.js是一个运动图形库，可以让你轻松建立强大的动画。根据创建者的说法，"Theatre.js是一个用于高保真运动图形的动画库。它旨在帮助你表达详细的动画，使你能够创造复杂的运动，并传达细微的差别"。

而且，与其他JavaScript和CSS动画库不同，Theatre.js是一个带有图形用户界面（GUI）的动画库。GUI允许你用集成在浏览器中的编辑器直观地建立动画。

它实际上是把你的浏览器变成了一个动画工作室--你很可能只需要编写设置代码，就可以了。

它甚至可以使DOM、WebGL、Three.js、HTML和其他JavaScript变量成为动画，这意味着你可以设置它，甚至允许非开发人员使用Theatre.js编辑器在浏览器上创建动画。

下面是一个例子。

Theatre Sample

在这篇文章中，我们将探讨如何用JavaScript和Theatre.js设置和创建自己的动画实验室。

要求

设置Theatre.js

你可以用Vanilla JavaScript或任何JavaScript库如React或Angular来使用Theatre.js。在这篇文章中，我们将在Vanilla JavaScript和Parcel构建工具中使用Theatre.js。

首先，让我们创建一个目录，用npm init 来初始化它，然后运行下面的命令来安装Theatre Core和 Theatre Studio。Theatre Core是主库，而Theatre Studio是编辑器，你只在设计和开发中需要它。

剧院核心。

 npm install @theatre/core --save

剧院工作室。

npm install @theatre/studio --save-dev

接下来，我们将创建运行该应用程序所需的必要文件。为了便于学习，我为这篇文章创建了一个模板。运行 git clone [https://github.com/ezesundayeze/theatrejs](https://github.com/ezesundayeze/theatrejs)在你的终端上运行，以获取它的副本。

编辑有以下内容的HTML文档。

src/index.html

<style>
  body {
    background: rgb(6, 143, 113);
    margin: 0;
  }
  #box {
    position: absolute;
    width: 100%;
    top: 0;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    --box-size: 40px;
  }
  .boxContainer {
    width: var(--box-size);
    position: relative;
  }

</style>
<div class="boxContainer">
  <div id="box"></div>
</div>
<script type ="module" async src="index.ts"></script>

接下来，让我们把我们链接的JavaScript代码添加到HTML中。创建一个index.js 文件，导入剧院和剧院工作室，如下图所示。

import * as core from "@theatre/core";
import studio from "@theatre/studio";

之后，通过在现有的代码中加入studio.initialize() 来初始化Theatre Studio。现在它应该看起来像这样。

import * as core from "@theatre/core";
import studio from "@theatre/studio";

studio.initialize()

用npm run dev 来运行应用程序，看看剧院工作室的运行情况。页面左上角的小图标显示，Studio已经激活。

Icon Top Left

然而，我们现在仍然不能做任何事情，因为我们的工作室设置还不完整。

在Theatre.js中，你会遇到并使用以下内容。

  • 项目
  • 纸张
  • 对象
  • 序列

让我们在工作室里把它们设置好。

Theatre.js中的项目

Theatre.js中的项目是一个工作区，所有的动画工作都将在这个工作区完成。创建一个项目很简单，只要在你导入Theatre.js和Studio后，在你的代码中添加以下一行即可。

js
const project = core.getProject("soccer ball Animation");

在Theatre.js中使用工作表

工作表类似于React中的组件。它可以容纳一起动画的对象，而且你可以在一个项目中拥有多个工作表。

这就是你如何在项目中添加一个工作表。

js
const ballSheet = project.sheet("ballSheet");

对象

Theatre.js中的对象指的是要做动画的实际对象。在这个对象中，我们将设置我们想做动画的默认属性。这些道具可以在动画编辑器中修改，以创建我们想要的动画外观和感觉的类型。

下面是一个关于如何添加对象道具的例子。

const ballObj = sheet.object("ballSheet", {
    y: 100,
    x: 150,
    angle: 0,
    stretch:1
});

让我们看看，当你运行应用程序时，对象属性将如何在编辑器中显示为控件。你需要将它们从左到右滑动，或者反过来，以获得所需的动画。

Object Properties

序列

序列定义了相关项目之间的顺序和方式。在Theatre.js中，序列定义了对象属性移动的顺序。正是这种运动创造了实际的动画。

下面的部分是允许你创建和修改序列的内容。

Sequences

每个序列都有一个 [position](https://docs.theatrejs.com/in-depth/#sequence-position)，它决定了动画的进度。栏顶的数字显示对象在某一时刻的位置。默认单位是秒。

在Theatre.js中创建动画

那么，让我们给我们最初使用的HTML添加一些动画。首先，选择目标元素，添加我们打算使用的图像（它不需要是图像--你可以创建形状或任何项目的动画），并添加一些基本的CSS以在页面上对齐该元素。

const boxDiv = document.getElementById("box");
const ball = document.createElement("img");
ball.src = "soccer ball.png";
boxDiv.appendChild(ball);
ball.style.position = "absolute";
ball.style.width = "100px";
ball.style.height = "100px";

在这个例子中，我将通过点击足球来启动动画。所以，让我们给球元素添加一个eventListener 。

ball.addEventListener("click", () => {
    const sequence = sheet.sequence.play({ iterationCount: Infinity, rate: 1, range: [1, 6] })
});

当球被点击时，我们可以通过调用sequence.play() 方法来播放这个序列。你可以通过传递一个带有属性的对象来定制这个序列，比如rate ，它设置序列的速度，以及iterationCount ，它设置你希望序列播放的次数。

Theatre JS

在上面的例子中，我把它设置为永远播放。Range 是你希望它运行的位置范围。我们把我们的设定为从位置1 到6 。你可以在文档中找到更多的道具。

为了看到动画的进展，我们将使用球对象的.onValueChange 方法，然后设置CSS变换以符合预期的行为。

ballObj.onValuesChange(({ y, x, angle, stretch }) => {
boxDiv.style.cssText = `
    transform: translateX(${x}px) rotate(${angle}deg) translateY(${y}px) scale(${1 / stretch}, ${stretch});
`;
});

在变换 (transform 为元素添加2D或3D变换)，我们使用translateY 和translateX 属性来修改变换的行为。

现在我们已经设置了我们的Theatre.js动画工作室来为足球制作动画。你可以在下面看到这个动作，或者点击这个链接，在CodeSandbox上看到这个演示。

lat-pond-c039j

lat-pond-c039j by ezesundayeze using @theatre/core, @theatre/studio, parcel

在生产中，你可能想关闭工作室。你可以通过调用studio.ui.hide() 方法来做到这一点。要在开发中恢复它，请调用studio.ui.restore() 方法。

最后，在玩转工作室并为对象创建你想要的动画后，你可以通过点击项目，然后导出工作室状态，如下图所示。

Export

现在你可以通过导入并将其添加到你的项目实例中，将这个状态链接到你的项目中，像这样。

import state from "./state.json"
const project = core.getProject("soccer ball Animation", {state});

恭喜你，你已经建立了你的剧院工作室，并探索了它的一些功能。我们只是触及了表面。请记住，还有很多东西需要学习，因为在写这篇文章的时候，这个项目还不到两个月的时间，而且还在发展。

总结

Theatre.js是一个了不起的项目，它让你有能力制作你自己的动画工作室。随着它在社区中获得更多的采用，它有可能塑造网络动画生态系统，所以现在是一个很好的时机，开始探索Theatre.JS或为进一步开发该库作出贡献。

The postTheatre.js:在JavaScript中创建复杂而强大的动画，首先出现在LogRocket博客上。

avatar
文章
阅读
粉丝