TweenJS 使用与技术文档

2024-12-24 09:02:35作者：胡易黎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

A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.

项目地址：https://gitcode.com/gh_mirrors/tw/TweenJS

项目优选

收起

本仓将收集和展示仓颉鸿蒙应用示例代码，欢迎大家投稿，在仓颉鸿蒙社区展现你的妙趣设计！

Cangjie

286

✍ WeChat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器：支持 Markdown 语法、色盘取色、多图上传、一键下载文档、自定义 CSS 样式、一键重置等特性

Vue

112

openHiTLS

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！

RuoYi-Cloud-Vue3

🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统

Vue

go-stock

🦄🦄🦄AI赋能股票分析：自选股行情获取，成本盈亏展示，涨跌报警推送，市场整体/个股情绪分析，K线技术指标分析等。数据全部保留在本地。支持DeepSeek，OpenAI， Ollama，LMStudio，AnythingLLM，硅基流动，火山方舟，阿里云百炼等平台或模型。

Cangjie-Examples

本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。

Cangjie

205

MateChat

前端智能化场景解决方案UI库，轻松构建你的AI应用，我们将持续完善更新，欢迎你的使用与建议。官网地址：https://matechat.gitcode.com

383

RuoYi-Vue

🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本

Java

182

frog

这是一个人工生命试验项目，最终目标是创建“有自我意识表现”的模拟生命体。

Java

TweenJS 使用与技术文档

1. 安装指南

通过 npm 安装

通过 yarn 安装

直接在 HTML 中引用

2. 项目的使用说明

3. 项目 API 使用文档

Tween 类

Timeline 类

Ease 类

4. 项目安装方式

热门内容推荐

最新内容推荐

项目优选

TweenJS 使用与技术文档

1. 安装指南

通过 npm 安装

通过 yarn 安装

直接在 HTML 中引用

2. 项目的使用说明

3. 项目 API 使用文档

Tween 类

Timeline 类

Ease 类

4. 项目安装方式

相关内容推荐

热门内容推荐

最新内容推荐

项目优选