two.js之实现动画效果示例

Two.js 介绍

Two.js 是一个用于在网页上创建 2D 动画的轻量级绘图库。它基于 SVG 封装了 Canvas API，可在 Canvas 和 SVG 之间进行切换。Two.js 的通用性非常强，可以应用于多种类型的网页开发。它可以被应用于创意、动态交互和数据可视化等多种场景。本篇攻略将介绍如何实现使用 Two.js 开发动画效果的示例。

安装 Two.js

安装 Two.js 很简单，只需要在 HTML 文件中引用对应脚本文件即可。使用 CDN 引用 Two.js 时，可以直接在 HTML 的头部标签中加入以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.js"></script>

如果想使用本地文件，也可以将 Two.js 下载到本地，然后以如下代码引入：

<script src="path/to/two.js"></script>

示例1：绘制简单的图形并实现动画

HTML 文件

首先，我们需要在 HTML 文件中创建一个用于显示动画的画布。可以将以下代码插入 HTML 文件中：

<div id="main"></div>

JavaScript 文件

接下来，需要编写 JavaScript 代码来创建 Two.js 实例，并在画布上绘制图形及实现动画。

首先，创建画布及 Two.js 实例：

var two = new Two({
  fullscreen: true,
  autostart: true
}).appendTo(document.getElementById("main"));

然后，创建圆形对象：

var circle = two.makeCircle(250, 250, 50);
circle.fill = "#FF8000";
circle.stroke = "#FFF";
circle.linewidth = 5;

其中，makeCircle 方法用于创建圆形对象，其三个参数分别代表圆心的 x 和 y 坐标，以及圆的半径。fill 属性用于设置填充颜色，stroke 属性用于设置边框颜色，linewidth 属性用于设置边框宽度。

然后，添加对该圆形对象的动画效果：

circle.translation.set(-250, 0);

two.bind("update", function(frameCount) {
  var angle = (frameCount * 2 * Math.PI) / 60;
  circle.translation.set(
    250 * Math.cos(angle),
    250 * Math.sin(angle)
  );
});

其中，translation 属性用于设置圆形对象的位置，这里将其位置设置为了 (-250, 0)。bind 方法用于绑定 update 事件，即每次屏幕刷新（大约每秒 60 次）时执行的函数。在这个事件中，我们可以对圆形对象的位置进行修改，从而实现动画效果。

最后，将 Two.js 实例加入画布：

two.update();

示例2：使用多边形组合实现复杂动画

HTML 文件

同样，我们需要在 HTML 文件中创建一个用于显示动画的画布。可以将以下代码插入 HTML 文件中：

<div id="main"></div>

JavaScript 文件

接下来，需要编写 JavaScript 代码来创建 Two.js 实例，并在画布上绘制多边形组合及实现动画。

首先，创建画布及 Two.js 实例：

var two = new Two({
  fullscreen: true,
  autostart: true
}).appendTo(document.getElementById("main"));

然后，创建多边形对象：

var polygon1 = two.makePolygon(250, 150, 50, 3);
polygon1.fill = "#FF8000";
polygon1.stroke = "#FFF";
polygon1.linewidth = 3;

var polygon2 = two.makePolygon(250, 150, 50, 4);
polygon2.fill = "#FFD700";
polygon2.stroke = "#FFF";
polygon2.linewidth = 3;

其中，makePolygon 方法用于创建多边形对象，其四个参数分别代表中心点的 x 和 y 坐标、半径和边数。fill、stroke 和 linewidth 属性分别用于设置填充颜色、边框颜色和边框宽度。

然后，将多边形对象组合：

var group = two.makeGroup(polygon1, polygon2);

group.translation.set(250, 250);
group.scale = 0;

其中，makeGroup 方法用于创建多边形对象组合，其参数为一个或多个多边形对象。translation 属性用于设置多边形对象组合的位置，scale 属性用于设置多边形对象组合的缩放比例。

接下来，添加对该多边形对象组合的动画效果：

two.bind("update", function(frameCount) {
  var scale = Math.sin(frameCount / 60 * Math.PI);
  group.scale = scale < 0 ? -scale : scale;
});

在这个事件中，我们可以对多边形对象组合的缩放比例进行修改，从而实现动画效果。

最后，将 Two.js 实例加入画布：

two.update();

以上就是使用 Two.js 开发动画效果的示例攻略，通过这两个示例，你可以了解 Two.js 如何使用 makeCircle 和 makePolygon 方法创建基本的图形对象，并使用 translation 和 scale 属性实现动画效果。如果你有兴趣了解更多的 Two.js 特性和 API，可以参阅官方文档：https://two.js.org/#documentation。