TweenJS 使用与技术文档

2024-12-24 17:43:51作者：胡易黎Nicole

1. 安装指南

TweenJS 是一个用于 JavaScript 的简单补间动画库。它可以很好地与 EaselJS 库集成，但并不依赖于或特定于它（尽管默认情况下它使用了相同的 Ticker 和 Event 类）。它支持对数字对象属性和 CSS 样式属性的补间。

要使用 TweenJS，你可以通过以下几种方式安装：

通过 npm 安装

npm install tweenjs

通过 yarn 安装

yarn add tweenjs

直接在 HTML 中引用

你可以在 HTML 文件中直接通过 CDN 链接引入 TweenJS：

<script src="https://code.createjs.com/1.0.0/tweenjs.min.js"></script>

确保将上述代码放置在 <body> 标签的底部，以确保在执行脚本时 DOM 已经完全加载。

2. 项目的使用说明

TweenJS 的 API 设计简洁而强大，可以通过链式命令轻松创建复杂的补间动画。

以下是一个简单的示例：

var tween = createjs.Tween.get(myTarget)
    .to({x:300}, 400)
    .set({label:"hello!"})
    .wait(500)
    .to({alpha:0, visible:false}, 1000)
    .call(onComplete);

上面的示例会创建一个新的补间实例：

在 400 毫秒内将目标对象的 x 值补间到 300，并将其标签设置为 "hello!"
等待 500 毫秒
在 1000 毫秒内将目标的 alpha 值补间到 0，并设置其不可见
调用 onComplete 函数

补间由两个元素组成：步骤和动作。

步骤定义了补间的属性，总是与持续时间相关联（即使持续时间为 0）。步骤使用 "to" 和 "wait" 方法定义。步骤是完全确定性的。你可以任意设置补间的位置，它将始终为该位置设置相同的属性。

动作没有持续时间，并在步骤之间执行。它们使用 "call"、"set"、"play" 和 "pause" 方法定义。它们保证按正确的顺序执行，但可能不会在序列中指示的精确时刻执行。当补间通过 "play" 和 "pause" 动作相互作用时，这可能导致不确定的结果。

补间支持许多配置属性，这些属性在创建新补间时作为第二个参数指定：

createjs.Tween.get(target, {loop:true, useTicks:true, css:true, ignoreGlobalPause:true}).to(etc...);

所有配置属性默认为 false。这些属性包括：

loop - 指示补间在结束时是否应该循环
useTicks - 补间将使用滴答声而不是毫秒作为持续时间
css - 启用某些 CSS 属性的 CSS 映射
ignoreGlobalPause - 即使 Ticker 暂停，补间也会继续运行。

使用 Tween.get 时，你还可以将 true 指定为第三个参数，以覆盖目标上的任何活动补间。

createjs.Tween.get(target, null, true); // 这将移除目标上的任何现有补间。

3. 项目 API 使用文档

TweenJS 提供了几个类来帮助开发者创建和管理补间动画。

Tween 类

返回一个新的补间实例。

var tween = createjs.Tween.get(target, [config], [override]);

target 是要补间的对象。
config 是一个包含配置属性的选项对象。
override 是一个布尔值，指示是否覆盖目标上现有的补间。

Timeline 类

Timeline 类同步多个补间，允许它们作为一个组进行控制。

var timeline = new createjs.Timeline();

Ease 类

Ease 类提供了一组用于补间动画的缓动函数。

createjs.Ease.quadInOut();

Ease 类不使用标准的四个参数缓动签名。相反，它使用一个参数，表示补间的当前线性比例（0 到 1）。

4. 项目安装方式

请遵循上面的安装指南，通过 npm、yarn 或直接在 HTML 中引用的方式安装 TweenJS。确保安装完成后，你可以通过全局 createjs.Tween 访问补间功能，并开始在项目中使用补间动画。

登录后查看全文

TweenJS 使用与技术文档

1. 安装指南

通过 npm 安装

通过 yarn 安装

直接在 HTML 中引用

2. 项目的使用说明

3. 项目 API 使用文档

Tween 类

Timeline 类

Ease 类

4. 项目安装方式

热门内容推荐

最新内容推荐

项目优选

TweenJS 使用与技术文档

1. 安装指南

通过 npm 安装

通过 yarn 安装

直接在 HTML 中引用

2. 项目的使用说明

3. 项目 API 使用文档

Tween 类

Timeline 类

Ease 类

4. 项目安装方式

相关内容推荐

热门内容推荐

最新内容推荐

项目优选