Repository: tweenjs/tween.js
Branch: main
Commit: 20079e65f77b
Files: 90
Total size: 512.7 KB
Directory structure:
gitextract_1nyfih5p/
├── .editorconfig
├── .github/
│ └── workflows/
│ └── tests.yml
├── .gitignore
├── .npmignore
├── .prettierignore
├── .prettierrc.cjs
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── README_zh-CN.md
├── assets/
│ └── style.css
├── dist/
│ ├── tween.amd.js
│ ├── tween.cjs
│ ├── tween.d.ts
│ ├── tween.esm.js
│ └── tween.umd.js
├── docs/
│ ├── contributor_guide.md
│ ├── contributor_guide_zh-CN.md
│ ├── user_guide.md
│ └── user_guide_zh-CN.md
├── examples/
│ ├── 00_hello_world.html
│ ├── 01_bars.html
│ ├── 02_black_and_red.html
│ ├── 03_graphs.html
│ ├── 04_simplest.html
│ ├── 05_video_and_time.html
│ ├── 06_array_interpolation.html
│ ├── 07_dynamic_to.html
│ ├── 07a_dynamic_to_two_array_values.html
│ ├── 07b_dynamic_to_an_array_of_values.html
│ ├── 08_repeat.html
│ ├── 09_relative_values.html
│ ├── 09_relative_values.js
│ ├── 10_yoyo.html
│ ├── 10_yoyo.js
│ ├── 11_stop_all_chained_tweens.html
│ ├── 12_graphs_custom_functions.html
│ ├── 13_relative_start_time.html
│ ├── 14_pause_tween.html
│ ├── 15_complex_properties.html
│ ├── 16_animate_an_array_of_values.html
│ ├── 17_generate_pow.html
│ ├── 18_start_from_current_values.html
│ ├── 19_end_tween.html
│ ├── css/
│ │ └── style.css
│ ├── example-projects/
│ │ ├── nodejs-commonjs/
│ │ │ ├── README.md
│ │ │ ├── index.js
│ │ │ └── package.json
│ │ ├── nodejs-esmodules/
│ │ │ ├── README.md
│ │ │ ├── index.js
│ │ │ └── package.json
│ │ ├── plain-javascript-modules/
│ │ │ ├── README.md
│ │ │ ├── animate.js
│ │ │ ├── index.html
│ │ │ ├── index.js
│ │ │ ├── package.json
│ │ │ └── style.css
│ │ └── plain-typescript-modules/
│ │ ├── README.md
│ │ ├── animate.js
│ │ ├── animate.ts
│ │ ├── index.html
│ │ ├── index.js
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── style.css
│ │ └── tsconfig.json
│ ├── js/
│ │ ├── createGraph.js
│ │ ├── createPath.js
│ │ ├── drawings.js
│ │ └── toPhysicalPx.js
│ └── video/
│ └── sintel.webm
├── package.json
├── rollup.config.js
├── scripts/
│ └── write-version.js
├── src/
│ ├── Easing.ts
│ ├── Group.ts
│ ├── Index.ts
│ ├── Interpolation.ts
│ ├── Now.ts
│ ├── Sequence.ts
│ ├── Tween.ts
│ ├── Version.ts
│ ├── mainGroup.ts
│ ├── test-performance-now-fake.ts
│ └── tests.ts
├── test/
│ └── unit/
│ ├── nodeunit.html
│ ├── nodeunit.js
│ └── nodeunitheadless.cjs
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
# EditorConfig is awesome: http://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
charset = utf-8
indent_style = tab
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
indent_size = 2
indent_style = space
================================================
FILE: .github/workflows/tests.yml
================================================
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
name: build and test
on: [push]
jobs:
build-and-test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [lts/*]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
- run: npm clean-install
- run: npm test
================================================
FILE: .gitignore
================================================
.DS_Store
.idea
.vscode
.tmp
build/npm*
node_modules
npm-debug.log
================================================
FILE: .npmignore
================================================
assets/
bower.json
docs/
examples/
CONTRIBUTING.md
test/
================================================
FILE: .prettierignore
================================================
dist/
.tmp/
.vscode/
examples/js/stats.min.js
examples/example-projects/plain-typescript-modules/**/*.js
================================================
FILE: .prettierrc.cjs
================================================
module.exports = {
arrowParens: 'avoid',
bracketSpacing: false,
printWidth: 120,
semi: false,
singleQuote: true,
trailingComma: 'all',
useTabs: true,
}
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, gender identity and expression, level of experience,
nationality, personal appearance, race, religion, or sexual identity and
orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or
advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic
address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at coc@soledadpenades.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing
## Code of conduct
Please note that this project is released with a [Contributor Code of Conduct](./CODE_OF_CONDUCT.md). **By participating in this project you agree to abide by its terms**.
## Before reporting a bug
If you find something that you believe to be a bug, please
1. search the [issue tracker](https://github.com/tweenjs/tween.js/issues) for similar issues
2. check out the [master](https://github.com/tweenjs/tween.js/tree/master) branch and see if the bug still exists there.
## How to report a bug
1. Specify the revision number of the tween.js library where the bug occurred
2. Specify your browser version and operating system (i.e. Chrome 23.0.1271.95, Windows 7)
3. Describe the problem in detail. What happened? What did you expect to happen?
4. Provide a small test case (e.g. using http://jsfiddle.net). Or if not possible, provide a link to a live version of your application.
## Contributing
1. Get a GitHub account (if you don't have one yet).
2. Fork the project in GitHub.
3. Check the [contribution guidelines](https://github.com/tweenjs/tween.js/wiki/Contributing-to-tween.js).
4. Make changes to your clone of the repository
5. Submit a pull request.
_If you tried all of the above and still can't fix the bug, or you're not sure you're doing things right, [let us know](https://github.com/tween.js/tween.js/issues)._
================================================
FILE: LICENSE
================================================
The MIT License
Copyright (c) 2010-2012 Tween.js authors.
Easing equations Copyright (c) 2001 Robert Penner http://robertpenner.com/easing/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
# tween.js
JavaScript (TypeScript) tweening engine for easy animations, incorporating optimised Robert Penner's equations.
[![NPM Version][npm-image]][npm-url]
[![CDNJS][cdnjs-image]][cdnjs-url]
[![NPM Downloads][downloads-image]][downloads-url]
[![Build and Tests][ci-image]][ci-url]
More languages: [English](./README.md), [简体中文](./README_zh-CN.md)
---
```html
```
[Try this example on CodePen](https://codepen.io/trusktr/pen/KKGaBVz?editors=1000)
# Features
- Does one thing only and does it well: tweens properties of an object
- Doesn't take care of CSS units (e.g. appending `px`)
- Doesn't interpolate colors
- Easing functions are reusable outside of Tween
- Can also use custom easing functions
- Doesn't make its own animation loop, making it flexible for integration into
any animation loop.
# Examples
# Installation
The recommended method is to use `import` syntax. Here we've listed various
install methods starting roughly with the most recommended first and least
desirable last. Evaluate all of the following methods to pick what is most
suitable for your project.
## With `npm install` and `import` from `node_modules`
You can add tween.js as an npm dependency:
```bash
npm install @tweenjs/tween.js
```
### Without a build tool
#### Installed locally
You can import from `node_modules` if you serve `node_modules` as part of your
website, using a standard `importmap` script tag. First, assuming `node_modules`
is at the root of your website, you can write an import map like so in your HTML
file:
```html
```
Now in any of your module scripts you can import Tween.js by its package name:
```html
```
#### Import from CDN
Note that, without the `importmap`, you can import directly from a CDN as with the first example above, like so:
```html
```
You can also link your `importmap` to the CDN instead of a local `node_modules` folder, if you prefer that:
```html
```
### With a build tool
If you are using [Node.js](https://nodejs.org/),
[Parcel](https://parceljs.org/), [Webpack](https://webpack.js.org/),
[Rollup](https://rollupjs.org/), [Vite](https://vitejs.dev/), or another build
tool, then you can install `@tweenjs/tween.js` with `npm install
@tweenjs/tween.js`, and `import` the library into your JavaScript (or
TypeScript) file, and the build tool will know how to find the source code from
`node_modules` without needing to create an `importmap` script:
```javascript
import * as TWEEN from '@tweenjs/tween.js'
```
However, note that this approach requires always running a build tool for your
app to work, while the `importmap` approach will simply work without any build
tools as a simple static HTML site.
## Manual build
Another approach is to download the source code with git, manually build the
library, then place the output in your project. Node.js is required for this.
```bash
git clone https://github.com/tweenjs/tween.js
cd tween.js
npm install
npm run build
```
This will create some builds in the `dist` directory. There are currently two different builds of the library:
- ES6 Module in `/dist/tween.esm.js` (recommended)
- UMD in `/dist/tween.umd.js` (deprecated, will be removed in a future major version)
You are now able to copy one of those two files into your project, and use like this (recommended):
```html
```
or (deprecated, to be removed in future major):
```html
```
where `path/to` is replaced with the location where you placed the file.
> [!Note]
> You can also download these files from unpkg, for example here:
> https://unpkg.com/browse/@tweenjs/tween.js@23.1.3/dist/
## Global variable from CDN (deprecated)
> [!Note]
> This method is deprecated and will be removed in a future major version!
Install a global `TWEEN` variable from a content-delivery network (CDN) using the UMD file.
From cdnjs:
```html
```
Or from unpkg.com:
```html
```
Then use the `TWEEN` variable in any script:
```html
```
> [!Note]
> unpkg.com supports a semver version in the URL, where the `^` in the
> URL tells unpkg to give you the latest version 20.x.x.
## CommonJS (deprecated)
Skip this section if you don't know what CommonJS is!
> [!Note]
> This method is deprecated and will be removed in a future major version!
Any of the above methods work in older systems that still use CommonJS. Repeat
any of the above methods but using `dist/tween.cjs` instead of
`dist/tween.esm.js` or `dist/tween.umd.js`.
# Documentation
- [User guide](./docs/user_guide.md)
- [Contributor guide](./docs/contributor_guide.md)
- [Tutorial](https://web.archive.org/web/20220601192930/http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/) using tween.js with three.js
- Also: [libtween](https://github.com/jsm174/libtween), a port of tween.js to C by [jsm174](https://github.com/jsm174)
# Tests
You need to install `npm` first--this comes with node.js, so install that one first. Then, cd to `tween.js`'s (or wherever you cloned the repo) directory and run:
```bash
npm install
```
To run the tests run:
```bash
npm test
```
If you want to add any feature or change existing features, you _must_ run the
tests to make sure you didn't break anything else. Any pull request (PR) needs
to have updated passing tests for feature changes (or new passing tests for new
features or fixes) in `src/tests.ts` to be accepted. See
[contributing](CONTRIBUTING.md) for more information.
# People
Maintainers: [Joe Pea (@trusktr)](https://github.com/trusktr).
[All contributors](http://github.com/tweenjs/tween.js/contributors).
# Projects using tween.js
[](https://lume.io)
[](https://aframe.io)
[](http://www.moma.org/interactives/exhibitions/2012/inventingabstraction/)
[](http://www.chromeweblab.com/)
[](http://5013.es/toys/macchina)
[](http://egraether.com/mine3d/)
[](http://ro.me)
[](http://data-arts.appspot.com/globe)
[](http://www.androidify.com/)
[](http://thewildernessdowntown.com/)
[](http://dejavis.org/linechart)
[npm-image]: https://img.shields.io/npm/v/@tweenjs/tween.js.svg
[npm-url]: https://npmjs.org/package/@tweenjs/tween.js
[downloads-image]: https://img.shields.io/npm/dm/@tweenjs/tween.js.svg
[downloads-url]: https://npmjs.org/package/@tweenjs/tween.js
[ci-image]: https://github.com/tweenjs/tween.js/workflows/build%20and%20tests/badge.svg?branch=master
[ci-url]: https://github.com/tweenjs/tween.js/actions
[cdnjs-image]: https://img.shields.io/cdnjs/v/tween.js.svg
[cdnjs-url]: https://cdnjs.com/libraries/tween.js
================================================
FILE: README_zh-CN.md
================================================
# tween.js
用于简单动画的 JavaScript (TypeScript) 补间引擎，结合优化的 Robert Penner 方程式。
[![NPM Version][npm-image]][npm-url]
[![CDNJS][cdnjs-image]][cdnjs-url]
[![NPM Downloads][downloads-image]][downloads-url]
[![Build and Tests][ci-image]][ci-url]
更多语言: [English](./README.md), [简体中文](./README_zh-CN.md)
---
```html
```
[在 CodePen 上试试这个例子](https://codepen.io/trusktr/pen/KKGaBVz?editors=1000)
## 安装
## 从 CDN 安装
从上例中的内容分发网络 (CDN) 安装。
cdnjs:
```html
```
或者 unpkg.com:
```html
```
请注意，unpkg.com 支持 URL 中的 semver 版本，其中 URL 中的 `^` 告诉 unpkg 为你提供最新版本 20.x.x。
## 使用 script 标签构建并包含在你的项目中
目前需要 npm 来构建项目。
```bash
git clone https://github.com/tweenjs/tween.js
cd tween.js
npm install
npm run build
```
这将在 `dist` 目录中创建一些构建。 目前有两种不同的库版本：
- UMD : `tween.umd.js`
- ES6 Module : `tween.esm.js`
你现在可以将 tween.umd.js 复制到你的项目中，然后将其包含在一个 script 标签，它将 TWEEN 添加到全局范围，
```html
```
或将 TWEEN 作为 JavaScript 模块导入，
```html
```
其中 `path/to` 替换为你放置文件的位置。
## 使用 `npm install` 和 `import` 从 `node_modules` 中添加
你可以将 tween.js 添加为 npm 依赖项：
```bash
npm install @tweenjs/tween.js
```
### 使用构建工具
如果你使用 [Node.js](https://nodejs.org/)、[Parcel](https://parceljs.org/)、[Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/)、[Vite](https://vitejs.dev/) 或者其他的构建工具，那么你现在可以使用以下方式来导入 tween.js：
```javascript
import * as TWEEN from '@tweenjs/tween.js'
```
### 没有构建工具
如果你将 `node_modules` 作为网站的一部分提供服务，则可以使用 `importmap` script 标签从 `node_modules` 导入。 首先，假设 `node_modules` 位于你网站的根目录，你可以编写一个导入映射：
```html
```
现在，在任何 module script 中，你都可以通过包名导入它：
```javascript
import * as TWEEN from '@tweenjs/tween.js'
```
# 特性
- 做一件事并且只做一件事：补间属性
- 不处理 CSS 单位（例如附加 `px`）
- 不插值颜色
- 缓动函数可在 Tween 之外重复使用
- 也可以使用自定义缓动函数
# 文档
# 测试
你需要先安装 `npm`——它随 node.js 一起提供，因此请先安装它。 然后，cd 到 `tween.js` 的（或你克隆 repo 的任何地方）目录并运行：
```bash
npm install
```
运行测试：
```bash
npm test
```
如果你想添加任何功能或更改现有功能，你 _必须_ 运行测试以确保你没有破坏任何其他功能。任何拉取请求 (PR) 都需要在 `src/tests.ts` 中更新通过功能更改测试（或通过新功能或修复的新测试）才能接受 PR。 有关更多信息，请参阅 [贡献](CONTRIBUTING.md)。
# 使用 tween.js 的项目
[](https://lume.io)
[](https://aframe.io)
[](http://www.moma.org/interactives/exhibitions/2012/inventingabstraction/)
[](http://www.chromeweblab.com/)
[](http://5013.es/toys/macchina)
[](http://egraether.com/mine3d/)
[](http://ro.me)
[](http://data-arts.appspot.com/globe)
[](http://www.androidify.com/)
[](http://thewildernessdowntown.com/)
[](http://dejavis.org/linechart)
[npm-image]: https://img.shields.io/npm/v/@tweenjs/tween.js.svg
[npm-url]: https://npmjs.org/package/@tweenjs/tween.js
[downloads-image]: https://img.shields.io/npm/dm/@tweenjs/tween.js.svg
[downloads-url]: https://npmjs.org/package/@tweenjs/tween.js
[ci-image]: https://github.com/tweenjs/tween.js/workflows/build%20and%20tests/badge.svg?branch=master
[ci-url]: https://github.com/tweenjs/tween.js/actions
[cdnjs-image]: https://img.shields.io/cdnjs/v/tween.js.svg
[cdnjs-url]: https://cdnjs.com/libraries/tween.js
================================================
FILE: assets/style.css
================================================
body {
background: #fff;
font-family: Helvetica, Arial, sans;
}
a {
color: #333;
}
h2 {
font-weight: normal;
}
#info {
position: absolute;
top: 0;
left: 0;
padding: 1.5em 2em;
}
#info h1 {
font-size: 3em;
color: #333;
margin-top: 0;
letter-spacing: -0.05em;
}
#info h2 {
font-size: 2.5em;
text-transform: uppercase;
color: #666;
margin-top: 0;
}
#info p {
font-size: 2em;
line-height: 1em;
color: #aaa;
max-width: 10em;
}
================================================
FILE: dist/tween.amd.js
================================================
define(['exports'], (function (exports) { 'use strict';
/**
* The Ease class provides a collection of easing functions for use with tween.js.
*/
var Easing = Object.freeze({
Linear: Object.freeze({
None: function (amount) {
return amount;
},
In: function (amount) {
return amount;
},
Out: function (amount) {
return amount;
},
InOut: function (amount) {
return amount;
},
}),
Quadratic: Object.freeze({
In: function (amount) {
return amount * amount;
},
Out: function (amount) {
return amount * (2 - amount);
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount;
}
return -0.5 * (--amount * (amount - 2) - 1);
},
}),
Cubic: Object.freeze({
In: function (amount) {
return amount * amount * amount;
},
Out: function (amount) {
return --amount * amount * amount + 1;
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount * amount;
}
return 0.5 * ((amount -= 2) * amount * amount + 2);
},
}),
Quartic: Object.freeze({
In: function (amount) {
return amount * amount * amount * amount;
},
Out: function (amount) {
return 1 - --amount * amount * amount * amount;
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount * amount * amount;
}
return -0.5 * ((amount -= 2) * amount * amount * amount - 2);
},
}),
Quintic: Object.freeze({
In: function (amount) {
return amount * amount * amount * amount * amount;
},
Out: function (amount) {
return --amount * amount * amount * amount * amount + 1;
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount * amount * amount * amount;
}
return 0.5 * ((amount -= 2) * amount * amount * amount * amount + 2);
},
}),
Sinusoidal: Object.freeze({
In: function (amount) {
return 1 - Math.sin(((1.0 - amount) * Math.PI) / 2);
},
Out: function (amount) {
return Math.sin((amount * Math.PI) / 2);
},
InOut: function (amount) {
return 0.5 * (1 - Math.sin(Math.PI * (0.5 - amount)));
},
}),
Exponential: Object.freeze({
In: function (amount) {
return amount === 0 ? 0 : Math.pow(1024, amount - 1);
},
Out: function (amount) {
return amount === 1 ? 1 : 1 - Math.pow(2, -10 * amount);
},
InOut: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
if ((amount *= 2) < 1) {
return 0.5 * Math.pow(1024, amount - 1);
}
return 0.5 * (-Math.pow(2, -10 * (amount - 1)) + 2);
},
}),
Circular: Object.freeze({
In: function (amount) {
return 1 - Math.sqrt(1 - amount * amount);
},
Out: function (amount) {
return Math.sqrt(1 - --amount * amount);
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return -0.5 * (Math.sqrt(1 - amount * amount) - 1);
}
return 0.5 * (Math.sqrt(1 - (amount -= 2) * amount) + 1);
},
}),
Elastic: Object.freeze({
In: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
return -Math.pow(2, 10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI);
},
Out: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
return Math.pow(2, -10 * amount) * Math.sin((amount - 0.1) * 5 * Math.PI) + 1;
},
InOut: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
amount *= 2;
if (amount < 1) {
return -0.5 * Math.pow(2, 10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI);
}
return 0.5 * Math.pow(2, -10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI) + 1;
},
}),
Back: Object.freeze({
In: function (amount) {
var s = 1.70158;
return amount === 1 ? 1 : amount * amount * ((s + 1) * amount - s);
},
Out: function (amount) {
var s = 1.70158;
return amount === 0 ? 0 : --amount * amount * ((s + 1) * amount + s) + 1;
},
InOut: function (amount) {
var s = 1.70158 * 1.525;
if ((amount *= 2) < 1) {
return 0.5 * (amount * amount * ((s + 1) * amount - s));
}
return 0.5 * ((amount -= 2) * amount * ((s + 1) * amount + s) + 2);
},
}),
Bounce: Object.freeze({
In: function (amount) {
return 1 - Easing.Bounce.Out(1 - amount);
},
Out: function (amount) {
if (amount < 1 / 2.75) {
return 7.5625 * amount * amount;
}
else if (amount < 2 / 2.75) {
return 7.5625 * (amount -= 1.5 / 2.75) * amount + 0.75;
}
else if (amount < 2.5 / 2.75) {
return 7.5625 * (amount -= 2.25 / 2.75) * amount + 0.9375;
}
else {
return 7.5625 * (amount -= 2.625 / 2.75) * amount + 0.984375;
}
},
InOut: function (amount) {
if (amount < 0.5) {
return Easing.Bounce.In(amount * 2) * 0.5;
}
return Easing.Bounce.Out(amount * 2 - 1) * 0.5 + 0.5;
},
}),
generatePow: function (power) {
if (power === void 0) { power = 4; }
power = power < Number.EPSILON ? Number.EPSILON : power;
power = power > 10000 ? 10000 : power;
return {
In: function (amount) {
return Math.pow(amount, power);
},
Out: function (amount) {
return 1 - Math.pow((1 - amount), power);
},
InOut: function (amount) {
if (amount < 0.5) {
return Math.pow((amount * 2), power) / 2;
}
return (1 - Math.pow((2 - amount * 2), power)) / 2 + 0.5;
},
};
},
});
var _nowFunc = function () { return performance.now(); };
var now = function () {
return _nowFunc();
};
function setNow(nowFunction) {
_nowFunc = nowFunction;
}
/**
* Controlling groups of tweens
*
* Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components.
* In these cases, you may want to create your own smaller groups of tween
*/
var Group = /** @class */ (function () {
function Group() {
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
this._tweens = {};
this._tweensAddedDuringUpdate = {};
this.add.apply(this, tweens);
}
Group.prototype.getAll = function () {
var _this = this;
return Object.keys(this._tweens).map(function (tweenId) { return _this._tweens[tweenId]; });
};
Group.prototype.removeAll = function () {
this._tweens = {};
};
Group.prototype.add = function () {
var _a;
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
for (var _b = 0, tweens_1 = tweens; _b < tweens_1.length; _b++) {
var tween = tweens_1[_b];
// Remove from any other group first, a tween can only be in one group at a time.
// @ts-expect-error library internal access
(_a = tween._group) === null || _a === void 0 ? void 0 : _a.remove(tween);
// @ts-expect-error library internal access
tween._group = this;
this._tweens[tween.getId()] = tween;
this._tweensAddedDuringUpdate[tween.getId()] = tween;
}
};
Group.prototype.remove = function () {
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
for (var _a = 0, tweens_2 = tweens; _a < tweens_2.length; _a++) {
var tween = tweens_2[_a];
// @ts-expect-error library internal access
tween._group = undefined;
delete this._tweens[tween.getId()];
delete this._tweensAddedDuringUpdate[tween.getId()];
}
};
/** Return true if all tweens in the group are not paused or playing. */
Group.prototype.allStopped = function () {
return this.getAll().every(function (tween) { return !tween.isPlaying(); });
};
Group.prototype.update = function (time, preserve) {
if (time === void 0) { time = now(); }
if (preserve === void 0) { preserve = true; }
var tweenIds = Object.keys(this._tweens);
if (tweenIds.length === 0)
return;
// Tweens are updated in "batches". If you add a new tween during an
// update, then the new tween will be updated in the next batch.
// If you remove a tween during an update, it may or may not be updated.
// However, if the removed tween was added during the current batch,
// then it will not be updated.
while (tweenIds.length > 0) {
this._tweensAddedDuringUpdate = {};
for (var i = 0; i < tweenIds.length; i++) {
var tween = this._tweens[tweenIds[i]];
var autoStart = !preserve;
if (tween && tween.update(time, autoStart) === false && !preserve)
this.remove(tween);
}
tweenIds = Object.keys(this._tweensAddedDuringUpdate);
}
};
Group.prototype.onComplete = function (callback) {
var group = this.getAll();
group.forEach(function (tween) {
var prevCallback = tween.getCompleteCallback();
tween.onComplete(function () {
prevCallback === null || prevCallback === void 0 ? void 0 : prevCallback(tween);
// After the onComplete callback completes, _isPlaying is updated to false, so if the total number of completed tweens is -1, then they are all complete.
var completedGroup = group.filter(function (tween) { return !tween.isPlaying(); });
if (completedGroup.length === group.length - 1)
callback(group);
});
});
};
return Group;
}());
/**
*
*/
var Interpolation = {
Linear: function (v, k) {
var m = v.length - 1;
var f = m * k;
var i = Math.floor(f);
var fn = Interpolation.Utils.Linear;
if (k < 0) {
return fn(v[0], v[1], f);
}
if (k > 1) {
return fn(v[m], v[m - 1], m - f);
}
return fn(v[i], v[i + 1 > m ? m : i + 1], f - i);
},
Bezier: function (v, k) {
var b = 0;
var n = v.length - 1;
var pw = Math.pow;
var bn = Interpolation.Utils.Bernstein;
for (var i = 0; i <= n; i++) {
b += pw(1 - k, n - i) * pw(k, i) * v[i] * bn(n, i);
}
return b;
},
CatmullRom: function (v, k) {
var m = v.length - 1;
var f = m * k;
var i = Math.floor(f);
var fn = Interpolation.Utils.CatmullRom;
if (v[0] === v[m]) {
if (k < 0) {
i = Math.floor((f = m * (1 + k)));
}
return fn(v[(i - 1 + m) % m], v[i], v[(i + 1) % m], v[(i + 2) % m], f - i);
}
else {
if (k < 0) {
return v[0] - (fn(v[0], v[0], v[1], v[1], -f) - v[0]);
}
if (k > 1) {
return v[m] - (fn(v[m], v[m], v[m - 1], v[m - 1], f - m) - v[m]);
}
return fn(v[i ? i - 1 : 0], v[i], v[m < i + 1 ? m : i + 1], v[m < i + 2 ? m : i + 2], f - i);
}
},
Utils: {
Linear: function (p0, p1, t) {
return (p1 - p0) * t + p0;
},
Bernstein: function (n, i) {
var fc = Interpolation.Utils.Factorial;
return fc(n) / fc(i) / fc(n - i);
},
Factorial: (function () {
var a = [1];
return function (n) {
var s = 1;
if (a[n]) {
return a[n];
}
for (var i = n; i > 1; i--) {
s *= i;
}
a[n] = s;
return s;
};
})(),
CatmullRom: function (p0, p1, p2, p3, t) {
var v0 = (p2 - p0) * 0.5;
var v1 = (p3 - p1) * 0.5;
var t2 = t * t;
var t3 = t * t2;
return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
},
},
};
/**
* Utils
*/
var Sequence = /** @class */ (function () {
function Sequence() {
}
Sequence.nextId = function () {
return Sequence._nextId++;
};
Sequence._nextId = 0;
return Sequence;
}());
var mainGroup = new Group();
/**
* Tween.js - Licensed under the MIT license
* https://github.com/tweenjs/tween.js
* ----------------------------------------------
*
* See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
* Thank you all, you're awesome!
*/
var Tween = /** @class */ (function () {
function Tween(object, group) {
this._isPaused = false;
this._pauseStart = 0;
this._valuesStart = {};
this._valuesEnd = {};
this._valuesStartRepeat = {};
this._duration = 1000;
this._isDynamic = false;
this._initialRepeat = 0;
this._repeat = 0;
this._yoyo = false;
this._isPlaying = false;
this._reversed = false;
this._delayTime = 0;
this._startTime = 0;
this._easingFunction = Easing.Linear.None;
this._interpolationFunction = Interpolation.Linear;
// eslint-disable-next-line
this._chainedTweens = [];
this._onStartCallbackFired = false;
this._onEveryStartCallbackFired = false;
this._id = Sequence.nextId();
this._isChainStopped = false;
this._propertiesAreSetUp = false;
this._goToEnd = false;
this._object = object;
if (typeof group === 'object') {
this._group = group;
group.add(this);
}
// Use "true" to restore old behavior (will be removed in future release).
else if (group === true) {
this._group = mainGroup;
mainGroup.add(this);
}
}
Tween.prototype.getId = function () {
return this._id;
};
Tween.prototype.getCompleteCallback = function () {
return this._onCompleteCallback;
};
Tween.prototype.isPlaying = function () {
return this._isPlaying;
};
Tween.prototype.isPaused = function () {
return this._isPaused;
};
Tween.prototype.getDuration = function () {
return this._duration;
};
Tween.prototype.to = function (target, duration) {
if (duration === void 0) { duration = 1000; }
if (this._isPlaying)
throw new Error('Can not call Tween.to() while Tween is already started or paused. Stop the Tween first.');
this._valuesEnd = target;
this._propertiesAreSetUp = false;
this._duration = duration < 0 ? 0 : duration;
return this;
};
Tween.prototype.duration = function (duration) {
if (duration === void 0) { duration = 1000; }
this._duration = duration < 0 ? 0 : duration;
return this;
};
Tween.prototype.dynamic = function (dynamic) {
if (dynamic === void 0) { dynamic = false; }
this._isDynamic = dynamic;
return this;
};
Tween.prototype.start = function (time, overrideStartingValues) {
if (time === void 0) { time = now(); }
if (overrideStartingValues === void 0) { overrideStartingValues = false; }
if (this._isPlaying) {
return this;
}
this._repeat = this._initialRepeat;
if (this._reversed) {
// If we were reversed (f.e. using the yoyo feature) then we need to
// flip the tween direction back to forward.
this._reversed = false;
for (var property in this._valuesStartRepeat) {
this._swapEndStartRepeatValues(property);
this._valuesStart[property] = this._valuesStartRepeat[property];
}
}
this._isPlaying = true;
this._isPaused = false;
this._onStartCallbackFired = false;
this._onEveryStartCallbackFired = false;
this._isChainStopped = false;
this._startTime = time;
this._startTime += this._delayTime;
if (!this._propertiesAreSetUp || overrideStartingValues) {
this._propertiesAreSetUp = true;
// If dynamic is not enabled, clone the end values instead of using the passed-in end values.
if (!this._isDynamic) {
var tmp = {};
for (var prop in this._valuesEnd)
tmp[prop] = this._valuesEnd[prop];
this._valuesEnd = tmp;
}
this._setupProperties(this._object, this._valuesStart, this._valuesEnd, this._valuesStartRepeat, overrideStartingValues);
}
return this;
};
Tween.prototype.startFromCurrentValues = function (time) {
return this.start(time, true);
};
Tween.prototype._setupProperties = function (_object, _valuesStart, _valuesEnd, _valuesStartRepeat, overrideStartingValues) {
for (var property in _valuesEnd) {
var startValue = _object[property];
var startValueIsArray = Array.isArray(startValue);
var propType = startValueIsArray ? 'array' : typeof startValue;
var isInterpolationList = !startValueIsArray && Array.isArray(_valuesEnd[property]);
// If `to()` specifies a property that doesn't exist in the source object,
// we should not set that property in the object
if (propType === 'undefined' || propType === 'function') {
continue;
}
// Check if an Array was provided as property value
if (isInterpolationList) {
var endValues = _valuesEnd[property];
if (endValues.length === 0) {
continue;
}
// Handle an array of relative values.
// Creates a local copy of the Array with the start value at the front
var temp = [startValue];
for (var i = 0, l = endValues.length; i < l; i += 1) {
var value = this._handleRelativeValue(startValue, endValues[i]);
if (isNaN(value)) {
isInterpolationList = false;
console.warn('Found invalid interpolation list. Skipping.');
break;
}
temp.push(value);
}
if (isInterpolationList) {
// if (_valuesStart[property] === undefined) { // handle end values only the first time. NOT NEEDED? setupProperties is now guarded by _propertiesAreSetUp.
_valuesEnd[property] = temp;
// }
}
}
// handle the deepness of the values
if ((propType === 'object' || startValueIsArray) && startValue && !isInterpolationList) {
_valuesStart[property] = startValueIsArray ? [] : {};
var nestedObject = startValue;
for (var prop in nestedObject) {
_valuesStart[property][prop] = nestedObject[prop];
}
// TODO? repeat nested values? And yoyo? And array values?
_valuesStartRepeat[property] = startValueIsArray ? [] : {};
var endValues = _valuesEnd[property];
// If dynamic is not enabled, clone the end values instead of using the passed-in end values.
if (!this._isDynamic) {
var tmp = {};
for (var prop in endValues)
tmp[prop] = endValues[prop];
_valuesEnd[property] = endValues = tmp;
}
this._setupProperties(nestedObject, _valuesStart[property], endValues, _valuesStartRepeat[property], overrideStartingValues);
}
else {
// Save the starting value, but only once unless override is requested.
if (typeof _valuesStart[property] === 'undefined' || overrideStartingValues) {
_valuesStart[property] = startValue;
}
if (!startValueIsArray) {
// eslint-disable-next-line
// @ts-ignore FIXME?
_valuesStart[property] *= 1.0; // Ensures we're using numbers, not strings
}
if (isInterpolationList) {
// eslint-disable-next-line
// @ts-ignore FIXME?
_valuesStartRepeat[property] = _valuesEnd[property].slice().reverse();
}
else {
_valuesStartRepeat[property] = _valuesStart[property] || 0;
}
}
}
};
Tween.prototype.stop = function () {
if (!this._isChainStopped) {
this._isChainStopped = true;
this.stopChainedTweens();
}
if (!this._isPlaying) {
return this;
}
this._isPlaying = false;
this._isPaused = false;
if (this._onStopCallback) {
this._onStopCallback(this._object);
}
return this;
};
Tween.prototype.end = function () {
this._goToEnd = true;
this.update(this._startTime + this._duration);
return this;
};
Tween.prototype.pause = function (time) {
if (time === void 0) { time = now(); }
if (this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = true;
this._pauseStart = time;
return this;
};
Tween.prototype.resume = function (time) {
if (time === void 0) { time = now(); }
if (!this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = false;
this._startTime += time - this._pauseStart;
this._pauseStart = 0;
return this;
};
Tween.prototype.stopChainedTweens = function () {
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
this._chainedTweens[i].stop();
}
return this;
};
Tween.prototype.group = function (group) {
if (!group) {
console.warn('tween.group() without args has been removed, use group.add(tween) instead.');
return this;
}
group.add(this);
return this;
};
/**
* Removes the tween from whichever group it is in.
*/
Tween.prototype.remove = function () {
var _a;
(_a = this._group) === null || _a === void 0 ? void 0 : _a.remove(this);
return this;
};
Tween.prototype.delay = function (amount) {
if (amount === void 0) { amount = 0; }
this._delayTime = amount;
return this;
};
Tween.prototype.repeat = function (times) {
if (times === void 0) { times = 0; }
this._initialRepeat = times;
this._repeat = times;
return this;
};
Tween.prototype.repeatDelay = function (amount) {
this._repeatDelayTime = amount;
return this;
};
Tween.prototype.yoyo = function (yoyo) {
if (yoyo === void 0) { yoyo = false; }
this._yoyo = yoyo;
return this;
};
Tween.prototype.easing = function (easingFunction) {
if (easingFunction === void 0) { easingFunction = Easing.Linear.None; }
this._easingFunction = easingFunction;
return this;
};
Tween.prototype.interpolation = function (interpolationFunction) {
if (interpolationFunction === void 0) { interpolationFunction = Interpolation.Linear; }
this._interpolationFunction = interpolationFunction;
return this;
};
// eslint-disable-next-line
Tween.prototype.chain = function () {
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
this._chainedTweens = tweens;
return this;
};
Tween.prototype.onStart = function (callback) {
this._onStartCallback = callback;
return this;
};
Tween.prototype.onEveryStart = function (callback) {
this._onEveryStartCallback = callback;
return this;
};
Tween.prototype.onUpdate = function (callback) {
this._onUpdateCallback = callback;
return this;
};
Tween.prototype.onRepeat = function (callback) {
this._onRepeatCallback = callback;
return this;
};
Tween.prototype.onComplete = function (callback) {
this._onCompleteCallback = callback;
return this;
};
Tween.prototype.onStop = function (callback) {
this._onStopCallback = callback;
return this;
};
/**
* @returns true if the tween is still playing after the update, false
* otherwise (calling update on a paused tween still returns true because
* it is still playing, just paused).
*
* @param autoStart - When true, calling update will implicitly call start()
* as well. Note, if you stop() or end() the tween, but are still calling
* update(), it will start again!
*/
Tween.prototype.update = function (time, autoStart) {
var _this = this;
var _a;
if (time === void 0) { time = now(); }
if (autoStart === void 0) { autoStart = Tween.autoStartOnUpdate; }
if (this._isPaused)
return true;
var property;
if (!this._goToEnd && !this._isPlaying) {
if (autoStart)
this.start(time, true);
else
return false;
}
this._goToEnd = false;
if (time < this._startTime) {
return true;
}
if (this._onStartCallbackFired === false) {
if (this._onStartCallback) {
this._onStartCallback(this._object);
}
this._onStartCallbackFired = true;
}
if (this._onEveryStartCallbackFired === false) {
if (this._onEveryStartCallback) {
this._onEveryStartCallback(this._object);
}
this._onEveryStartCallbackFired = true;
}
var elapsedTime = time - this._startTime;
var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
var totalTime = this._duration + this._repeat * durationAndDelay;
var calculateElapsedPortion = function () {
if (_this._duration === 0)
return 1;
if (elapsedTime > totalTime) {
return 1;
}
var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
// TODO use %?
// const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
if (portion === 0 && elapsedTime === _this._duration) {
return 1;
}
return portion;
};
var elapsed = calculateElapsedPortion();
var value = this._easingFunction(elapsed);
// properties transformations
this._updateProperties(this._object, this._valuesStart, this._valuesEnd, value);
if (this._onUpdateCallback) {
this._onUpdateCallback(this._object, elapsed);
}
if (this._duration === 0 || elapsedTime >= this._duration) {
if (this._repeat > 0) {
var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
if (isFinite(this._repeat)) {
this._repeat -= completeCount;
}
// Reassign starting values, restart by making startTime = now
for (property in this._valuesStartRepeat) {
if (!this._yoyo && typeof this._valuesEnd[property] === 'string') {
this._valuesStartRepeat[property] =
// eslint-disable-next-line
// @ts-ignore FIXME?
this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property]);
}
if (this._yoyo) {
this._swapEndStartRepeatValues(property);
}
this._valuesStart[property] = this._valuesStartRepeat[property];
}
if (this._yoyo) {
this._reversed = !this._reversed;
}
this._startTime += durationAndDelay * completeCount;
if (this._onRepeatCallback) {
this._onRepeatCallback(this._object);
}
this._onEveryStartCallbackFired = false;
return true;
}
else {
if (this._onCompleteCallback) {
this._onCompleteCallback(this._object);
}
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
// Make the chained tweens start exactly at the time they should,
// even if the `update()` method was called way past the duration of the tween
this._chainedTweens[i].start(this._startTime + this._duration, false);
}
this._isPlaying = false;
return false;
}
}
return true;
};
Tween.prototype._updateProperties = function (_object, _valuesStart, _valuesEnd, value) {
for (var property in _valuesEnd) {
// Don't update properties that do not exist in the source object
if (_valuesStart[property] === undefined) {
continue;
}
var start = _valuesStart[property] || 0;
var end = _valuesEnd[property];
var startIsArray = Array.isArray(_object[property]);
var endIsArray = Array.isArray(end);
var isInterpolationList = !startIsArray && endIsArray;
if (isInterpolationList) {
_object[property] = this._interpolationFunction(end, value);
}
else if (typeof end === 'object' && end) {
// eslint-disable-next-line
// @ts-ignore FIXME?
this._updateProperties(_object[property], start, end, value);
}
else {
// Parses relative end values with start as base (e.g.: +10, -3)
end = this._handleRelativeValue(start, end);
// Protect against non numeric properties.
if (typeof end === 'number') {
// eslint-disable-next-line
// @ts-ignore FIXME?
_object[property] = start + (end - start) * value;
}
}
}
};
Tween.prototype._handleRelativeValue = function (start, end) {
if (typeof end !== 'string') {
return end;
}
if (end.charAt(0) === '+' || end.charAt(0) === '-') {
return start + parseFloat(end);
}
return parseFloat(end);
};
Tween.prototype._swapEndStartRepeatValues = function (property) {
var tmp = this._valuesStartRepeat[property];
var endValue = this._valuesEnd[property];
if (typeof endValue === 'string') {
this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(endValue);
}
else {
this._valuesStartRepeat[property] = this._valuesEnd[property];
}
this._valuesEnd[property] = tmp;
};
Tween.autoStartOnUpdate = false;
return Tween;
}());
var VERSION = '25.0.0';
/**
* Tween.js - Licensed under the MIT license
* https://github.com/tweenjs/tween.js
* ----------------------------------------------
*
* See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
* Thank you all, you're awesome!
*/
var nextId = Sequence.nextId;
/**
* Controlling groups of tweens
*
* Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components.
* In these cases, you may want to create your own smaller groups of tweens.
*/
var TWEEN = mainGroup;
// This is the best way to export things in a way that's compatible with both ES
// Modules and CommonJS, without build hacks, and so as not to break the
// existing API.
// https://github.com/rollup/rollup/issues/1961#issuecomment-423037881
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var getAll = TWEEN.getAll.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var removeAll = TWEEN.removeAll.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var add = TWEEN.add.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var remove = TWEEN.remove.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var update = TWEEN.update.bind(TWEEN);
var exports$1 = {
Easing: Easing,
Group: Group,
Interpolation: Interpolation,
now: now,
setNow: setNow,
Sequence: Sequence,
nextId: nextId,
Tween: Tween,
VERSION: VERSION,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
getAll: getAll,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
removeAll: removeAll,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
add: add,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
remove: remove,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
update: update,
};
exports.Easing = Easing;
exports.Group = Group;
exports.Interpolation = Interpolation;
exports.Sequence = Sequence;
exports.Tween = Tween;
exports.VERSION = VERSION;
exports.add = add;
exports.default = exports$1;
exports.getAll = getAll;
exports.nextId = nextId;
exports.now = now;
exports.remove = remove;
exports.removeAll = removeAll;
exports.setNow = setNow;
exports.update = update;
Object.defineProperty(exports, '__esModule', { value: true });
}));
================================================
FILE: dist/tween.cjs
================================================
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
/**
* The Ease class provides a collection of easing functions for use with tween.js.
*/
var Easing = Object.freeze({
Linear: Object.freeze({
None: function (amount) {
return amount;
},
In: function (amount) {
return amount;
},
Out: function (amount) {
return amount;
},
InOut: function (amount) {
return amount;
},
}),
Quadratic: Object.freeze({
In: function (amount) {
return amount * amount;
},
Out: function (amount) {
return amount * (2 - amount);
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount;
}
return -0.5 * (--amount * (amount - 2) - 1);
},
}),
Cubic: Object.freeze({
In: function (amount) {
return amount * amount * amount;
},
Out: function (amount) {
return --amount * amount * amount + 1;
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount * amount;
}
return 0.5 * ((amount -= 2) * amount * amount + 2);
},
}),
Quartic: Object.freeze({
In: function (amount) {
return amount * amount * amount * amount;
},
Out: function (amount) {
return 1 - --amount * amount * amount * amount;
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount * amount * amount;
}
return -0.5 * ((amount -= 2) * amount * amount * amount - 2);
},
}),
Quintic: Object.freeze({
In: function (amount) {
return amount * amount * amount * amount * amount;
},
Out: function (amount) {
return --amount * amount * amount * amount * amount + 1;
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount * amount * amount * amount;
}
return 0.5 * ((amount -= 2) * amount * amount * amount * amount + 2);
},
}),
Sinusoidal: Object.freeze({
In: function (amount) {
return 1 - Math.sin(((1.0 - amount) * Math.PI) / 2);
},
Out: function (amount) {
return Math.sin((amount * Math.PI) / 2);
},
InOut: function (amount) {
return 0.5 * (1 - Math.sin(Math.PI * (0.5 - amount)));
},
}),
Exponential: Object.freeze({
In: function (amount) {
return amount === 0 ? 0 : Math.pow(1024, amount - 1);
},
Out: function (amount) {
return amount === 1 ? 1 : 1 - Math.pow(2, -10 * amount);
},
InOut: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
if ((amount *= 2) < 1) {
return 0.5 * Math.pow(1024, amount - 1);
}
return 0.5 * (-Math.pow(2, -10 * (amount - 1)) + 2);
},
}),
Circular: Object.freeze({
In: function (amount) {
return 1 - Math.sqrt(1 - amount * amount);
},
Out: function (amount) {
return Math.sqrt(1 - --amount * amount);
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return -0.5 * (Math.sqrt(1 - amount * amount) - 1);
}
return 0.5 * (Math.sqrt(1 - (amount -= 2) * amount) + 1);
},
}),
Elastic: Object.freeze({
In: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
return -Math.pow(2, 10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI);
},
Out: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
return Math.pow(2, -10 * amount) * Math.sin((amount - 0.1) * 5 * Math.PI) + 1;
},
InOut: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
amount *= 2;
if (amount < 1) {
return -0.5 * Math.pow(2, 10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI);
}
return 0.5 * Math.pow(2, -10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI) + 1;
},
}),
Back: Object.freeze({
In: function (amount) {
var s = 1.70158;
return amount === 1 ? 1 : amount * amount * ((s + 1) * amount - s);
},
Out: function (amount) {
var s = 1.70158;
return amount === 0 ? 0 : --amount * amount * ((s + 1) * amount + s) + 1;
},
InOut: function (amount) {
var s = 1.70158 * 1.525;
if ((amount *= 2) < 1) {
return 0.5 * (amount * amount * ((s + 1) * amount - s));
}
return 0.5 * ((amount -= 2) * amount * ((s + 1) * amount + s) + 2);
},
}),
Bounce: Object.freeze({
In: function (amount) {
return 1 - Easing.Bounce.Out(1 - amount);
},
Out: function (amount) {
if (amount < 1 / 2.75) {
return 7.5625 * amount * amount;
}
else if (amount < 2 / 2.75) {
return 7.5625 * (amount -= 1.5 / 2.75) * amount + 0.75;
}
else if (amount < 2.5 / 2.75) {
return 7.5625 * (amount -= 2.25 / 2.75) * amount + 0.9375;
}
else {
return 7.5625 * (amount -= 2.625 / 2.75) * amount + 0.984375;
}
},
InOut: function (amount) {
if (amount < 0.5) {
return Easing.Bounce.In(amount * 2) * 0.5;
}
return Easing.Bounce.Out(amount * 2 - 1) * 0.5 + 0.5;
},
}),
generatePow: function (power) {
if (power === void 0) { power = 4; }
power = power < Number.EPSILON ? Number.EPSILON : power;
power = power > 10000 ? 10000 : power;
return {
In: function (amount) {
return Math.pow(amount, power);
},
Out: function (amount) {
return 1 - Math.pow((1 - amount), power);
},
InOut: function (amount) {
if (amount < 0.5) {
return Math.pow((amount * 2), power) / 2;
}
return (1 - Math.pow((2 - amount * 2), power)) / 2 + 0.5;
},
};
},
});
var _nowFunc = function () { return performance.now(); };
var now = function () {
return _nowFunc();
};
function setNow(nowFunction) {
_nowFunc = nowFunction;
}
/**
* Controlling groups of tweens
*
* Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components.
* In these cases, you may want to create your own smaller groups of tween
*/
var Group = /** @class */ (function () {
function Group() {
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
this._tweens = {};
this._tweensAddedDuringUpdate = {};
this.add.apply(this, tweens);
}
Group.prototype.getAll = function () {
var _this = this;
return Object.keys(this._tweens).map(function (tweenId) { return _this._tweens[tweenId]; });
};
Group.prototype.removeAll = function () {
this._tweens = {};
};
Group.prototype.add = function () {
var _a;
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
for (var _b = 0, tweens_1 = tweens; _b < tweens_1.length; _b++) {
var tween = tweens_1[_b];
// Remove from any other group first, a tween can only be in one group at a time.
// @ts-expect-error library internal access
(_a = tween._group) === null || _a === void 0 ? void 0 : _a.remove(tween);
// @ts-expect-error library internal access
tween._group = this;
this._tweens[tween.getId()] = tween;
this._tweensAddedDuringUpdate[tween.getId()] = tween;
}
};
Group.prototype.remove = function () {
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
for (var _a = 0, tweens_2 = tweens; _a < tweens_2.length; _a++) {
var tween = tweens_2[_a];
// @ts-expect-error library internal access
tween._group = undefined;
delete this._tweens[tween.getId()];
delete this._tweensAddedDuringUpdate[tween.getId()];
}
};
/** Return true if all tweens in the group are not paused or playing. */
Group.prototype.allStopped = function () {
return this.getAll().every(function (tween) { return !tween.isPlaying(); });
};
Group.prototype.update = function (time, preserve) {
if (time === void 0) { time = now(); }
if (preserve === void 0) { preserve = true; }
var tweenIds = Object.keys(this._tweens);
if (tweenIds.length === 0)
return;
// Tweens are updated in "batches". If you add a new tween during an
// update, then the new tween will be updated in the next batch.
// If you remove a tween during an update, it may or may not be updated.
// However, if the removed tween was added during the current batch,
// then it will not be updated.
while (tweenIds.length > 0) {
this._tweensAddedDuringUpdate = {};
for (var i = 0; i < tweenIds.length; i++) {
var tween = this._tweens[tweenIds[i]];
var autoStart = !preserve;
if (tween && tween.update(time, autoStart) === false && !preserve)
this.remove(tween);
}
tweenIds = Object.keys(this._tweensAddedDuringUpdate);
}
};
Group.prototype.onComplete = function (callback) {
var group = this.getAll();
group.forEach(function (tween) {
var prevCallback = tween.getCompleteCallback();
tween.onComplete(function () {
prevCallback === null || prevCallback === void 0 ? void 0 : prevCallback(tween);
// After the onComplete callback completes, _isPlaying is updated to false, so if the total number of completed tweens is -1, then they are all complete.
var completedGroup = group.filter(function (tween) { return !tween.isPlaying(); });
if (completedGroup.length === group.length - 1)
callback(group);
});
});
};
return Group;
}());
/**
*
*/
var Interpolation = {
Linear: function (v, k) {
var m = v.length - 1;
var f = m * k;
var i = Math.floor(f);
var fn = Interpolation.Utils.Linear;
if (k < 0) {
return fn(v[0], v[1], f);
}
if (k > 1) {
return fn(v[m], v[m - 1], m - f);
}
return fn(v[i], v[i + 1 > m ? m : i + 1], f - i);
},
Bezier: function (v, k) {
var b = 0;
var n = v.length - 1;
var pw = Math.pow;
var bn = Interpolation.Utils.Bernstein;
for (var i = 0; i <= n; i++) {
b += pw(1 - k, n - i) * pw(k, i) * v[i] * bn(n, i);
}
return b;
},
CatmullRom: function (v, k) {
var m = v.length - 1;
var f = m * k;
var i = Math.floor(f);
var fn = Interpolation.Utils.CatmullRom;
if (v[0] === v[m]) {
if (k < 0) {
i = Math.floor((f = m * (1 + k)));
}
return fn(v[(i - 1 + m) % m], v[i], v[(i + 1) % m], v[(i + 2) % m], f - i);
}
else {
if (k < 0) {
return v[0] - (fn(v[0], v[0], v[1], v[1], -f) - v[0]);
}
if (k > 1) {
return v[m] - (fn(v[m], v[m], v[m - 1], v[m - 1], f - m) - v[m]);
}
return fn(v[i ? i - 1 : 0], v[i], v[m < i + 1 ? m : i + 1], v[m < i + 2 ? m : i + 2], f - i);
}
},
Utils: {
Linear: function (p0, p1, t) {
return (p1 - p0) * t + p0;
},
Bernstein: function (n, i) {
var fc = Interpolation.Utils.Factorial;
return fc(n) / fc(i) / fc(n - i);
},
Factorial: (function () {
var a = [1];
return function (n) {
var s = 1;
if (a[n]) {
return a[n];
}
for (var i = n; i > 1; i--) {
s *= i;
}
a[n] = s;
return s;
};
})(),
CatmullRom: function (p0, p1, p2, p3, t) {
var v0 = (p2 - p0) * 0.5;
var v1 = (p3 - p1) * 0.5;
var t2 = t * t;
var t3 = t * t2;
return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
},
},
};
/**
* Utils
*/
var Sequence = /** @class */ (function () {
function Sequence() {
}
Sequence.nextId = function () {
return Sequence._nextId++;
};
Sequence._nextId = 0;
return Sequence;
}());
var mainGroup = new Group();
/**
* Tween.js - Licensed under the MIT license
* https://github.com/tweenjs/tween.js
* ----------------------------------------------
*
* See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
* Thank you all, you're awesome!
*/
var Tween = /** @class */ (function () {
function Tween(object, group) {
this._isPaused = false;
this._pauseStart = 0;
this._valuesStart = {};
this._valuesEnd = {};
this._valuesStartRepeat = {};
this._duration = 1000;
this._isDynamic = false;
this._initialRepeat = 0;
this._repeat = 0;
this._yoyo = false;
this._isPlaying = false;
this._reversed = false;
this._delayTime = 0;
this._startTime = 0;
this._easingFunction = Easing.Linear.None;
this._interpolationFunction = Interpolation.Linear;
// eslint-disable-next-line
this._chainedTweens = [];
this._onStartCallbackFired = false;
this._onEveryStartCallbackFired = false;
this._id = Sequence.nextId();
this._isChainStopped = false;
this._propertiesAreSetUp = false;
this._goToEnd = false;
this._object = object;
if (typeof group === 'object') {
this._group = group;
group.add(this);
}
// Use "true" to restore old behavior (will be removed in future release).
else if (group === true) {
this._group = mainGroup;
mainGroup.add(this);
}
}
Tween.prototype.getId = function () {
return this._id;
};
Tween.prototype.getCompleteCallback = function () {
return this._onCompleteCallback;
};
Tween.prototype.isPlaying = function () {
return this._isPlaying;
};
Tween.prototype.isPaused = function () {
return this._isPaused;
};
Tween.prototype.getDuration = function () {
return this._duration;
};
Tween.prototype.to = function (target, duration) {
if (duration === void 0) { duration = 1000; }
if (this._isPlaying)
throw new Error('Can not call Tween.to() while Tween is already started or paused. Stop the Tween first.');
this._valuesEnd = target;
this._propertiesAreSetUp = false;
this._duration = duration < 0 ? 0 : duration;
return this;
};
Tween.prototype.duration = function (duration) {
if (duration === void 0) { duration = 1000; }
this._duration = duration < 0 ? 0 : duration;
return this;
};
Tween.prototype.dynamic = function (dynamic) {
if (dynamic === void 0) { dynamic = false; }
this._isDynamic = dynamic;
return this;
};
Tween.prototype.start = function (time, overrideStartingValues) {
if (time === void 0) { time = now(); }
if (overrideStartingValues === void 0) { overrideStartingValues = false; }
if (this._isPlaying) {
return this;
}
this._repeat = this._initialRepeat;
if (this._reversed) {
// If we were reversed (f.e. using the yoyo feature) then we need to
// flip the tween direction back to forward.
this._reversed = false;
for (var property in this._valuesStartRepeat) {
this._swapEndStartRepeatValues(property);
this._valuesStart[property] = this._valuesStartRepeat[property];
}
}
this._isPlaying = true;
this._isPaused = false;
this._onStartCallbackFired = false;
this._onEveryStartCallbackFired = false;
this._isChainStopped = false;
this._startTime = time;
this._startTime += this._delayTime;
if (!this._propertiesAreSetUp || overrideStartingValues) {
this._propertiesAreSetUp = true;
// If dynamic is not enabled, clone the end values instead of using the passed-in end values.
if (!this._isDynamic) {
var tmp = {};
for (var prop in this._valuesEnd)
tmp[prop] = this._valuesEnd[prop];
this._valuesEnd = tmp;
}
this._setupProperties(this._object, this._valuesStart, this._valuesEnd, this._valuesStartRepeat, overrideStartingValues);
}
return this;
};
Tween.prototype.startFromCurrentValues = function (time) {
return this.start(time, true);
};
Tween.prototype._setupProperties = function (_object, _valuesStart, _valuesEnd, _valuesStartRepeat, overrideStartingValues) {
for (var property in _valuesEnd) {
var startValue = _object[property];
var startValueIsArray = Array.isArray(startValue);
var propType = startValueIsArray ? 'array' : typeof startValue;
var isInterpolationList = !startValueIsArray && Array.isArray(_valuesEnd[property]);
// If `to()` specifies a property that doesn't exist in the source object,
// we should not set that property in the object
if (propType === 'undefined' || propType === 'function') {
continue;
}
// Check if an Array was provided as property value
if (isInterpolationList) {
var endValues = _valuesEnd[property];
if (endValues.length === 0) {
continue;
}
// Handle an array of relative values.
// Creates a local copy of the Array with the start value at the front
var temp = [startValue];
for (var i = 0, l = endValues.length; i < l; i += 1) {
var value = this._handleRelativeValue(startValue, endValues[i]);
if (isNaN(value)) {
isInterpolationList = false;
console.warn('Found invalid interpolation list. Skipping.');
break;
}
temp.push(value);
}
if (isInterpolationList) {
// if (_valuesStart[property] === undefined) { // handle end values only the first time. NOT NEEDED? setupProperties is now guarded by _propertiesAreSetUp.
_valuesEnd[property] = temp;
// }
}
}
// handle the deepness of the values
if ((propType === 'object' || startValueIsArray) && startValue && !isInterpolationList) {
_valuesStart[property] = startValueIsArray ? [] : {};
var nestedObject = startValue;
for (var prop in nestedObject) {
_valuesStart[property][prop] = nestedObject[prop];
}
// TODO? repeat nested values? And yoyo? And array values?
_valuesStartRepeat[property] = startValueIsArray ? [] : {};
var endValues = _valuesEnd[property];
// If dynamic is not enabled, clone the end values instead of using the passed-in end values.
if (!this._isDynamic) {
var tmp = {};
for (var prop in endValues)
tmp[prop] = endValues[prop];
_valuesEnd[property] = endValues = tmp;
}
this._setupProperties(nestedObject, _valuesStart[property], endValues, _valuesStartRepeat[property], overrideStartingValues);
}
else {
// Save the starting value, but only once unless override is requested.
if (typeof _valuesStart[property] === 'undefined' || overrideStartingValues) {
_valuesStart[property] = startValue;
}
if (!startValueIsArray) {
// eslint-disable-next-line
// @ts-ignore FIXME?
_valuesStart[property] *= 1.0; // Ensures we're using numbers, not strings
}
if (isInterpolationList) {
// eslint-disable-next-line
// @ts-ignore FIXME?
_valuesStartRepeat[property] = _valuesEnd[property].slice().reverse();
}
else {
_valuesStartRepeat[property] = _valuesStart[property] || 0;
}
}
}
};
Tween.prototype.stop = function () {
if (!this._isChainStopped) {
this._isChainStopped = true;
this.stopChainedTweens();
}
if (!this._isPlaying) {
return this;
}
this._isPlaying = false;
this._isPaused = false;
if (this._onStopCallback) {
this._onStopCallback(this._object);
}
return this;
};
Tween.prototype.end = function () {
this._goToEnd = true;
this.update(this._startTime + this._duration);
return this;
};
Tween.prototype.pause = function (time) {
if (time === void 0) { time = now(); }
if (this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = true;
this._pauseStart = time;
return this;
};
Tween.prototype.resume = function (time) {
if (time === void 0) { time = now(); }
if (!this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = false;
this._startTime += time - this._pauseStart;
this._pauseStart = 0;
return this;
};
Tween.prototype.stopChainedTweens = function () {
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
this._chainedTweens[i].stop();
}
return this;
};
Tween.prototype.group = function (group) {
if (!group) {
console.warn('tween.group() without args has been removed, use group.add(tween) instead.');
return this;
}
group.add(this);
return this;
};
/**
* Removes the tween from whichever group it is in.
*/
Tween.prototype.remove = function () {
var _a;
(_a = this._group) === null || _a === void 0 ? void 0 : _a.remove(this);
return this;
};
Tween.prototype.delay = function (amount) {
if (amount === void 0) { amount = 0; }
this._delayTime = amount;
return this;
};
Tween.prototype.repeat = function (times) {
if (times === void 0) { times = 0; }
this._initialRepeat = times;
this._repeat = times;
return this;
};
Tween.prototype.repeatDelay = function (amount) {
this._repeatDelayTime = amount;
return this;
};
Tween.prototype.yoyo = function (yoyo) {
if (yoyo === void 0) { yoyo = false; }
this._yoyo = yoyo;
return this;
};
Tween.prototype.easing = function (easingFunction) {
if (easingFunction === void 0) { easingFunction = Easing.Linear.None; }
this._easingFunction = easingFunction;
return this;
};
Tween.prototype.interpolation = function (interpolationFunction) {
if (interpolationFunction === void 0) { interpolationFunction = Interpolation.Linear; }
this._interpolationFunction = interpolationFunction;
return this;
};
// eslint-disable-next-line
Tween.prototype.chain = function () {
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
this._chainedTweens = tweens;
return this;
};
Tween.prototype.onStart = function (callback) {
this._onStartCallback = callback;
return this;
};
Tween.prototype.onEveryStart = function (callback) {
this._onEveryStartCallback = callback;
return this;
};
Tween.prototype.onUpdate = function (callback) {
this._onUpdateCallback = callback;
return this;
};
Tween.prototype.onRepeat = function (callback) {
this._onRepeatCallback = callback;
return this;
};
Tween.prototype.onComplete = function (callback) {
this._onCompleteCallback = callback;
return this;
};
Tween.prototype.onStop = function (callback) {
this._onStopCallback = callback;
return this;
};
/**
* @returns true if the tween is still playing after the update, false
* otherwise (calling update on a paused tween still returns true because
* it is still playing, just paused).
*
* @param autoStart - When true, calling update will implicitly call start()
* as well. Note, if you stop() or end() the tween, but are still calling
* update(), it will start again!
*/
Tween.prototype.update = function (time, autoStart) {
var _this = this;
var _a;
if (time === void 0) { time = now(); }
if (autoStart === void 0) { autoStart = Tween.autoStartOnUpdate; }
if (this._isPaused)
return true;
var property;
if (!this._goToEnd && !this._isPlaying) {
if (autoStart)
this.start(time, true);
else
return false;
}
this._goToEnd = false;
if (time < this._startTime) {
return true;
}
if (this._onStartCallbackFired === false) {
if (this._onStartCallback) {
this._onStartCallback(this._object);
}
this._onStartCallbackFired = true;
}
if (this._onEveryStartCallbackFired === false) {
if (this._onEveryStartCallback) {
this._onEveryStartCallback(this._object);
}
this._onEveryStartCallbackFired = true;
}
var elapsedTime = time - this._startTime;
var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
var totalTime = this._duration + this._repeat * durationAndDelay;
var calculateElapsedPortion = function () {
if (_this._duration === 0)
return 1;
if (elapsedTime > totalTime) {
return 1;
}
var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
// TODO use %?
// const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
if (portion === 0 && elapsedTime === _this._duration) {
return 1;
}
return portion;
};
var elapsed = calculateElapsedPortion();
var value = this._easingFunction(elapsed);
// properties transformations
this._updateProperties(this._object, this._valuesStart, this._valuesEnd, value);
if (this._onUpdateCallback) {
this._onUpdateCallback(this._object, elapsed);
}
if (this._duration === 0 || elapsedTime >= this._duration) {
if (this._repeat > 0) {
var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
if (isFinite(this._repeat)) {
this._repeat -= completeCount;
}
// Reassign starting values, restart by making startTime = now
for (property in this._valuesStartRepeat) {
if (!this._yoyo && typeof this._valuesEnd[property] === 'string') {
this._valuesStartRepeat[property] =
// eslint-disable-next-line
// @ts-ignore FIXME?
this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property]);
}
if (this._yoyo) {
this._swapEndStartRepeatValues(property);
}
this._valuesStart[property] = this._valuesStartRepeat[property];
}
if (this._yoyo) {
this._reversed = !this._reversed;
}
this._startTime += durationAndDelay * completeCount;
if (this._onRepeatCallback) {
this._onRepeatCallback(this._object);
}
this._onEveryStartCallbackFired = false;
return true;
}
else {
if (this._onCompleteCallback) {
this._onCompleteCallback(this._object);
}
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
// Make the chained tweens start exactly at the time they should,
// even if the `update()` method was called way past the duration of the tween
this._chainedTweens[i].start(this._startTime + this._duration, false);
}
this._isPlaying = false;
return false;
}
}
return true;
};
Tween.prototype._updateProperties = function (_object, _valuesStart, _valuesEnd, value) {
for (var property in _valuesEnd) {
// Don't update properties that do not exist in the source object
if (_valuesStart[property] === undefined) {
continue;
}
var start = _valuesStart[property] || 0;
var end = _valuesEnd[property];
var startIsArray = Array.isArray(_object[property]);
var endIsArray = Array.isArray(end);
var isInterpolationList = !startIsArray && endIsArray;
if (isInterpolationList) {
_object[property] = this._interpolationFunction(end, value);
}
else if (typeof end === 'object' && end) {
// eslint-disable-next-line
// @ts-ignore FIXME?
this._updateProperties(_object[property], start, end, value);
}
else {
// Parses relative end values with start as base (e.g.: +10, -3)
end = this._handleRelativeValue(start, end);
// Protect against non numeric properties.
if (typeof end === 'number') {
// eslint-disable-next-line
// @ts-ignore FIXME?
_object[property] = start + (end - start) * value;
}
}
}
};
Tween.prototype._handleRelativeValue = function (start, end) {
if (typeof end !== 'string') {
return end;
}
if (end.charAt(0) === '+' || end.charAt(0) === '-') {
return start + parseFloat(end);
}
return parseFloat(end);
};
Tween.prototype._swapEndStartRepeatValues = function (property) {
var tmp = this._valuesStartRepeat[property];
var endValue = this._valuesEnd[property];
if (typeof endValue === 'string') {
this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(endValue);
}
else {
this._valuesStartRepeat[property] = this._valuesEnd[property];
}
this._valuesEnd[property] = tmp;
};
Tween.autoStartOnUpdate = false;
return Tween;
}());
var VERSION = '25.0.0';
/**
* Tween.js - Licensed under the MIT license
* https://github.com/tweenjs/tween.js
* ----------------------------------------------
*
* See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
* Thank you all, you're awesome!
*/
var nextId = Sequence.nextId;
/**
* Controlling groups of tweens
*
* Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components.
* In these cases, you may want to create your own smaller groups of tweens.
*/
var TWEEN = mainGroup;
// This is the best way to export things in a way that's compatible with both ES
// Modules and CommonJS, without build hacks, and so as not to break the
// existing API.
// https://github.com/rollup/rollup/issues/1961#issuecomment-423037881
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var getAll = TWEEN.getAll.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var removeAll = TWEEN.removeAll.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var add = TWEEN.add.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var remove = TWEEN.remove.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var update = TWEEN.update.bind(TWEEN);
var exports$1 = {
Easing: Easing,
Group: Group,
Interpolation: Interpolation,
now: now,
setNow: setNow,
Sequence: Sequence,
nextId: nextId,
Tween: Tween,
VERSION: VERSION,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
getAll: getAll,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
removeAll: removeAll,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
add: add,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
remove: remove,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
update: update,
};
exports.Easing = Easing;
exports.Group = Group;
exports.Interpolation = Interpolation;
exports.Sequence = Sequence;
exports.Tween = Tween;
exports.VERSION = VERSION;
exports.add = add;
exports.default = exports$1;
exports.getAll = getAll;
exports.nextId = nextId;
exports.now = now;
exports.remove = remove;
exports.removeAll = removeAll;
exports.setNow = setNow;
exports.update = update;
================================================
FILE: dist/tween.d.ts
================================================
type EasingFunction = (amount: number) => number;
type EasingFunctionGroup = {
In: EasingFunction;
Out: EasingFunction;
InOut: EasingFunction;
};
/**
* The Ease class provides a collection of easing functions for use with tween.js.
*/
declare const Easing: Readonly<{
Linear: Readonly;
Quadratic: Readonly;
Cubic: Readonly;
Quartic: Readonly;
Quintic: Readonly;
Sinusoidal: Readonly;
Exponential: Readonly;
Circular: Readonly;
Elastic: Readonly;
Back: Readonly;
Bounce: Readonly;
generatePow(power?: number): EasingFunctionGroup;
}>;
/**
*
*/
type InterpolationFunction = (v: number[], k: number) => number;
/**
*
*/
declare const Interpolation: {
Linear: (v: number[], k: number) => number;
Bezier: (v: number[], k: number) => number;
CatmullRom: (v: number[], k: number) => number;
Utils: {
Linear: (p0: number, p1: number, t: number) => number;
Bernstein: (n: number, i: number) => number;
Factorial: (n: number) => number;
CatmullRom: (p0: number, p1: number, p2: number, p3: number, t: number) => number;
};
};
/**
* Tween.js - Licensed under the MIT license
* https://github.com/tweenjs/tween.js
* ----------------------------------------------
*
* See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
* Thank you all, you're awesome!
*/
declare class Tween {
static autoStartOnUpdate: boolean;
private _isPaused;
private _pauseStart;
private _valuesStart;
private _valuesEnd;
private _valuesStartRepeat;
private _duration;
private _isDynamic;
private _initialRepeat;
private _repeat;
private _repeatDelayTime?;
private _yoyo;
private _isPlaying;
private _reversed;
private _delayTime;
private _startTime;
private _easingFunction;
private _interpolationFunction;
private _chainedTweens;
private _onStartCallback?;
private _onStartCallbackFired;
private _onEveryStartCallback?;
private _onEveryStartCallbackFired;
private _onUpdateCallback?;
private _onRepeatCallback?;
private _onCompleteCallback?;
private _onStopCallback?;
private _id;
private _isChainStopped;
private _propertiesAreSetUp;
private _object;
private _group?;
/**
* @param object - The object whose properties this Tween will animate.
* @param group - The object whose properties this Tween will animate.
*/
constructor(object: T, group?: Group);
/**
* @deprecated The group parameter is now deprecated, instead use `new
* Tween(object)` then `group.add(tween)` to add a tween to a group. Use
* `new Tween(object, true)` to restore the old behavior for now, but this
* will be removed in the future.
*/
constructor(object: T, group: true);
getId(): number;
getCompleteCallback(): ((object: T) => void) | undefined;
isPlaying(): boolean;
isPaused(): boolean;
getDuration(): number;
to(target: UnknownProps, duration?: number): this;
duration(duration?: number): this;
dynamic(dynamic?: boolean): this;
start(time?: number, overrideStartingValues?: boolean): this;
startFromCurrentValues(time?: number): this;
private _setupProperties;
stop(): this;
end(): this;
pause(time?: number): this;
resume(time?: number): this;
stopChainedTweens(): this;
/**
* Removes the tween from the current group it is in, if any, then adds the
* tween to the specified `group`.
*/
group(group: Group): this;
/**
* @deprecated The argless call signature has been removed. Use
* `tween.group(group)` or `group.add(tween)`, instead.
*/
group(): this;
/**
* Removes the tween from whichever group it is in.
*/
remove(): this;
delay(amount?: number): this;
repeat(times?: number): this;
repeatDelay(amount?: number): this;
yoyo(yoyo?: boolean): this;
easing(easingFunction?: EasingFunction): this;
interpolation(interpolationFunction?: InterpolationFunction): this;
chain(...tweens: Array>): this;
onStart(callback?: (object: T) => void): this;
onEveryStart(callback?: (object: T) => void): this;
onUpdate(callback?: (object: T, elapsed: number) => void): this;
onRepeat(callback?: (object: T) => void): this;
onComplete(callback?: (object: T) => void): this;
onStop(callback?: (object: T) => void): this;
private _goToEnd;
/**
* @returns true if the tween is still playing after the update, false
* otherwise (calling update on a paused tween still returns true because
* it is still playing, just paused).
*
* @param autoStart - When true, calling update will implicitly call start()
* as well. Note, if you stop() or end() the tween, but are still calling
* update(), it will start again!
*/
update(time?: number, autoStart?: boolean): boolean;
private _updateProperties;
private _handleRelativeValue;
private _swapEndStartRepeatValues;
}
type UnknownProps = Record;
/**
* Controlling groups of tweens
*
* Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components.
* In these cases, you may want to create your own smaller groups of tween
*/
declare class Group {
private _tweens;
private _tweensAddedDuringUpdate;
constructor(...tweens: Tween[]);
getAll(): Array;
removeAll(): void;
add(...tweens: Tween[]): void;
remove(...tweens: Tween[]): void;
/** Return true if all tweens in the group are not paused or playing. */
allStopped(): boolean;
update(time?: number): void;
/**
* @deprecated The `preserve` parameter is now defaulted to `true` and will
* be removed in a future major release, at which point all tweens of a
* group will always be preserved when calling update. To migrate, always
* use `group.add(tween)` or `group.remove(tween)` to manually add or remove
* tweens, and do not rely on tweens being automatically added or removed.
*/
update(time?: number, preserve?: boolean): void;
onComplete(callback: (object: Tween[]) => void): void;
}
declare const now: () => number;
declare function setNow(nowFunction: Function): void;
/**
* Utils
*/
declare class Sequence {
private static _nextId;
static nextId(): number;
}
declare const VERSION = "25.0.0";
declare const nextId: typeof Sequence.nextId;
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
declare const getAll: () => Tween[];
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
declare const removeAll: () => void;
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
declare const add: (...tweens: Tween[]) => void;
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
declare const remove: (...tweens: Tween[]) => void;
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
declare const update: {
(time?: number | undefined): void;
(time?: number | undefined, preserve?: boolean | undefined): void;
};
declare const exports: {
Easing: Readonly<{
Linear: Readonly;
Quadratic: Readonly;
Cubic: Readonly;
Quartic: Readonly;
Quintic: Readonly;
Sinusoidal: Readonly;
Exponential: Readonly;
Circular: Readonly;
Elastic: Readonly;
Back: Readonly;
Bounce: Readonly;
generatePow(power?: number): EasingFunctionGroup;
}>;
Group: typeof Group;
Interpolation: {
Linear: (v: number[], k: number) => number;
Bezier: (v: number[], k: number) => number;
CatmullRom: (v: number[], k: number) => number;
Utils: {
Linear: (p0: number, p1: number, t: number) => number;
Bernstein: (n: number, i: number) => number;
Factorial: (n: number) => number;
CatmullRom: (p0: number, p1: number, p2: number, p3: number, t: number) => number;
};
};
now: () => number;
setNow: typeof setNow;
Sequence: typeof Sequence;
nextId: typeof Sequence.nextId;
Tween: typeof Tween;
VERSION: string;
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
getAll: () => Tween[];
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
removeAll: () => void;
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
add: (...tweens: Tween[]) => void;
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
remove: (...tweens: Tween[]) => void;
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
update: {
(time?: number | undefined): void;
(time?: number | undefined, preserve?: boolean | undefined): void;
};
};
export { Easing, Group, Interpolation, Sequence, Tween, VERSION, add, exports as default, getAll, nextId, now, remove, removeAll, setNow, update };
================================================
FILE: dist/tween.esm.js
================================================
/**
* The Ease class provides a collection of easing functions for use with tween.js.
*/
var Easing = Object.freeze({
Linear: Object.freeze({
None: function (amount) {
return amount;
},
In: function (amount) {
return amount;
},
Out: function (amount) {
return amount;
},
InOut: function (amount) {
return amount;
},
}),
Quadratic: Object.freeze({
In: function (amount) {
return amount * amount;
},
Out: function (amount) {
return amount * (2 - amount);
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount;
}
return -0.5 * (--amount * (amount - 2) - 1);
},
}),
Cubic: Object.freeze({
In: function (amount) {
return amount * amount * amount;
},
Out: function (amount) {
return --amount * amount * amount + 1;
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount * amount;
}
return 0.5 * ((amount -= 2) * amount * amount + 2);
},
}),
Quartic: Object.freeze({
In: function (amount) {
return amount * amount * amount * amount;
},
Out: function (amount) {
return 1 - --amount * amount * amount * amount;
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount * amount * amount;
}
return -0.5 * ((amount -= 2) * amount * amount * amount - 2);
},
}),
Quintic: Object.freeze({
In: function (amount) {
return amount * amount * amount * amount * amount;
},
Out: function (amount) {
return --amount * amount * amount * amount * amount + 1;
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount * amount * amount * amount;
}
return 0.5 * ((amount -= 2) * amount * amount * amount * amount + 2);
},
}),
Sinusoidal: Object.freeze({
In: function (amount) {
return 1 - Math.sin(((1.0 - amount) * Math.PI) / 2);
},
Out: function (amount) {
return Math.sin((amount * Math.PI) / 2);
},
InOut: function (amount) {
return 0.5 * (1 - Math.sin(Math.PI * (0.5 - amount)));
},
}),
Exponential: Object.freeze({
In: function (amount) {
return amount === 0 ? 0 : Math.pow(1024, amount - 1);
},
Out: function (amount) {
return amount === 1 ? 1 : 1 - Math.pow(2, -10 * amount);
},
InOut: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
if ((amount *= 2) < 1) {
return 0.5 * Math.pow(1024, amount - 1);
}
return 0.5 * (-Math.pow(2, -10 * (amount - 1)) + 2);
},
}),
Circular: Object.freeze({
In: function (amount) {
return 1 - Math.sqrt(1 - amount * amount);
},
Out: function (amount) {
return Math.sqrt(1 - --amount * amount);
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return -0.5 * (Math.sqrt(1 - amount * amount) - 1);
}
return 0.5 * (Math.sqrt(1 - (amount -= 2) * amount) + 1);
},
}),
Elastic: Object.freeze({
In: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
return -Math.pow(2, 10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI);
},
Out: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
return Math.pow(2, -10 * amount) * Math.sin((amount - 0.1) * 5 * Math.PI) + 1;
},
InOut: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
amount *= 2;
if (amount < 1) {
return -0.5 * Math.pow(2, 10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI);
}
return 0.5 * Math.pow(2, -10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI) + 1;
},
}),
Back: Object.freeze({
In: function (amount) {
var s = 1.70158;
return amount === 1 ? 1 : amount * amount * ((s + 1) * amount - s);
},
Out: function (amount) {
var s = 1.70158;
return amount === 0 ? 0 : --amount * amount * ((s + 1) * amount + s) + 1;
},
InOut: function (amount) {
var s = 1.70158 * 1.525;
if ((amount *= 2) < 1) {
return 0.5 * (amount * amount * ((s + 1) * amount - s));
}
return 0.5 * ((amount -= 2) * amount * ((s + 1) * amount + s) + 2);
},
}),
Bounce: Object.freeze({
In: function (amount) {
return 1 - Easing.Bounce.Out(1 - amount);
},
Out: function (amount) {
if (amount < 1 / 2.75) {
return 7.5625 * amount * amount;
}
else if (amount < 2 / 2.75) {
return 7.5625 * (amount -= 1.5 / 2.75) * amount + 0.75;
}
else if (amount < 2.5 / 2.75) {
return 7.5625 * (amount -= 2.25 / 2.75) * amount + 0.9375;
}
else {
return 7.5625 * (amount -= 2.625 / 2.75) * amount + 0.984375;
}
},
InOut: function (amount) {
if (amount < 0.5) {
return Easing.Bounce.In(amount * 2) * 0.5;
}
return Easing.Bounce.Out(amount * 2 - 1) * 0.5 + 0.5;
},
}),
generatePow: function (power) {
if (power === void 0) { power = 4; }
power = power < Number.EPSILON ? Number.EPSILON : power;
power = power > 10000 ? 10000 : power;
return {
In: function (amount) {
return Math.pow(amount, power);
},
Out: function (amount) {
return 1 - Math.pow((1 - amount), power);
},
InOut: function (amount) {
if (amount < 0.5) {
return Math.pow((amount * 2), power) / 2;
}
return (1 - Math.pow((2 - amount * 2), power)) / 2 + 0.5;
},
};
},
});
var _nowFunc = function () { return performance.now(); };
var now = function () {
return _nowFunc();
};
function setNow(nowFunction) {
_nowFunc = nowFunction;
}
/**
* Controlling groups of tweens
*
* Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components.
* In these cases, you may want to create your own smaller groups of tween
*/
var Group = /** @class */ (function () {
function Group() {
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
this._tweens = {};
this._tweensAddedDuringUpdate = {};
this.add.apply(this, tweens);
}
Group.prototype.getAll = function () {
var _this = this;
return Object.keys(this._tweens).map(function (tweenId) { return _this._tweens[tweenId]; });
};
Group.prototype.removeAll = function () {
this._tweens = {};
};
Group.prototype.add = function () {
var _a;
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
for (var _b = 0, tweens_1 = tweens; _b < tweens_1.length; _b++) {
var tween = tweens_1[_b];
// Remove from any other group first, a tween can only be in one group at a time.
// @ts-expect-error library internal access
(_a = tween._group) === null || _a === void 0 ? void 0 : _a.remove(tween);
// @ts-expect-error library internal access
tween._group = this;
this._tweens[tween.getId()] = tween;
this._tweensAddedDuringUpdate[tween.getId()] = tween;
}
};
Group.prototype.remove = function () {
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
for (var _a = 0, tweens_2 = tweens; _a < tweens_2.length; _a++) {
var tween = tweens_2[_a];
// @ts-expect-error library internal access
tween._group = undefined;
delete this._tweens[tween.getId()];
delete this._tweensAddedDuringUpdate[tween.getId()];
}
};
/** Return true if all tweens in the group are not paused or playing. */
Group.prototype.allStopped = function () {
return this.getAll().every(function (tween) { return !tween.isPlaying(); });
};
Group.prototype.update = function (time, preserve) {
if (time === void 0) { time = now(); }
if (preserve === void 0) { preserve = true; }
var tweenIds = Object.keys(this._tweens);
if (tweenIds.length === 0)
return;
// Tweens are updated in "batches". If you add a new tween during an
// update, then the new tween will be updated in the next batch.
// If you remove a tween during an update, it may or may not be updated.
// However, if the removed tween was added during the current batch,
// then it will not be updated.
while (tweenIds.length > 0) {
this._tweensAddedDuringUpdate = {};
for (var i = 0; i < tweenIds.length; i++) {
var tween = this._tweens[tweenIds[i]];
var autoStart = !preserve;
if (tween && tween.update(time, autoStart) === false && !preserve)
this.remove(tween);
}
tweenIds = Object.keys(this._tweensAddedDuringUpdate);
}
};
Group.prototype.onComplete = function (callback) {
var group = this.getAll();
group.forEach(function (tween) {
var prevCallback = tween.getCompleteCallback();
tween.onComplete(function () {
prevCallback === null || prevCallback === void 0 ? void 0 : prevCallback(tween);
// After the onComplete callback completes, _isPlaying is updated to false, so if the total number of completed tweens is -1, then they are all complete.
var completedGroup = group.filter(function (tween) { return !tween.isPlaying(); });
if (completedGroup.length === group.length - 1)
callback(group);
});
});
};
return Group;
}());
/**
*
*/
var Interpolation = {
Linear: function (v, k) {
var m = v.length - 1;
var f = m * k;
var i = Math.floor(f);
var fn = Interpolation.Utils.Linear;
if (k < 0) {
return fn(v[0], v[1], f);
}
if (k > 1) {
return fn(v[m], v[m - 1], m - f);
}
return fn(v[i], v[i + 1 > m ? m : i + 1], f - i);
},
Bezier: function (v, k) {
var b = 0;
var n = v.length - 1;
var pw = Math.pow;
var bn = Interpolation.Utils.Bernstein;
for (var i = 0; i <= n; i++) {
b += pw(1 - k, n - i) * pw(k, i) * v[i] * bn(n, i);
}
return b;
},
CatmullRom: function (v, k) {
var m = v.length - 1;
var f = m * k;
var i = Math.floor(f);
var fn = Interpolation.Utils.CatmullRom;
if (v[0] === v[m]) {
if (k < 0) {
i = Math.floor((f = m * (1 + k)));
}
return fn(v[(i - 1 + m) % m], v[i], v[(i + 1) % m], v[(i + 2) % m], f - i);
}
else {
if (k < 0) {
return v[0] - (fn(v[0], v[0], v[1], v[1], -f) - v[0]);
}
if (k > 1) {
return v[m] - (fn(v[m], v[m], v[m - 1], v[m - 1], f - m) - v[m]);
}
return fn(v[i ? i - 1 : 0], v[i], v[m < i + 1 ? m : i + 1], v[m < i + 2 ? m : i + 2], f - i);
}
},
Utils: {
Linear: function (p0, p1, t) {
return (p1 - p0) * t + p0;
},
Bernstein: function (n, i) {
var fc = Interpolation.Utils.Factorial;
return fc(n) / fc(i) / fc(n - i);
},
Factorial: (function () {
var a = [1];
return function (n) {
var s = 1;
if (a[n]) {
return a[n];
}
for (var i = n; i > 1; i--) {
s *= i;
}
a[n] = s;
return s;
};
})(),
CatmullRom: function (p0, p1, p2, p3, t) {
var v0 = (p2 - p0) * 0.5;
var v1 = (p3 - p1) * 0.5;
var t2 = t * t;
var t3 = t * t2;
return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
},
},
};
/**
* Utils
*/
var Sequence = /** @class */ (function () {
function Sequence() {
}
Sequence.nextId = function () {
return Sequence._nextId++;
};
Sequence._nextId = 0;
return Sequence;
}());
var mainGroup = new Group();
/**
* Tween.js - Licensed under the MIT license
* https://github.com/tweenjs/tween.js
* ----------------------------------------------
*
* See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
* Thank you all, you're awesome!
*/
var Tween = /** @class */ (function () {
function Tween(object, group) {
this._isPaused = false;
this._pauseStart = 0;
this._valuesStart = {};
this._valuesEnd = {};
this._valuesStartRepeat = {};
this._duration = 1000;
this._isDynamic = false;
this._initialRepeat = 0;
this._repeat = 0;
this._yoyo = false;
this._isPlaying = false;
this._reversed = false;
this._delayTime = 0;
this._startTime = 0;
this._easingFunction = Easing.Linear.None;
this._interpolationFunction = Interpolation.Linear;
// eslint-disable-next-line
this._chainedTweens = [];
this._onStartCallbackFired = false;
this._onEveryStartCallbackFired = false;
this._id = Sequence.nextId();
this._isChainStopped = false;
this._propertiesAreSetUp = false;
this._goToEnd = false;
this._object = object;
if (typeof group === 'object') {
this._group = group;
group.add(this);
}
// Use "true" to restore old behavior (will be removed in future release).
else if (group === true) {
this._group = mainGroup;
mainGroup.add(this);
}
}
Tween.prototype.getId = function () {
return this._id;
};
Tween.prototype.getCompleteCallback = function () {
return this._onCompleteCallback;
};
Tween.prototype.isPlaying = function () {
return this._isPlaying;
};
Tween.prototype.isPaused = function () {
return this._isPaused;
};
Tween.prototype.getDuration = function () {
return this._duration;
};
Tween.prototype.to = function (target, duration) {
if (duration === void 0) { duration = 1000; }
if (this._isPlaying)
throw new Error('Can not call Tween.to() while Tween is already started or paused. Stop the Tween first.');
this._valuesEnd = target;
this._propertiesAreSetUp = false;
this._duration = duration < 0 ? 0 : duration;
return this;
};
Tween.prototype.duration = function (duration) {
if (duration === void 0) { duration = 1000; }
this._duration = duration < 0 ? 0 : duration;
return this;
};
Tween.prototype.dynamic = function (dynamic) {
if (dynamic === void 0) { dynamic = false; }
this._isDynamic = dynamic;
return this;
};
Tween.prototype.start = function (time, overrideStartingValues) {
if (time === void 0) { time = now(); }
if (overrideStartingValues === void 0) { overrideStartingValues = false; }
if (this._isPlaying) {
return this;
}
this._repeat = this._initialRepeat;
if (this._reversed) {
// If we were reversed (f.e. using the yoyo feature) then we need to
// flip the tween direction back to forward.
this._reversed = false;
for (var property in this._valuesStartRepeat) {
this._swapEndStartRepeatValues(property);
this._valuesStart[property] = this._valuesStartRepeat[property];
}
}
this._isPlaying = true;
this._isPaused = false;
this._onStartCallbackFired = false;
this._onEveryStartCallbackFired = false;
this._isChainStopped = false;
this._startTime = time;
this._startTime += this._delayTime;
if (!this._propertiesAreSetUp || overrideStartingValues) {
this._propertiesAreSetUp = true;
// If dynamic is not enabled, clone the end values instead of using the passed-in end values.
if (!this._isDynamic) {
var tmp = {};
for (var prop in this._valuesEnd)
tmp[prop] = this._valuesEnd[prop];
this._valuesEnd = tmp;
}
this._setupProperties(this._object, this._valuesStart, this._valuesEnd, this._valuesStartRepeat, overrideStartingValues);
}
return this;
};
Tween.prototype.startFromCurrentValues = function (time) {
return this.start(time, true);
};
Tween.prototype._setupProperties = function (_object, _valuesStart, _valuesEnd, _valuesStartRepeat, overrideStartingValues) {
for (var property in _valuesEnd) {
var startValue = _object[property];
var startValueIsArray = Array.isArray(startValue);
var propType = startValueIsArray ? 'array' : typeof startValue;
var isInterpolationList = !startValueIsArray && Array.isArray(_valuesEnd[property]);
// If `to()` specifies a property that doesn't exist in the source object,
// we should not set that property in the object
if (propType === 'undefined' || propType === 'function') {
continue;
}
// Check if an Array was provided as property value
if (isInterpolationList) {
var endValues = _valuesEnd[property];
if (endValues.length === 0) {
continue;
}
// Handle an array of relative values.
// Creates a local copy of the Array with the start value at the front
var temp = [startValue];
for (var i = 0, l = endValues.length; i < l; i += 1) {
var value = this._handleRelativeValue(startValue, endValues[i]);
if (isNaN(value)) {
isInterpolationList = false;
console.warn('Found invalid interpolation list. Skipping.');
break;
}
temp.push(value);
}
if (isInterpolationList) {
// if (_valuesStart[property] === undefined) { // handle end values only the first time. NOT NEEDED? setupProperties is now guarded by _propertiesAreSetUp.
_valuesEnd[property] = temp;
// }
}
}
// handle the deepness of the values
if ((propType === 'object' || startValueIsArray) && startValue && !isInterpolationList) {
_valuesStart[property] = startValueIsArray ? [] : {};
var nestedObject = startValue;
for (var prop in nestedObject) {
_valuesStart[property][prop] = nestedObject[prop];
}
// TODO? repeat nested values? And yoyo? And array values?
_valuesStartRepeat[property] = startValueIsArray ? [] : {};
var endValues = _valuesEnd[property];
// If dynamic is not enabled, clone the end values instead of using the passed-in end values.
if (!this._isDynamic) {
var tmp = {};
for (var prop in endValues)
tmp[prop] = endValues[prop];
_valuesEnd[property] = endValues = tmp;
}
this._setupProperties(nestedObject, _valuesStart[property], endValues, _valuesStartRepeat[property], overrideStartingValues);
}
else {
// Save the starting value, but only once unless override is requested.
if (typeof _valuesStart[property] === 'undefined' || overrideStartingValues) {
_valuesStart[property] = startValue;
}
if (!startValueIsArray) {
// eslint-disable-next-line
// @ts-ignore FIXME?
_valuesStart[property] *= 1.0; // Ensures we're using numbers, not strings
}
if (isInterpolationList) {
// eslint-disable-next-line
// @ts-ignore FIXME?
_valuesStartRepeat[property] = _valuesEnd[property].slice().reverse();
}
else {
_valuesStartRepeat[property] = _valuesStart[property] || 0;
}
}
}
};
Tween.prototype.stop = function () {
if (!this._isChainStopped) {
this._isChainStopped = true;
this.stopChainedTweens();
}
if (!this._isPlaying) {
return this;
}
this._isPlaying = false;
this._isPaused = false;
if (this._onStopCallback) {
this._onStopCallback(this._object);
}
return this;
};
Tween.prototype.end = function () {
this._goToEnd = true;
this.update(this._startTime + this._duration);
return this;
};
Tween.prototype.pause = function (time) {
if (time === void 0) { time = now(); }
if (this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = true;
this._pauseStart = time;
return this;
};
Tween.prototype.resume = function (time) {
if (time === void 0) { time = now(); }
if (!this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = false;
this._startTime += time - this._pauseStart;
this._pauseStart = 0;
return this;
};
Tween.prototype.stopChainedTweens = function () {
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
this._chainedTweens[i].stop();
}
return this;
};
Tween.prototype.group = function (group) {
if (!group) {
console.warn('tween.group() without args has been removed, use group.add(tween) instead.');
return this;
}
group.add(this);
return this;
};
/**
* Removes the tween from whichever group it is in.
*/
Tween.prototype.remove = function () {
var _a;
(_a = this._group) === null || _a === void 0 ? void 0 : _a.remove(this);
return this;
};
Tween.prototype.delay = function (amount) {
if (amount === void 0) { amount = 0; }
this._delayTime = amount;
return this;
};
Tween.prototype.repeat = function (times) {
if (times === void 0) { times = 0; }
this._initialRepeat = times;
this._repeat = times;
return this;
};
Tween.prototype.repeatDelay = function (amount) {
this._repeatDelayTime = amount;
return this;
};
Tween.prototype.yoyo = function (yoyo) {
if (yoyo === void 0) { yoyo = false; }
this._yoyo = yoyo;
return this;
};
Tween.prototype.easing = function (easingFunction) {
if (easingFunction === void 0) { easingFunction = Easing.Linear.None; }
this._easingFunction = easingFunction;
return this;
};
Tween.prototype.interpolation = function (interpolationFunction) {
if (interpolationFunction === void 0) { interpolationFunction = Interpolation.Linear; }
this._interpolationFunction = interpolationFunction;
return this;
};
// eslint-disable-next-line
Tween.prototype.chain = function () {
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
this._chainedTweens = tweens;
return this;
};
Tween.prototype.onStart = function (callback) {
this._onStartCallback = callback;
return this;
};
Tween.prototype.onEveryStart = function (callback) {
this._onEveryStartCallback = callback;
return this;
};
Tween.prototype.onUpdate = function (callback) {
this._onUpdateCallback = callback;
return this;
};
Tween.prototype.onRepeat = function (callback) {
this._onRepeatCallback = callback;
return this;
};
Tween.prototype.onComplete = function (callback) {
this._onCompleteCallback = callback;
return this;
};
Tween.prototype.onStop = function (callback) {
this._onStopCallback = callback;
return this;
};
/**
* @returns true if the tween is still playing after the update, false
* otherwise (calling update on a paused tween still returns true because
* it is still playing, just paused).
*
* @param autoStart - When true, calling update will implicitly call start()
* as well. Note, if you stop() or end() the tween, but are still calling
* update(), it will start again!
*/
Tween.prototype.update = function (time, autoStart) {
var _this = this;
var _a;
if (time === void 0) { time = now(); }
if (autoStart === void 0) { autoStart = Tween.autoStartOnUpdate; }
if (this._isPaused)
return true;
var property;
if (!this._goToEnd && !this._isPlaying) {
if (autoStart)
this.start(time, true);
else
return false;
}
this._goToEnd = false;
if (time < this._startTime) {
return true;
}
if (this._onStartCallbackFired === false) {
if (this._onStartCallback) {
this._onStartCallback(this._object);
}
this._onStartCallbackFired = true;
}
if (this._onEveryStartCallbackFired === false) {
if (this._onEveryStartCallback) {
this._onEveryStartCallback(this._object);
}
this._onEveryStartCallbackFired = true;
}
var elapsedTime = time - this._startTime;
var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
var totalTime = this._duration + this._repeat * durationAndDelay;
var calculateElapsedPortion = function () {
if (_this._duration === 0)
return 1;
if (elapsedTime > totalTime) {
return 1;
}
var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
// TODO use %?
// const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
if (portion === 0 && elapsedTime === _this._duration) {
return 1;
}
return portion;
};
var elapsed = calculateElapsedPortion();
var value = this._easingFunction(elapsed);
// properties transformations
this._updateProperties(this._object, this._valuesStart, this._valuesEnd, value);
if (this._onUpdateCallback) {
this._onUpdateCallback(this._object, elapsed);
}
if (this._duration === 0 || elapsedTime >= this._duration) {
if (this._repeat > 0) {
var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
if (isFinite(this._repeat)) {
this._repeat -= completeCount;
}
// Reassign starting values, restart by making startTime = now
for (property in this._valuesStartRepeat) {
if (!this._yoyo && typeof this._valuesEnd[property] === 'string') {
this._valuesStartRepeat[property] =
// eslint-disable-next-line
// @ts-ignore FIXME?
this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property]);
}
if (this._yoyo) {
this._swapEndStartRepeatValues(property);
}
this._valuesStart[property] = this._valuesStartRepeat[property];
}
if (this._yoyo) {
this._reversed = !this._reversed;
}
this._startTime += durationAndDelay * completeCount;
if (this._onRepeatCallback) {
this._onRepeatCallback(this._object);
}
this._onEveryStartCallbackFired = false;
return true;
}
else {
if (this._onCompleteCallback) {
this._onCompleteCallback(this._object);
}
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
// Make the chained tweens start exactly at the time they should,
// even if the `update()` method was called way past the duration of the tween
this._chainedTweens[i].start(this._startTime + this._duration, false);
}
this._isPlaying = false;
return false;
}
}
return true;
};
Tween.prototype._updateProperties = function (_object, _valuesStart, _valuesEnd, value) {
for (var property in _valuesEnd) {
// Don't update properties that do not exist in the source object
if (_valuesStart[property] === undefined) {
continue;
}
var start = _valuesStart[property] || 0;
var end = _valuesEnd[property];
var startIsArray = Array.isArray(_object[property]);
var endIsArray = Array.isArray(end);
var isInterpolationList = !startIsArray && endIsArray;
if (isInterpolationList) {
_object[property] = this._interpolationFunction(end, value);
}
else if (typeof end === 'object' && end) {
// eslint-disable-next-line
// @ts-ignore FIXME?
this._updateProperties(_object[property], start, end, value);
}
else {
// Parses relative end values with start as base (e.g.: +10, -3)
end = this._handleRelativeValue(start, end);
// Protect against non numeric properties.
if (typeof end === 'number') {
// eslint-disable-next-line
// @ts-ignore FIXME?
_object[property] = start + (end - start) * value;
}
}
}
};
Tween.prototype._handleRelativeValue = function (start, end) {
if (typeof end !== 'string') {
return end;
}
if (end.charAt(0) === '+' || end.charAt(0) === '-') {
return start + parseFloat(end);
}
return parseFloat(end);
};
Tween.prototype._swapEndStartRepeatValues = function (property) {
var tmp = this._valuesStartRepeat[property];
var endValue = this._valuesEnd[property];
if (typeof endValue === 'string') {
this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(endValue);
}
else {
this._valuesStartRepeat[property] = this._valuesEnd[property];
}
this._valuesEnd[property] = tmp;
};
Tween.autoStartOnUpdate = false;
return Tween;
}());
var VERSION = '25.0.0';
/**
* Tween.js - Licensed under the MIT license
* https://github.com/tweenjs/tween.js
* ----------------------------------------------
*
* See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
* Thank you all, you're awesome!
*/
var nextId = Sequence.nextId;
/**
* Controlling groups of tweens
*
* Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components.
* In these cases, you may want to create your own smaller groups of tweens.
*/
var TWEEN = mainGroup;
// This is the best way to export things in a way that's compatible with both ES
// Modules and CommonJS, without build hacks, and so as not to break the
// existing API.
// https://github.com/rollup/rollup/issues/1961#issuecomment-423037881
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var getAll = TWEEN.getAll.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var removeAll = TWEEN.removeAll.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var add = TWEEN.add.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var remove = TWEEN.remove.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var update = TWEEN.update.bind(TWEEN);
var exports = {
Easing: Easing,
Group: Group,
Interpolation: Interpolation,
now: now,
setNow: setNow,
Sequence: Sequence,
nextId: nextId,
Tween: Tween,
VERSION: VERSION,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
getAll: getAll,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
removeAll: removeAll,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
add: add,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
remove: remove,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
update: update,
};
export { Easing, Group, Interpolation, Sequence, Tween, VERSION, add, exports as default, getAll, nextId, now, remove, removeAll, setNow, update };
================================================
FILE: dist/tween.umd.js
================================================
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TWEEN = {}));
})(this, (function (exports) { 'use strict';
/**
* The Ease class provides a collection of easing functions for use with tween.js.
*/
var Easing = Object.freeze({
Linear: Object.freeze({
None: function (amount) {
return amount;
},
In: function (amount) {
return amount;
},
Out: function (amount) {
return amount;
},
InOut: function (amount) {
return amount;
},
}),
Quadratic: Object.freeze({
In: function (amount) {
return amount * amount;
},
Out: function (amount) {
return amount * (2 - amount);
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount;
}
return -0.5 * (--amount * (amount - 2) - 1);
},
}),
Cubic: Object.freeze({
In: function (amount) {
return amount * amount * amount;
},
Out: function (amount) {
return --amount * amount * amount + 1;
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount * amount;
}
return 0.5 * ((amount -= 2) * amount * amount + 2);
},
}),
Quartic: Object.freeze({
In: function (amount) {
return amount * amount * amount * amount;
},
Out: function (amount) {
return 1 - --amount * amount * amount * amount;
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount * amount * amount;
}
return -0.5 * ((amount -= 2) * amount * amount * amount - 2);
},
}),
Quintic: Object.freeze({
In: function (amount) {
return amount * amount * amount * amount * amount;
},
Out: function (amount) {
return --amount * amount * amount * amount * amount + 1;
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return 0.5 * amount * amount * amount * amount * amount;
}
return 0.5 * ((amount -= 2) * amount * amount * amount * amount + 2);
},
}),
Sinusoidal: Object.freeze({
In: function (amount) {
return 1 - Math.sin(((1.0 - amount) * Math.PI) / 2);
},
Out: function (amount) {
return Math.sin((amount * Math.PI) / 2);
},
InOut: function (amount) {
return 0.5 * (1 - Math.sin(Math.PI * (0.5 - amount)));
},
}),
Exponential: Object.freeze({
In: function (amount) {
return amount === 0 ? 0 : Math.pow(1024, amount - 1);
},
Out: function (amount) {
return amount === 1 ? 1 : 1 - Math.pow(2, -10 * amount);
},
InOut: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
if ((amount *= 2) < 1) {
return 0.5 * Math.pow(1024, amount - 1);
}
return 0.5 * (-Math.pow(2, -10 * (amount - 1)) + 2);
},
}),
Circular: Object.freeze({
In: function (amount) {
return 1 - Math.sqrt(1 - amount * amount);
},
Out: function (amount) {
return Math.sqrt(1 - --amount * amount);
},
InOut: function (amount) {
if ((amount *= 2) < 1) {
return -0.5 * (Math.sqrt(1 - amount * amount) - 1);
}
return 0.5 * (Math.sqrt(1 - (amount -= 2) * amount) + 1);
},
}),
Elastic: Object.freeze({
In: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
return -Math.pow(2, 10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI);
},
Out: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
return Math.pow(2, -10 * amount) * Math.sin((amount - 0.1) * 5 * Math.PI) + 1;
},
InOut: function (amount) {
if (amount === 0) {
return 0;
}
if (amount === 1) {
return 1;
}
amount *= 2;
if (amount < 1) {
return -0.5 * Math.pow(2, 10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI);
}
return 0.5 * Math.pow(2, -10 * (amount - 1)) * Math.sin((amount - 1.1) * 5 * Math.PI) + 1;
},
}),
Back: Object.freeze({
In: function (amount) {
var s = 1.70158;
return amount === 1 ? 1 : amount * amount * ((s + 1) * amount - s);
},
Out: function (amount) {
var s = 1.70158;
return amount === 0 ? 0 : --amount * amount * ((s + 1) * amount + s) + 1;
},
InOut: function (amount) {
var s = 1.70158 * 1.525;
if ((amount *= 2) < 1) {
return 0.5 * (amount * amount * ((s + 1) * amount - s));
}
return 0.5 * ((amount -= 2) * amount * ((s + 1) * amount + s) + 2);
},
}),
Bounce: Object.freeze({
In: function (amount) {
return 1 - Easing.Bounce.Out(1 - amount);
},
Out: function (amount) {
if (amount < 1 / 2.75) {
return 7.5625 * amount * amount;
}
else if (amount < 2 / 2.75) {
return 7.5625 * (amount -= 1.5 / 2.75) * amount + 0.75;
}
else if (amount < 2.5 / 2.75) {
return 7.5625 * (amount -= 2.25 / 2.75) * amount + 0.9375;
}
else {
return 7.5625 * (amount -= 2.625 / 2.75) * amount + 0.984375;
}
},
InOut: function (amount) {
if (amount < 0.5) {
return Easing.Bounce.In(amount * 2) * 0.5;
}
return Easing.Bounce.Out(amount * 2 - 1) * 0.5 + 0.5;
},
}),
generatePow: function (power) {
if (power === void 0) { power = 4; }
power = power < Number.EPSILON ? Number.EPSILON : power;
power = power > 10000 ? 10000 : power;
return {
In: function (amount) {
return Math.pow(amount, power);
},
Out: function (amount) {
return 1 - Math.pow((1 - amount), power);
},
InOut: function (amount) {
if (amount < 0.5) {
return Math.pow((amount * 2), power) / 2;
}
return (1 - Math.pow((2 - amount * 2), power)) / 2 + 0.5;
},
};
},
});
var _nowFunc = function () { return performance.now(); };
var now = function () {
return _nowFunc();
};
function setNow(nowFunction) {
_nowFunc = nowFunction;
}
/**
* Controlling groups of tweens
*
* Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components.
* In these cases, you may want to create your own smaller groups of tween
*/
var Group = /** @class */ (function () {
function Group() {
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
this._tweens = {};
this._tweensAddedDuringUpdate = {};
this.add.apply(this, tweens);
}
Group.prototype.getAll = function () {
var _this = this;
return Object.keys(this._tweens).map(function (tweenId) { return _this._tweens[tweenId]; });
};
Group.prototype.removeAll = function () {
this._tweens = {};
};
Group.prototype.add = function () {
var _a;
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
for (var _b = 0, tweens_1 = tweens; _b < tweens_1.length; _b++) {
var tween = tweens_1[_b];
// Remove from any other group first, a tween can only be in one group at a time.
// @ts-expect-error library internal access
(_a = tween._group) === null || _a === void 0 ? void 0 : _a.remove(tween);
// @ts-expect-error library internal access
tween._group = this;
this._tweens[tween.getId()] = tween;
this._tweensAddedDuringUpdate[tween.getId()] = tween;
}
};
Group.prototype.remove = function () {
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
for (var _a = 0, tweens_2 = tweens; _a < tweens_2.length; _a++) {
var tween = tweens_2[_a];
// @ts-expect-error library internal access
tween._group = undefined;
delete this._tweens[tween.getId()];
delete this._tweensAddedDuringUpdate[tween.getId()];
}
};
/** Return true if all tweens in the group are not paused or playing. */
Group.prototype.allStopped = function () {
return this.getAll().every(function (tween) { return !tween.isPlaying(); });
};
Group.prototype.update = function (time, preserve) {
if (time === void 0) { time = now(); }
if (preserve === void 0) { preserve = true; }
var tweenIds = Object.keys(this._tweens);
if (tweenIds.length === 0)
return;
// Tweens are updated in "batches". If you add a new tween during an
// update, then the new tween will be updated in the next batch.
// If you remove a tween during an update, it may or may not be updated.
// However, if the removed tween was added during the current batch,
// then it will not be updated.
while (tweenIds.length > 0) {
this._tweensAddedDuringUpdate = {};
for (var i = 0; i < tweenIds.length; i++) {
var tween = this._tweens[tweenIds[i]];
var autoStart = !preserve;
if (tween && tween.update(time, autoStart) === false && !preserve)
this.remove(tween);
}
tweenIds = Object.keys(this._tweensAddedDuringUpdate);
}
};
Group.prototype.onComplete = function (callback) {
var group = this.getAll();
group.forEach(function (tween) {
var prevCallback = tween.getCompleteCallback();
tween.onComplete(function () {
prevCallback === null || prevCallback === void 0 ? void 0 : prevCallback(tween);
// After the onComplete callback completes, _isPlaying is updated to false, so if the total number of completed tweens is -1, then they are all complete.
var completedGroup = group.filter(function (tween) { return !tween.isPlaying(); });
if (completedGroup.length === group.length - 1)
callback(group);
});
});
};
return Group;
}());
/**
*
*/
var Interpolation = {
Linear: function (v, k) {
var m = v.length - 1;
var f = m * k;
var i = Math.floor(f);
var fn = Interpolation.Utils.Linear;
if (k < 0) {
return fn(v[0], v[1], f);
}
if (k > 1) {
return fn(v[m], v[m - 1], m - f);
}
return fn(v[i], v[i + 1 > m ? m : i + 1], f - i);
},
Bezier: function (v, k) {
var b = 0;
var n = v.length - 1;
var pw = Math.pow;
var bn = Interpolation.Utils.Bernstein;
for (var i = 0; i <= n; i++) {
b += pw(1 - k, n - i) * pw(k, i) * v[i] * bn(n, i);
}
return b;
},
CatmullRom: function (v, k) {
var m = v.length - 1;
var f = m * k;
var i = Math.floor(f);
var fn = Interpolation.Utils.CatmullRom;
if (v[0] === v[m]) {
if (k < 0) {
i = Math.floor((f = m * (1 + k)));
}
return fn(v[(i - 1 + m) % m], v[i], v[(i + 1) % m], v[(i + 2) % m], f - i);
}
else {
if (k < 0) {
return v[0] - (fn(v[0], v[0], v[1], v[1], -f) - v[0]);
}
if (k > 1) {
return v[m] - (fn(v[m], v[m], v[m - 1], v[m - 1], f - m) - v[m]);
}
return fn(v[i ? i - 1 : 0], v[i], v[m < i + 1 ? m : i + 1], v[m < i + 2 ? m : i + 2], f - i);
}
},
Utils: {
Linear: function (p0, p1, t) {
return (p1 - p0) * t + p0;
},
Bernstein: function (n, i) {
var fc = Interpolation.Utils.Factorial;
return fc(n) / fc(i) / fc(n - i);
},
Factorial: (function () {
var a = [1];
return function (n) {
var s = 1;
if (a[n]) {
return a[n];
}
for (var i = n; i > 1; i--) {
s *= i;
}
a[n] = s;
return s;
};
})(),
CatmullRom: function (p0, p1, p2, p3, t) {
var v0 = (p2 - p0) * 0.5;
var v1 = (p3 - p1) * 0.5;
var t2 = t * t;
var t3 = t * t2;
return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
},
},
};
/**
* Utils
*/
var Sequence = /** @class */ (function () {
function Sequence() {
}
Sequence.nextId = function () {
return Sequence._nextId++;
};
Sequence._nextId = 0;
return Sequence;
}());
var mainGroup = new Group();
/**
* Tween.js - Licensed under the MIT license
* https://github.com/tweenjs/tween.js
* ----------------------------------------------
*
* See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
* Thank you all, you're awesome!
*/
var Tween = /** @class */ (function () {
function Tween(object, group) {
this._isPaused = false;
this._pauseStart = 0;
this._valuesStart = {};
this._valuesEnd = {};
this._valuesStartRepeat = {};
this._duration = 1000;
this._isDynamic = false;
this._initialRepeat = 0;
this._repeat = 0;
this._yoyo = false;
this._isPlaying = false;
this._reversed = false;
this._delayTime = 0;
this._startTime = 0;
this._easingFunction = Easing.Linear.None;
this._interpolationFunction = Interpolation.Linear;
// eslint-disable-next-line
this._chainedTweens = [];
this._onStartCallbackFired = false;
this._onEveryStartCallbackFired = false;
this._id = Sequence.nextId();
this._isChainStopped = false;
this._propertiesAreSetUp = false;
this._goToEnd = false;
this._object = object;
if (typeof group === 'object') {
this._group = group;
group.add(this);
}
// Use "true" to restore old behavior (will be removed in future release).
else if (group === true) {
this._group = mainGroup;
mainGroup.add(this);
}
}
Tween.prototype.getId = function () {
return this._id;
};
Tween.prototype.getCompleteCallback = function () {
return this._onCompleteCallback;
};
Tween.prototype.isPlaying = function () {
return this._isPlaying;
};
Tween.prototype.isPaused = function () {
return this._isPaused;
};
Tween.prototype.getDuration = function () {
return this._duration;
};
Tween.prototype.to = function (target, duration) {
if (duration === void 0) { duration = 1000; }
if (this._isPlaying)
throw new Error('Can not call Tween.to() while Tween is already started or paused. Stop the Tween first.');
this._valuesEnd = target;
this._propertiesAreSetUp = false;
this._duration = duration < 0 ? 0 : duration;
return this;
};
Tween.prototype.duration = function (duration) {
if (duration === void 0) { duration = 1000; }
this._duration = duration < 0 ? 0 : duration;
return this;
};
Tween.prototype.dynamic = function (dynamic) {
if (dynamic === void 0) { dynamic = false; }
this._isDynamic = dynamic;
return this;
};
Tween.prototype.start = function (time, overrideStartingValues) {
if (time === void 0) { time = now(); }
if (overrideStartingValues === void 0) { overrideStartingValues = false; }
if (this._isPlaying) {
return this;
}
this._repeat = this._initialRepeat;
if (this._reversed) {
// If we were reversed (f.e. using the yoyo feature) then we need to
// flip the tween direction back to forward.
this._reversed = false;
for (var property in this._valuesStartRepeat) {
this._swapEndStartRepeatValues(property);
this._valuesStart[property] = this._valuesStartRepeat[property];
}
}
this._isPlaying = true;
this._isPaused = false;
this._onStartCallbackFired = false;
this._onEveryStartCallbackFired = false;
this._isChainStopped = false;
this._startTime = time;
this._startTime += this._delayTime;
if (!this._propertiesAreSetUp || overrideStartingValues) {
this._propertiesAreSetUp = true;
// If dynamic is not enabled, clone the end values instead of using the passed-in end values.
if (!this._isDynamic) {
var tmp = {};
for (var prop in this._valuesEnd)
tmp[prop] = this._valuesEnd[prop];
this._valuesEnd = tmp;
}
this._setupProperties(this._object, this._valuesStart, this._valuesEnd, this._valuesStartRepeat, overrideStartingValues);
}
return this;
};
Tween.prototype.startFromCurrentValues = function (time) {
return this.start(time, true);
};
Tween.prototype._setupProperties = function (_object, _valuesStart, _valuesEnd, _valuesStartRepeat, overrideStartingValues) {
for (var property in _valuesEnd) {
var startValue = _object[property];
var startValueIsArray = Array.isArray(startValue);
var propType = startValueIsArray ? 'array' : typeof startValue;
var isInterpolationList = !startValueIsArray && Array.isArray(_valuesEnd[property]);
// If `to()` specifies a property that doesn't exist in the source object,
// we should not set that property in the object
if (propType === 'undefined' || propType === 'function') {
continue;
}
// Check if an Array was provided as property value
if (isInterpolationList) {
var endValues = _valuesEnd[property];
if (endValues.length === 0) {
continue;
}
// Handle an array of relative values.
// Creates a local copy of the Array with the start value at the front
var temp = [startValue];
for (var i = 0, l = endValues.length; i < l; i += 1) {
var value = this._handleRelativeValue(startValue, endValues[i]);
if (isNaN(value)) {
isInterpolationList = false;
console.warn('Found invalid interpolation list. Skipping.');
break;
}
temp.push(value);
}
if (isInterpolationList) {
// if (_valuesStart[property] === undefined) { // handle end values only the first time. NOT NEEDED? setupProperties is now guarded by _propertiesAreSetUp.
_valuesEnd[property] = temp;
// }
}
}
// handle the deepness of the values
if ((propType === 'object' || startValueIsArray) && startValue && !isInterpolationList) {
_valuesStart[property] = startValueIsArray ? [] : {};
var nestedObject = startValue;
for (var prop in nestedObject) {
_valuesStart[property][prop] = nestedObject[prop];
}
// TODO? repeat nested values? And yoyo? And array values?
_valuesStartRepeat[property] = startValueIsArray ? [] : {};
var endValues = _valuesEnd[property];
// If dynamic is not enabled, clone the end values instead of using the passed-in end values.
if (!this._isDynamic) {
var tmp = {};
for (var prop in endValues)
tmp[prop] = endValues[prop];
_valuesEnd[property] = endValues = tmp;
}
this._setupProperties(nestedObject, _valuesStart[property], endValues, _valuesStartRepeat[property], overrideStartingValues);
}
else {
// Save the starting value, but only once unless override is requested.
if (typeof _valuesStart[property] === 'undefined' || overrideStartingValues) {
_valuesStart[property] = startValue;
}
if (!startValueIsArray) {
// eslint-disable-next-line
// @ts-ignore FIXME?
_valuesStart[property] *= 1.0; // Ensures we're using numbers, not strings
}
if (isInterpolationList) {
// eslint-disable-next-line
// @ts-ignore FIXME?
_valuesStartRepeat[property] = _valuesEnd[property].slice().reverse();
}
else {
_valuesStartRepeat[property] = _valuesStart[property] || 0;
}
}
}
};
Tween.prototype.stop = function () {
if (!this._isChainStopped) {
this._isChainStopped = true;
this.stopChainedTweens();
}
if (!this._isPlaying) {
return this;
}
this._isPlaying = false;
this._isPaused = false;
if (this._onStopCallback) {
this._onStopCallback(this._object);
}
return this;
};
Tween.prototype.end = function () {
this._goToEnd = true;
this.update(this._startTime + this._duration);
return this;
};
Tween.prototype.pause = function (time) {
if (time === void 0) { time = now(); }
if (this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = true;
this._pauseStart = time;
return this;
};
Tween.prototype.resume = function (time) {
if (time === void 0) { time = now(); }
if (!this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = false;
this._startTime += time - this._pauseStart;
this._pauseStart = 0;
return this;
};
Tween.prototype.stopChainedTweens = function () {
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
this._chainedTweens[i].stop();
}
return this;
};
Tween.prototype.group = function (group) {
if (!group) {
console.warn('tween.group() without args has been removed, use group.add(tween) instead.');
return this;
}
group.add(this);
return this;
};
/**
* Removes the tween from whichever group it is in.
*/
Tween.prototype.remove = function () {
var _a;
(_a = this._group) === null || _a === void 0 ? void 0 : _a.remove(this);
return this;
};
Tween.prototype.delay = function (amount) {
if (amount === void 0) { amount = 0; }
this._delayTime = amount;
return this;
};
Tween.prototype.repeat = function (times) {
if (times === void 0) { times = 0; }
this._initialRepeat = times;
this._repeat = times;
return this;
};
Tween.prototype.repeatDelay = function (amount) {
this._repeatDelayTime = amount;
return this;
};
Tween.prototype.yoyo = function (yoyo) {
if (yoyo === void 0) { yoyo = false; }
this._yoyo = yoyo;
return this;
};
Tween.prototype.easing = function (easingFunction) {
if (easingFunction === void 0) { easingFunction = Easing.Linear.None; }
this._easingFunction = easingFunction;
return this;
};
Tween.prototype.interpolation = function (interpolationFunction) {
if (interpolationFunction === void 0) { interpolationFunction = Interpolation.Linear; }
this._interpolationFunction = interpolationFunction;
return this;
};
// eslint-disable-next-line
Tween.prototype.chain = function () {
var tweens = [];
for (var _i = 0; _i < arguments.length; _i++) {
tweens[_i] = arguments[_i];
}
this._chainedTweens = tweens;
return this;
};
Tween.prototype.onStart = function (callback) {
this._onStartCallback = callback;
return this;
};
Tween.prototype.onEveryStart = function (callback) {
this._onEveryStartCallback = callback;
return this;
};
Tween.prototype.onUpdate = function (callback) {
this._onUpdateCallback = callback;
return this;
};
Tween.prototype.onRepeat = function (callback) {
this._onRepeatCallback = callback;
return this;
};
Tween.prototype.onComplete = function (callback) {
this._onCompleteCallback = callback;
return this;
};
Tween.prototype.onStop = function (callback) {
this._onStopCallback = callback;
return this;
};
/**
* @returns true if the tween is still playing after the update, false
* otherwise (calling update on a paused tween still returns true because
* it is still playing, just paused).
*
* @param autoStart - When true, calling update will implicitly call start()
* as well. Note, if you stop() or end() the tween, but are still calling
* update(), it will start again!
*/
Tween.prototype.update = function (time, autoStart) {
var _this = this;
var _a;
if (time === void 0) { time = now(); }
if (autoStart === void 0) { autoStart = Tween.autoStartOnUpdate; }
if (this._isPaused)
return true;
var property;
if (!this._goToEnd && !this._isPlaying) {
if (autoStart)
this.start(time, true);
else
return false;
}
this._goToEnd = false;
if (time < this._startTime) {
return true;
}
if (this._onStartCallbackFired === false) {
if (this._onStartCallback) {
this._onStartCallback(this._object);
}
this._onStartCallbackFired = true;
}
if (this._onEveryStartCallbackFired === false) {
if (this._onEveryStartCallback) {
this._onEveryStartCallback(this._object);
}
this._onEveryStartCallbackFired = true;
}
var elapsedTime = time - this._startTime;
var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
var totalTime = this._duration + this._repeat * durationAndDelay;
var calculateElapsedPortion = function () {
if (_this._duration === 0)
return 1;
if (elapsedTime > totalTime) {
return 1;
}
var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
// TODO use %?
// const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
if (portion === 0 && elapsedTime === _this._duration) {
return 1;
}
return portion;
};
var elapsed = calculateElapsedPortion();
var value = this._easingFunction(elapsed);
// properties transformations
this._updateProperties(this._object, this._valuesStart, this._valuesEnd, value);
if (this._onUpdateCallback) {
this._onUpdateCallback(this._object, elapsed);
}
if (this._duration === 0 || elapsedTime >= this._duration) {
if (this._repeat > 0) {
var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
if (isFinite(this._repeat)) {
this._repeat -= completeCount;
}
// Reassign starting values, restart by making startTime = now
for (property in this._valuesStartRepeat) {
if (!this._yoyo && typeof this._valuesEnd[property] === 'string') {
this._valuesStartRepeat[property] =
// eslint-disable-next-line
// @ts-ignore FIXME?
this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property]);
}
if (this._yoyo) {
this._swapEndStartRepeatValues(property);
}
this._valuesStart[property] = this._valuesStartRepeat[property];
}
if (this._yoyo) {
this._reversed = !this._reversed;
}
this._startTime += durationAndDelay * completeCount;
if (this._onRepeatCallback) {
this._onRepeatCallback(this._object);
}
this._onEveryStartCallbackFired = false;
return true;
}
else {
if (this._onCompleteCallback) {
this._onCompleteCallback(this._object);
}
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
// Make the chained tweens start exactly at the time they should,
// even if the `update()` method was called way past the duration of the tween
this._chainedTweens[i].start(this._startTime + this._duration, false);
}
this._isPlaying = false;
return false;
}
}
return true;
};
Tween.prototype._updateProperties = function (_object, _valuesStart, _valuesEnd, value) {
for (var property in _valuesEnd) {
// Don't update properties that do not exist in the source object
if (_valuesStart[property] === undefined) {
continue;
}
var start = _valuesStart[property] || 0;
var end = _valuesEnd[property];
var startIsArray = Array.isArray(_object[property]);
var endIsArray = Array.isArray(end);
var isInterpolationList = !startIsArray && endIsArray;
if (isInterpolationList) {
_object[property] = this._interpolationFunction(end, value);
}
else if (typeof end === 'object' && end) {
// eslint-disable-next-line
// @ts-ignore FIXME?
this._updateProperties(_object[property], start, end, value);
}
else {
// Parses relative end values with start as base (e.g.: +10, -3)
end = this._handleRelativeValue(start, end);
// Protect against non numeric properties.
if (typeof end === 'number') {
// eslint-disable-next-line
// @ts-ignore FIXME?
_object[property] = start + (end - start) * value;
}
}
}
};
Tween.prototype._handleRelativeValue = function (start, end) {
if (typeof end !== 'string') {
return end;
}
if (end.charAt(0) === '+' || end.charAt(0) === '-') {
return start + parseFloat(end);
}
return parseFloat(end);
};
Tween.prototype._swapEndStartRepeatValues = function (property) {
var tmp = this._valuesStartRepeat[property];
var endValue = this._valuesEnd[property];
if (typeof endValue === 'string') {
this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(endValue);
}
else {
this._valuesStartRepeat[property] = this._valuesEnd[property];
}
this._valuesEnd[property] = tmp;
};
Tween.autoStartOnUpdate = false;
return Tween;
}());
var VERSION = '25.0.0';
/**
* Tween.js - Licensed under the MIT license
* https://github.com/tweenjs/tween.js
* ----------------------------------------------
*
* See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
* Thank you all, you're awesome!
*/
var nextId = Sequence.nextId;
/**
* Controlling groups of tweens
*
* Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components.
* In these cases, you may want to create your own smaller groups of tweens.
*/
var TWEEN = mainGroup;
// This is the best way to export things in a way that's compatible with both ES
// Modules and CommonJS, without build hacks, and so as not to break the
// existing API.
// https://github.com/rollup/rollup/issues/1961#issuecomment-423037881
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var getAll = TWEEN.getAll.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var removeAll = TWEEN.removeAll.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var add = TWEEN.add.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var remove = TWEEN.remove.bind(TWEEN);
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
var update = TWEEN.update.bind(TWEEN);
var exports$1 = {
Easing: Easing,
Group: Group,
Interpolation: Interpolation,
now: now,
setNow: setNow,
Sequence: Sequence,
nextId: nextId,
Tween: Tween,
VERSION: VERSION,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
getAll: getAll,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
removeAll: removeAll,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
add: add,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
remove: remove,
/**
* @deprecated The global TWEEN Group will be removed in a following major
* release. To migrate, create a `new Group()` instead of using `TWEEN` as a
* group.
*
* Old code:
*
* ```js
* import * as TWEEN from '@tweenjs/tween.js'
*
* //...
*
* const tween = new TWEEN.Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* TWEEN.update(time)
* requestAnimationFrame(loop)
* })
* ```
*
* New code:
*
* ```js
* import {Tween, Group} from '@tweenjs/tween.js'
*
* //...
*
* const tween = new Tween(obj)
* const tween2 = new TWEEN.Tween(obj2)
*
* //...
*
* const group = new Group()
* group.add(tween)
* group.add(tween2)
*
* //...
*
* requestAnimationFrame(function loop(time) {
* group.update(time)
* requestAnimationFrame(loop)
* })
* ```
*/
update: update,
};
exports.Easing = Easing;
exports.Group = Group;
exports.Interpolation = Interpolation;
exports.Sequence = Sequence;
exports.Tween = Tween;
exports.VERSION = VERSION;
exports.add = add;
exports.default = exports$1;
exports.getAll = getAll;
exports.nextId = nextId;
exports.now = now;
exports.remove = remove;
exports.removeAll = removeAll;
exports.setNow = setNow;
exports.update = update;
Object.defineProperty(exports, '__esModule', { value: true });
}));
================================================
FILE: docs/contributor_guide.md
================================================
# tween.js contributor guide
More languages: [English](./contributor_guide.md), [简体中文](./contributor_guide_zh-CN.md)
This guide is for people who want to _contribute_ to the library or are curious to learn what's behind the scenes: how is it tested? what do we automate? how do we do releases? etc.
If you are looking for documentation on _how to use_ the library, the [user guide](./user_guide.md) is for you.
**NOTE: this document is a work in progress. More content will be added in stages. If you have questions you'd like to see answered, please add them [as comments on this issue](https://github.com/tweenjs/tween.js/issues/323). THANKS!**
In this guide:
- [tween.js contributor guide](#tweenjs-contributor-guide)
- [Developer requirements](#developer-requirements)
- [Testing](#testing)
- [Unit tests](#unit-tests)
- [Code style and lint tests](#code-style-and-lint-tests)
- [Other types of tests](#other-types-of-tests)
- [Continuous integration](#continuous-integration)
- [Release process](#release-process)
## Developer requirements
Although tween.js does _not_ need node.js to work, we use it for development. So you will need to [install node.js](https://nodejs.org/en/download/) before you can work on the library.
Node.js includes the `npm` tool that we use to run scripts such as the one for packaging, running tests, etc. Please make sure it is working in your system before you attempt to run any of the steps detailed below.
Once node.js is installed, clone the tween.js repository:
```bash
git clone https://github.com/tweenjs/tween.js.git
```
Change to the folder:
```bash
cd tween.js
```
And run the script to install development dependencies:
```bash
npm install
```
Or in three lines:
```bash
git clone https://github.com/tweenjs/tween.js.git
cd tween.js
npm install
```
Once `npm install` completes successfully, try having a go at running the tests:
```bash
npm test
```
If you get issues running any of the above, try to search for the text of the error using your search engine of choice. This is normally the fastest route, as many people might have encountered the same issue already.
## Testing
There's a suite of automated tests in the `test` directory.
These can quickly spot regressions on the code--useful when new features are added or when code is changed to fix a bug; we don't want to introduce new bugs! They also spot style issues, which helps us keep the library cohesive.
To run the tests, type:
```bash
npm test
```
You should run the tests after you change code in the library. If you change the behaviour the tests describe, the tests won't pass and you'll get an error pointing to the test(s) that failed. This might be either because...
- you overlooked something or there's an error in your code, or...
- the library or the tests themselves are wrong
The one that happens more frequently is the first one, but the second one has happened, with edge cases.
**Another thing you should do once the automated tests pass is to run the examples in the `examples` folder**. It is rare, but it might happen that your changes introduced cosmetic differences that the automated tests are not checking for, and the only way to notice this is by running the examples and have a human spot the difference in output. If you don't want to checkout two copies of the library, you can look at [the online examples](https://github.com/tweenjs/tween.js#examples).
### Unit tests
Tests are in the `src/tests.ts` file.
The tests are executed using [nodeunit](https://www.npmjs.com/package/nodeunit).
**TODO:** the tests should also work if opening `test/unit/nodeunit.html` in a browser, but they are broken right now. There is [an open issue](https://github.com/tweenjs/tween.js/issues/307) to make them work again.
### Code style and lint tests
We use [Prettier](https://prettier.io) and [ESLint](https://eslint.org) to ensure the code style is uniform.
To automatically format code and report any errors for pieces of code that aren't automatically formattable, run:
```bash
npm run test-lint
```
The Prettier rules are in `.prettierrc.js` and ESLint rules are in `.eslintrc.js`.
### Other types of tests
We would like to test for performance regressions i.e. if a change made things go slower, or simply, for performance, so we can compare the performance of the same code between different browsers.
There's an [open issue](https://github.com/tweenjs/discuss/issues/3) to track work on this, but we have not made progress on it yet. Help! :-)
## Continuous integration
We use GitHub Actions for continuous integration so that a build and tests will run for every pull request. The `.github/workflows/tests.yml` file tells GitHub what to run; in our case we run `npm install` followed by `npm test` in the OSes and versions of Node.js specified in that file.
**TODO:** Add macOS and Windows to OSes that the tests run on. Help! :)
## Release process
Currently the release process is manual.
When ready to make a release on the `master` branch, ensure there are no un-committed changes, then run `npm run release:patch` to release a new version with its patch number bumped, `npm run release:minor` to release a new version with its minor number bumped, or `npm run release:major` to release a new version with its major number bumped.
Tip: see [semver.org](https://semver.org) and the [npm-semver](https://docs.npmjs.com/misc/semver) docs to learn about semantic versioning.
================================================
FILE: docs/contributor_guide_zh-CN.md
================================================
# tween.js 贡献者指南
更多语言: [English](./contributor_guide.md), [简体中文](./contributor_guide_zh-CN.md)
本指南适用于想要向库贡献的人，或者想了解背后的内容：如何进行测试？我们自动化什么？我们如何做发布？等等。
如果你正在查找*如何使用*库的文档，[用户指南](./user_guide_zh-CN.md) 是适合你的。
**NOTE: 这个文档是一个正在进行的工作。更多内容将分阶段添加。如果你有问题，你想看到回答，请在 [as comments on this issue](https://github.com/tweenjs/tween.js/issues/323) 中提出，谢谢！**
目录:
- [tween.js 贡献者指南](#tween.js-贡献者指南)
- [开发者要求](#开发者要求)
- [测试](#测试)
- [单元测试](#单元测试)
- [代码风格和 lint 测试](#代码风格和-lint-测试)
- [其他类型的测试](#其他类型的测试)
- [持续集成](#持续集成)
- [发布流程](#发布流程)
## 开发者要求
虽然 tween.js *不*需要依赖 node.js 运行，但我们使用 node.js 来进行开发。所以我们需要先 [安装 node.js](https://nodejs.org/en/download/)，然后才能在库中工作。
Node.js 包括我们用来运行脚本的 npm 工具，例如打包、运行测试等的脚本。在你尝试运行下面详述的任何步骤之前，请确保它在你的系统中正常工作。
安装 node.js 后，克隆 tween.js 存储库：
```bash
git clone https://github.com/tweenjs/tween.js.git
```
进入该文件夹：
```bash
cd tween.js
```
并运行脚本来安装开发依赖项：
```bash
npm install
```
或者分三行：
```bash
git clone https://github.com/tweenjs/tween.js.git
cd tween.js
npm install
```
`npm install` 成功完成后，尝试运行测试：
```bash
npm test
```
如果你在运行上述任何步骤时遇到问题，请尝试使用你选择的搜索引擎搜索错误文本。这通常是最快的解决方法，因为很多人可能已经遇到过同样的问题。
## 测试
`test` 目录中有一套自动化测试。
这些可以快速发现代码上的回归，在添加新功能或更改代码以修复 Bug 时很有用；我们不想引入新的 Bugs！自动化测试还会发现风格问题，这有助于我们保持库的凝聚力。
要运行测试，请输入：
```bash
npm test
```
你应该在更改库中的代码后运行测试。如果你更改测试描述的行为，测试将不会通过，你将得到指向失败测试的错误。 这可能是因为...
- 你忽略了一些东西，或者你的代码有错误，或者...
- 库或测试本身是错误的
以上两种情况，发生频率更高的是第一个，但第如果二个发生了，可能是边缘情况。
**自动化测试通过之后，你应该做的另一件事是运行 `examples` 文件夹中的示例**。有种情况很少见，但可能会发生：你的更改引入了自动测试未检查的外观差异，注意到这一点的唯一方法是运行示例并让人工发现输出中的差异。如果你不想签出库的两个副本，可以查看[在线例子](https://github.com/tweenjs/tween.js#examples)。
### 单元测试
测试用例在 `src/tests.ts` 文件中。
测试使用 [nodeunit](https://www.npmjs.com/package/nodeunit) 执行。
**TODO:** 如果在浏览器中打开 `test/unit/nodeunit.html`，测试也应该能够正常运行，但是现在已经被损坏。有一个 [打开的问题](https://github.com/tweenjs/tween.js/issues/307) 可以使他们再次工作。
### 代码风格和 lint 测试
我们使用 [JSCS](http://jscs.info/) 和 [JSHint](http://jshint.com/) 来保证代码风格的统一。
要自动格式化代码并报告不可被格式化的代码片段的任何错误，请运行：
```base
npm run test-lint
```
Prettier 规则在 `.prettierrc.js` 中，ESLint 规则在 `.eslintrc.js` 中。
### 其他类型的测试
我们想回归测试性能，即如果更改使运行变得更慢，或者简单地测试性能，那么我们可以比较不同浏览器之间相同代码的性能。
有一个[open issue](https://github.com/tweenjs/discuss/issues/3)来跟踪这方面的工作，但我们还没有取得进展。请求帮助！ :-)
## 持续集成
我们使用 GitHub Actions 进行持续集成，以便为每个 pull request 运行构建和测试。 `.github/workflows/tests.yml` 文件告诉 GitHub 要运行什么；在我们的例子中，我们在该文件中指定的操作系统和 Node.js 版本中运行 `npm install`，然后运行 `npm test`。
**TODO**：将 macOS 和 Windows 添加到运行测试的操作系统。 请求帮助！ :)
## 发布流程
目前发布过程是手动的。
当准备好在 `master` 分支上发布时，确保没有未提交的更改，然后运行 `npm run release:patch` 发布一个新版本，其补丁号已被修改，`npm run release:minor` ，修改 minor 版本号并发布一个新版本，或者 `npm run release:major` 修改 major 版本号并发布一个新版本。
Tip: 请参阅 [semver.org](https://semver.org/) 和 [npm-semver](https://docs.npmjs.com/misc/semver) 文档以了解语义版本控制。
================================================
FILE: docs/user_guide.md
================================================
# tween.js user guide
More languages: [English](./user_guide.md), [简体中文](./user_guide_zh-CN.md)
_**NOTE** This is a work in progress. If you find that something is unclear or missing details, please [file an issue](https://github.com/tweenjs/tween.js/issues/new) and help make this guide better. Or feel free to submit clarifications or improvements of your own if you feel you can help too!_
## What is a tween? How do they work? Why do you want to use them?
A tween (from [_in-between_](http://en.wikipedia.org/wiki/Inbetweening)) is a concept that allows you to change the values of the properties of an object in a smooth way. You just tell it which properties you want to change, which final values should they have when the tween finishes running, and how long should this take, and the tweening engine will take care of finding the intermediate values from the starting to the ending point.
For example, suppose you have a `position` object with `x` and `y` coordinates:
```javascript
const position = {x: 100, y: 0}
```
If you wanted to change the `x` value from `100` to `200`, you'd do this:
```javascript
import {Tween} from '@tweenjs/tween.js'
// Create a tween for position first
const tween = new Tween(position)
// Then tell the tween we want to animate the x property over 1000 milliseconds
tween.to({x: 200}, 1000)
```
Actually this won't do anything yet. The tween has been created but it's not active. You need to start it:
```javascript
// And set it to start
tween.start()
```
Finally in order to run as smoothly as possible you should call the `tween.update()` function in the same main loop you're using for animating. This generally looks like this:
```javascript
animate()
function animate() {
requestAnimationFrame(animate)
// [...]
tween.update()
// [...]
}
```
After 1 second (i.e. 1000 milliseconds) `position.x` will be `200`.
But unless you print the value of `x` to the console, you can't see its value changing. You might want to use the `onUpdate` callback:
```javascript
tween.onUpdate(function (object) {
console.log(object.x)
})
```
This function will be called each time the tween is updated; how often this happens depends on many factors--how fast (and how busy!) your computer or device is, for example.
So far we've only used tweens to print values to the console, but you could use it for things such as animating positions of three.js objects:
```javascript
const tween = new Tween(cube.position).to({x: 100, y: 100, z: 100}, 10000).start()
animate()
function animate() {
requestAnimationFrame(animate)
tween.update()
threeRenderer.render(scene, camera)
}
```
In this case, because the three.js renderer will look at the object's position before rendering, you don't need to use an explicit `onUpdate` callback.
You might have noticed something different here too: we're chaining the tween function calls! Each tween function returns the tween instance, so you can rewrite the following code:
```javascript
const tween = new Tween(position)
tween.to({x: 200}, 1000)
tween.start()
```
into this
```javascript
const tween = new Tween(position).to({x: 200}, 1000).start()
```
You'll see this a lot in the examples, so it's good to be familiar with it! Check [04-simplest](../examples/04_simplest.html) for a working example.
## Animating with tween.js
Tween.js doesn't run by itself. You need to tell it when to run, by explicitly calling the `update` method of each tween, or the `update` method of a `Group` that has multiple tweens (more on Groups below). The recommended method is to do this inside your main animation loop, which should be called with `requestAnimationFrame` for getting the best graphics performance:
We've seen this example before:
```javascript
animate()
function animate() {
requestAnimationFrame(animate)
// [...]
tween.update()
// [...]
}
```
If called without parameters, `update` will determine the current time in order to find out how long has it been since the last time it ran.
However you can also pass an explicit time parameter to `update`. Thus,
```javascript
tween.update(100)
```
means "update with time = 100 milliseconds". You can use this to make sure that all the time-dependent functions in your code are using the very same time value. For example, suppose you've got a player and want to run tweens in sync. Your `animate` code could look like this:
```javascript
let currentTime = player.currentTime
tween.update(currentTime)
```
We use explicit time values for the unit tests. You can have a look at [tests.ts](../src/tests.ts) to see how we call `tween.update()` with different values in order to simulate time passing.
## Controlling a tween
### `start` and `stop`
So far we've learnt about the `Tween.start` method, but there are more methods that control individual tweens. Probably the most important one is the `start` counterpart: `stop`. If you want to cancel a tween, just call this method over an individual tween:
```js
tween.stop()
```
Stopping a tween that was never started or that has already been stopped has no effect. No errors are thrown either.
The `start` method also accepts a `time` argument. If you use it, the tween won't start until that particular moment in time; otherwise it will start as soon as possible (i.e. on the next call to `tween.update()`).
The `start` method accepts a second boolean argument: when `true`, a tween that we previously used will start from the values in the target object, instead of starting from the beginning. Useful for stopping a tween, then starting another one that will continue from the current location.
### `startFromCurrentValues`
This is an alias for `tween.start(undefined, true)`, to make a previously-used
tween start from the last values of the target object, instead of from the
beginning.
### `update`
Individual tweens have an `update` method to so that they can be updated over time in an animation loop, and on each update they will apply updated values to their target object.
```js
const tween = new Tween(someObject).to(/*...*/).start()
function animate(time) {
tween.update(time)
requestAnimationFrame(animate)
}
```
### `pause`
While an tween is running (i.e. it has already been `start`ed and may have
already been `update`d numerous times) it can be paused. Even if `update()` is
called while the tween is paused, its time will not move forward. `isPlaying`
will still be true while a tween is `paused` and its `update()` method continues
to track time progression (you can continue to call `update()` while a tween is
paused).
```js
tween.start()
function animate() {
tween.update()
requestAnimationFrame(animate)
}
animate()
// at any time while the tween is running
tween.pause()
```
### `chain`
Things get more interesting when you sequence different tweens in order, i.e. setup one tween to start once a previous one has finished. We call this _chaining tweens_, and it's done with the `chain` method. Thus, to make `tweenB` start after `tweenA` finishes:
```javascript
tweenA.chain(tweenB)
```
Or, for an infinite chain, set `tweenA` to start once `tweenB` finishes:
```javascript
tweenA.chain(tweenB)
tweenB.chain(tweenA)
```
Check [Hello world](../examples/00_hello_world.html) to see an example of these infinite chains.
In other cases, you may want to chain multiple tweens to another tween in a way that they (the chained tweens) all start animating at the same time:
```javascript
tweenA.chain(tweenB, tweenC)
```
> **Warning** Calling `tweenA.chain(tweenB)` actually modifies tweenA so that tweenB is always started when tweenA finishes. The return value of `chain` is just tweenA, not a new tween.
### `repeat`
If you wanted a tween to repeat forever you could chain it to itself, but a better way is to use the `repeat` method. It accepts a parameter that describes how many repetitions you want after the first tween is completed:
```javascript
tween.repeat(10) // repeats 10 times after the first tween and stops
tween.repeat(Infinity) // repeats forever
```
The total number of tweens will be the repeat parameter plus one for the initial tween.
Check the [Repeat](../examples/08_repeat.html) example.
### `yoyo`
This function only has effect if used along with `repeat`. When active, the behaviour of the tween will be _like a yoyo_, i.e. it will bounce to and from the start and end values, instead of just repeating the same sequence from the beginning:
```js
tween.yoyo(false) // default value, animation will only go from start to end value
tween.yoyo(true) // tween will 'yoyo' between start and end values
```
### `delay`
More complex arrangements might require delaying a tween before it actually starts running. You can do that using the `delay` method:
```javascript
tween.delay(1000)
tween.start()
```
will start executing 1 second after the `start` method has been called.
### `repeatDelay`
Normally the `delay` time is applied between repetitions of a tween, but if a value is provided to the `repeatDelay` function then that value will determine the total time elapsed between repetitions of a tween.
Consider this example:
```javascript
tween.delay(1000)
tween.repeatDelay(500)
tween.start()
```
The first iteration of the tween will happen after one second, the second iteration will happen a half second after the first iteration ends, the third iteration will happen a half second after the second iteration ends, etc. If you want to delay the initial iteration but you don't want any delay between iterations, then make sure to call `tween.repeatDelay(0)`.
### `dynamic`
If `dynamic` is set to `true` (it defaults to `false`) objects passed to `tween.to()` can be modified on the outside of a tween while the tween is animating. This can be used to dynamically modify the outcome of a tween while it is running.
See the [Dynamic to](http://tweenjs.github.io/tween.js/examples/07_dynamic_to.html) example. In that example, in both scenes, the position of the rabbit is updated during the animation. The rabbit position happens to be the object passed into the fox's `tween.to()` method. As the rabbit position is updated, in the first scene with `.dynamic(false)` the fox moves towards the initial position of the rabbit and does not chase the rabbit, and in the second scene with `.dynamic(true)` the final destination of the fox is hence also updated which makes the fox chase the rabbit.
See the other `dynamic to` examples for more ideas.
> **Warning** When `dynamic` is set to `false`, Tween makes a copy of the object passed into `tween.to()` and will never modify it (hence updating the original object from the outside is not dynamic). When `dynamic` is `true`, Tween uses the original object as the source of values during animation (every update reads the values, hence they can be modified dynamically) but note that **in dynamic mode, Tween will modify any interpolation arrays of the object passed into `tween.to()` which may cause side-effects on any external code that may also rely on the same object**.
## Controlling groups of tweens
Sometimes you want to update multiple tweens at once, which can be useful when
grouping a set of tweens into a logical component in your application. You can
do this with a `Group`.
First add multiple tweens to a group:
```js
import {Group, Tween} from '@tweenjs/tween.js'
const tween1 = new Tween(obj1).to(...).start()
const tween2 = new Tween(obj2).to(...).start()
const group = new Group()
group.add(tween1)
group.add(tween2)
```
Then call `group.update()` in your animation loop instead of on individual
tweens:
```js
animate()
function animate() {
requestAnimationFrame(animate)
// [...]
group.update()
// [...]
}
```
Note that a tween can only belong to a single group. Adding a tween to a group
automatically removes it from any previous group.
### `group.getAll()`
Returns an array of all tweens added to a group.
### `group.add(tween)`
Add a tween to a group.
### `group.remove(tween)`
Remove a tween from a group.
### `group.removeAll()`
Remove all tween from a group.
### `group.update(time?)`
Update all tweens in a group, with an optional time value. If time value is not
supplied, it default to the current time.
## Changing the easing function (AKA make it bouncy)
Tween.js will perform the interpolation between values (i.e. the easing) in a linear manner, so the change will be directly proportional to the elapsed time. This is predictable but also quite uninteresting visually wise. Worry not--this behaviour can be easily changed using the `easing` method. For example:
```javascript
import {Tween, Easing} from '@tweenjs/tween.js'
// ...
tween.easing(Easing.Quadratic.In)
```
This will result in the tween slowly starting to change towards the final value, accelerating towards the middle, and then quickly reaching its final value. In contrast, `Easing.Quadratic.Out` would start changing quickly towards the value, but then slow down as it approaches the final value.
### Available `Easing` functions
There are a few existing easing functions provided with tween.js. They are grouped by the type of equation they represent: Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back and Bounce, and then by the easing type: In, Out and InOut.
Probably the names won't be saying anything to you unless you're familiar with these concepts already, so it is probably the time to check the [Graphs](../examples/03_graphs.html) example, which graphs all the curves in one page so you can compare how they look at a glance.
`Easing` also has a function called `generatePow()`. This function generates easing functions for different curves depending on arguments. You can check the relevance of the arguments to curves in the [example of pow easing](../examples/17_generate_pow.html) page.
_Credit where credit is due:_ these functions are derived from the original set of equations that Robert Penner graciously made available as free software a few years ago, but have been optimised to play nicely with JavaScript.
### Using a custom easing function
Not only can you use any of the existing functions, but you can also provide your own, as long as it follows a couple of conventions:
- it must accept one parameter:
- `k`: the easing progress, or how far along the duration of the tween we are. Allowed values are in the range [0, 1].
- it must return a value based on the input parameters.
The easing function is only called _once per tween_ on each update, no matter how many properties are to be changed. The result is then used with the initial value and the difference (the _deltas_) between this and the final values, as in this pseudocode:
```
easedElapsed = easing(k);
for each property:
newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;
```
For the performance-obsessed people out there: the deltas are calculated only when `start()` is called on a tween.
So let's suppose you wanted to use a custom easing function that eased the values but applied a Math.floor to the output, so only the integer part would be returned, resulting in a sort of step-ladder output:
```javascript
function tenStepEasing(k) {
return Math.floor(k * 10) / 10
}
```
And you could use it in a tween by simply calling its easing method, as we've seen before:
```javascript
tween.easing(tenStepEasing)
```
Check the [graphs for custom easing functions](../examples/12_graphs_custom_functions.html) example to see this in action (and also some _metaprogramming_ for generating step functions).
## Callbacks
Another powerful feature is to be able to run your own functions at specific times in each tween's life cycle. This is usually required when changing properties is not enough.
For example, suppose you're trying to animate some object whose properties can't be accessed directly but require you to call a setter instead. You can use an `update` callback to read the new updated values and then manually call the setters. All callbacks are passed the tweened object as the only parameter.
```javascript
const trickyObjTween = new Tween({
propertyA: trickyObj.getPropertyA(),
propertyB: trickyObj.getPropertyB(),
})
.to({propertyA: 100, propertyB: 200})
.onUpdate(function (object) {
object.setA(object.propertyA)
object.setB(object.propertyB)
})
```
Or imagine you want to play a sound when a tween is started. You can use a `start` callback:
```javascript
const tween = new Tween(obj).to({x: 100}).onStart(function () {
sound.play()
})
```
The scope for each callback is the tweened object--in this case, `obj`.
### onStart
Executed right before the tween starts animating, after any delay time specified by the `delay` method. This will be executed only once per tween, i.e. it will _not_ be run when the tween is repeated via `repeat()`.
It is great for synchronising to other events or triggering actions you want to happen when a tween starts.
The tweened object is passed in as the first parameter.
### onEveryStart
As per `onStart`, except that it _will_ be run on every repeat of the tween.
The tweened object is passed in as the first parameter.
### onStop
Executed when a tween is explicitly stopped via `stop()`, but not when it is completed normally, and before stopping any possible chained tween.
The tweened object is passed in as the first parameter.
### onUpdate
Executed each time the tween is updated, after the values have been actually updated.
The tweened object is passed in as the first parameter.
### onComplete
Executed when a tween is finished normally (i.e. not stopped).
The tweened object is passed in as the first parameter.
### onRepeat
Executed whenever a tween has just finished one repetition and will begin another.
The tweened object is passed in as the first parameter.
To clarify when `onStart`, `onEveryStart` and `onRepeat` are called, consider:
```javascript
const obj = {x: 0}
const t = new Tween(obj)
.to({x: 5}, 5)
.repeat(Infinity)
.onStart(() => {
console.log('onStart')
})
.onRepeat(() => {
console.log('onRepeat')
})
.onEveryStart(() => {
console.log('onEveryStart')
})
.start(0)
for (let ticks = 0; ticks < 22; ticks += 1) {
console.log('Tick', ticks)
t.update(ticks)
console.log(obj)
console.log()
}
```
The output would look like this, on the left as above, and on the right with `.delay(5)`:
```
Tick 0 Tick 0
onStart { x: 0 }
onEveryStart
{ x: 0 }
Tick 1 Tick 1
{ x: 1 } { x: 0 }
Tick 2 Tick 2
{ x: 2 } { x: 0 }
Tick 3 Tick 3
{ x: 3 } { x: 0 }
Tick 4 Tick 4
{ x: 4 } { x: 0 }
Tick 5 Tick 5
onRepeat onStart
{ x: 5 } onEveryStart
{ x: 0 }
Tick 6 Tick 6
onEveryStart { x: 1 }
{ x: 1 }
Tick 7 Tick 7
{ x: 2 } { x: 2 }
Tick 8 Tick 8
{ x: 3 } { x: 3 }
Tick 9 Tick 9
{ x: 4 } { x: 4 }
Tick 10 Tick 10
onRepeat onRepeat
{ x: 5 } { x: 5 }
Tick 11 Tick 11
onEveryStart { x: 5 }
{ x: 1 }
Tick 12 Tick 12
{ x: 2 } { x: 5 }
Tick 13 Tick 13
{ x: 3 } { x: 5 }
Tick 14 Tick 14
{ x: 4 } { x: 5 }
Tick 15 Tick 15
onRepeat onEveryStart
{ x: 5 } { x: 0 }
Tick 16 Tick 16
onEveryStart { x: 1 }
{ x: 1 }
Tick 17 Tick 17
{ x: 2 } { x: 2 }
Tick 18 Tick 18
{ x: 3 } { x: 3 }
Tick 19 Tick 19
{ x: 4 } { x: 4 }
Tick 20 Tick 20
onRepeat onRepeat
{ x: 5 } { x: 5 }
Tick 21 Tick 21
onEveryStart { x: 5 }
{ x: 1 }
```
## Tween State
### `isPlaying`
`tween.isPlaying` is `true` when a tween is started, even if it is paused.
When a tween is stopped, `isPlaying` and `isPaused` will both be `false`, so `!tween.isPlaying()` can be used to detect if a tween is stopped (regardless if the tween has completed).
### `isPaused`
`tween.isPaused` is `true` when a tween is paused. `isPlaying` will also be `true`. If a tween is started, but not paused, `isPlaying` will be `true` and `isPaused` will be `false`.
## Advanced tweening
### Relative values
You can also use relative values when using the `to` method. When the tween is started, Tween.js will read the current property values and apply the relative values to find out the new final values. But **you need to use quotes** or the values will be taken as absolute. Let's see this with an example:
```javascript
// This will make the `x` property be 100, always
const absoluteTween = new Tween(absoluteObj).to({x: 100})
// Suppose absoluteObj.x is 0 now
absoluteTween.start() // Makes x go to 100
// Suppose absoluteObj.x is -100 now
absoluteTween.start() // Makes x go to 100
// In contrast...
// This will make the `x` property be 100 units more,
// relative to the actual value when it starts
const relativeTween = new Tween(relativeObj).to({x: '+100'})
// Suppose relativeObj.x is 0 now
relativeTween.start() // Makes x go to 0 +100 = 100
// Suppose relativeObj.x is -100 now
relativeTween.start() // Makes x go to -100 +100 = 0
```
Check [09_relative_values](../examples/09_relative_values.html) for an example.
### Tweening nested objects
Tween.js can also change properties across nested objects. For example:
```javascript
const nestedObject = {scale: {x: 0, y: 0}, alpha: 0}
const tween = new Tween(nestedObject).to({scale: {x: 100, y: 100}, alpha: 1})
```
### Tweening to arrays of values
In addition to tweening to an absolute or a relative value, you can also have Tween.js change properties across a series of values. To do this, you just need to specify an array of values instead of a single value for a property. For example:
```javascript
const tween = new Tween(relativeObj).to({x: [0, -100, 100]})
```
will make `x` go from its initial value to 0, -100 and 100.
The way these values are calculated is as follows:
- first the tween progress is calculated as usual
- the progress (from 0 to 1) is used as input for the interpolation function
- based on the progress and the array of values, an interpolated value is generated
For example, when the tween has just started (progress is 0), the interpolation function will return the first value in the array. When the tween is halfway, the interpolation function will return a value approximately in the middle of the array, and when the tween is at the end, the interpolation function will return the last value.
You can change the interpolation mode by passing an `Interpolation` function
into the `tween.interpolation` method. For example:
```javascript
import {Interpolation} from '@tweenjs/tween.js'
// ...
tween.interpolation(Interpolation.Bezier)
```
The following values are available:
- `Interpolation.Linear`
- `Interpolation.Bezier`
- `Interpolation.CatmullRom`
The default is `Linear`.
Note that the interpolation function is global to all properties that are tweened with arrays in the same tween. You can't make property A change with an array and a Linear function, and property B with an array too and a Bezier function using the same tween; you should use two tween objects running over the same object but modifying different properties and using different interpolation functions.
Check [06_array_interpolation](../examples/06_array_interpolation.html) for an example.
## Changing the Definition of "Now"
When working with tweening, you inevitably rely on a definition of what "now" is. By default, Tween.js uses performance.now, which is a reliable and precise approach. However, if you need to adjust the flow of time—for instance, to slow it down or manipulate it for a custom purpose—you may encounter discrepancies between your internal definition of "now" and what Tween.js considers "now."
To address this, a new function, setNow, has been introduced. This function allows you to redefine the internal "now" used by Tween.js. You can pass a custom function to setNow, which will replace the default definition. This provides greater flexibility and enables synchronization with your specific requirements for time control.
## Getting the best performance
While Tween.js tries to be performant on its own, nothing prevents you from using it in a way that is counterperformant. Here are some of the ways you can avoid slowing down your projects when using Tween.js (or when animating in the web, in general).
### Use performant CSS
When you try to animate the position of an element in the page, the easiest solution is to animate the `top` and `left` style properties, like this:
```javascript
const element = document.getElementById('myElement')
const tween = new Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {
element.style.top = object.top + 'px'
element.style.left = object.left + 'px'
})
```
but this is really inefficient because altering these properties forces the browser to recalculate the layout on each update, and this is a very costly operation. Instead of using these, you should use `transform`, which doesn't invalidate the layout and will also be hardware accelerated when possible, like this:
```javascript
const element = document.getElementById('myElement')
const tween = new Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {
element.style.transform = 'translate(' + object.left + 'px, ' + object.top + 'px)'
})
```
If you want to read more about this, have a look at [this article](http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/).
However, if your animation needs are _that_ simple, it might be better to just use CSS animations or transitions, where applicable, so that the browser can optimise as much as possible. Tween.js is most useful when your animation needs involve complex arrangements, i.e. you need to sync several tweens together, have some start after one has finished, loop them a number of times, have graphics that are not rendered with CSS but with Canvas or WebGL, etc.
### Be good to the Garbage collector (alias the GC)
If you use an `onUpdate` callback, you need to be very careful with what you put on it. This function will be called many times per second, so if you're doing costly operations on each update, you might block the main thread and cause horrible _jank_, or---if your operations involve memory allocations, you'll end up getting the garbage collector to run too often, and cause _jank_ too. So just don't do either of those things. Keep your `onUpdate` callbacks very lightweight, and be sure to also use a memory profiler while you're developing.
## Crazy tweening
This is something you might not use often, but you can use the tweening equations outside of Tween.js. They're just functions, after all. So you could use them to calculate smooth curves as input data. For example, they're used to generate audio data in [this experiment](http://5013.es/toys/tween.audio/).
================================================
FILE: docs/user_guide_zh-CN.md
================================================
## tween.js 用户指南
更多语言: [English](./user_guide.md), [简体中文](./user_guide_zh-CN.md)
中文用户指南最近更新为 Tween.js v20.0.3
_**NOTE** 这是一个正在进行的工作。 如果你发现某些内容不清楚或缺少详细信息，请 [提出 issue](https://github.com/tweenjs/tween.js/issues/new) 并帮助改进本指南。 或者，如果你觉得自己也能提供帮助，请随时提交你自己的说明或改进！_
## 什么是 tween ？tween 是如何工作的？为什么要使用 tween ？
补间（动画）（来自 [in-between](https://en.wikipedia.org/wiki/Inbetweening)）是一个概念，允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改，当补间结束运行时它们应该具有哪些最终值，以及这需要多长时间，补间引擎将负责计算从起始点到结束点的值。
例如，`position` 对象拥有 `x` 和 `y` 两个坐标：
```js
const position = {x: 100, y: 0}
```
如果你想将 `x` 坐标的值从 `100` 变成 `200` ，你应该这么做：
```js
// 首先为位置创建一个补间(tween)
const tween = new TWEEN.Tween(position)
// 然后告诉 tween 我们想要在1000毫秒内以动画的形式移动 x 的位置
tween.to({x: 200}, 1000)
```
通常来说这样还不够，tween 已经被创建了，但是它还没被激活(使用)，你需要这样启动：
```js
// 启动
tween.start()
```
最后，想要成功的完成这种效果，你需要在主函数中调用 `TWEEN.update` ，如下使用：
```js
animate()
function animate() {
requestAnimationFrame(animate)
// [...]
TWEEN.update()
// [...]
}
```
这样在更新每帧的时候都会运行补间动画；经过 1 秒（1000 毫秒）后 `position.x` 将会变成 `200`。
除非你在控制台中打印出 `x` 的值，不然你看不到它的变化。你可能想要使用 `onUpdate` 回调:
```js
tween.onUpdate(function (object) {
console.log(object.x)
})
```
每次更新补间时都会调用此函数； 这种情况发生的频率取决于许多因素——例如，你的计算机或设备的速度有多快（以及有多繁忙！）。
到目前为止，我们只使用 tweens 将值打印到控制台，但你可以将它用于 three.js 对象的动画位置之类的事情：
```js
const tween = new TWEEN.Tween(cube.position).to({x: 100, y: 100, z: 100}, 10000).start()
animate()
function animate() {
requestAnimationFrame(animate)
TWEEN.update()
threeRenderer.render(scene, camera)
}
```
在这种情况下，因为 three.js 渲染器将在渲染之前查看对象的位置，所以不需要使用的 `onUpdate` 回调。
你可能也注意到了一些不同的地方：tween.js 可以链式调用！ 每个 tween 函数都会返回 tween 实例，所以你可以重写下面的代码：
```js
const tween = new TWEEN.Tween(position)
tween.to({x: 200}, 1000)
tween.start()
```
改成这样：
```js
const tween = new TWEEN.Tween(position).to({x: 200}, 1000).start()
```
在将会看到很多例子，所以熟悉它是很好的！比如 [04-simplest](../examples/04_simplest.html) 这个例子。
## tween.js 的动画
Tween.js 不会自行运行。你需要显式的调用 `update` 方法来告诉它何时运行。推荐的方法是在主动画循环中执行这个操作。使用 `requestAnimationFrame` 调用此循环以获得最佳的图形性能。
比如之前这个例子：
```js
animate()
function animate() {
requestAnimationFrame(animate)
// [...]
TWEEN.update()
// [...]
}
```
如果不带参数调用，`update` 将会判断当前时间点，以便找出自上次运行以来已经过了多长时间。
当然你也可以传递一个明确的时间参数给 `update` 来更新。因此：
```js
TWEEN.update(100)
```
意思是“更新时间 = 100 毫秒”。你可以使用它来确保代码中的所有时间相关函数都使用相同的时间值。例如，假设你有一个播放器，并希望同步运行补间。 你的 `animate` 函数可能看起来像这样：
```js
const currentTime = player.currentTime
TWEEN.update(currentTime)
```
我们使用明确的时间值进行单元测试。你可以看下 [tests.ts](../src/tests.ts) 这个例子，看看我们如何用不同的值调用`TWEEN.update()` 来模拟时间传递。
## 控制一个补间
### `start` 和 `stop`
到目前为止，我们已经了解了 `Tween.start` 方法，但是还有更多的方法来控制单个补间。也许最重要的一个是 `start` 对应的方法：`stop` 。 如果你想取消一个补间，只要调用这个方法通过一个单独的补间:
```js
tween.stop()
```
停止一个从未开始或已经停止的补间没有任何效果。 没有错误被抛出。
`start` 方法还接受一个 `time` 参数。如果你使用它，补间直到那个特定的时刻才会开始；否则它将立即开始（即在下一次调用 `TWEEN.update` 时）。
`start` 方法接受第二个布尔参数：当为 `true` 时，我们之前使用的补间将从目标对象中的值开始，而不是从头开始。用于停止补间，然后启动另一个将从当前位置继续的补间。
### `startFromCurrentValues`
这是 `tween.start(undefined, true)` 的别名，使以前使用的补间从目标对象的最后一个值开始，而不是从头开始。
### `update`
个别补间有一个 `update` 方法。 这实际上是由 `TWEEN.update` 调用的，用于仅使用一个参数构建的补间。
在下面的示例中，第二个参数告诉新的 Tween 不要将自己添加到默认组（`TWEEN` 是 `TWEEN.Group` 的一个实例）。如果补间不与组关联（请注意，可以通过将组作为第二个参数传递给构造函数来关联组），则补间需要使用其 `update` 方法手动更新，如下所示：
```js
const tween = new TWEEN.Tween(someObject, false).to(/*...*/).start()
function animate(time) {
tween.update(time)
requestAnimationFrame(animate)
}
```
> **Note** 如果你使用 `TWEEN.update()` 作为默认控制所有补间的方式，则无需直接调用 `tween.update()`，但是我们建议你直接如上例所示 [创建自己的补间组](#controlling-groups-of-tweens) 或手动更新补间。 使用组或单独控制的补间的概念很像避免在 JavaScript 代码中使用全局变量的做法：它可以防止一个组件意外破坏其他一些不相关组件的行为。
### `chain`
当你按顺序排列不同的补间时，事情会变得更有趣，例如在上一个补间结束的时候立即启动另外一个补间。我们称此为链接补间，它是通过 `chain` 方法完成的。因此，要使 `tweenB` 在 `tweenA` 完成后开始：
```js
tweenA.chain(tweenB)
```
或者，可以创造一个无限的链式，`tweenA` 完成时开始 `tweenB`，`tweenB` 完成时开始 `tweenA`：
```js
tweenA.chain(tweenB)
tweenB.chain(tweenA)
```
关于无限的链式查看案例 [Hello world](../examples/00_hello_world.html) 。
在其他情况下，你可能希望将多个补间链接到另一个补间，使它们（链接的补间）都同时开始动画：
```js
tweenA.chain(tweenB, tweenC)
```
> **Warning** 调用 `tweenA.chain（tweenB）` 实际上修改了 tweenA，所以 tweenB 总是在 tweenA 完成时启动。 `chain` 的返回值只是 tweenA，不是一个新的 tween。
### `repeat`
如果你想让一个补间永远重复，你可以链接到自己，但更好的方法是使用 `repeat` 方法。它接受一个参数，描述第一个补间完成后需要多少次重复：
```js
tween.repeat(10) // 循环10次
tween.repeat(Infinity) // 无限循环
```
补间的总次数将是重复参数加上一个初始补间。查看 [Repeat](../examples/08_repeat.html) 。
### `yoyo`
此功能仅在与 `repeat` 一起使用时才有效。 激活时，补间的行为将 _像溜溜球一样_，即它会在开始值和结束值之间来回跳动，而不是仅仅从头开始重复相同的顺序：
```js
tween.yoyo(false) // 默认值，动画只会从开始到结束值
tween.yoyo(true) // tween 将在起始值和结束值之间“yoyo”
```
### `delay`
更复杂的安排可能需要在实际开始运行之前延迟补间。 你可以使用 `delay` 方法来做到这一点：
```js
tween.delay(1000)
tween.start()
```
将在调用 `start` 方法后的 1 秒钟后开始执行。
### `repeatDelay`
通常，`delay` 时间应用于补间的重复之间，但如果向 `repeatDelay` 函数提供了一个值，则该值将确定补间重复之间经过的总时间。
参考这个例子：
```js
tween.delay(1000)
tween.repeatDelay(500)
tween.start()
```
补间的第一次迭代将在一秒后发生，第二次迭代将在第一次迭代结束后半秒发生，第三次迭代将在第二次迭代结束后半秒发生，依此类推。如果你想延迟初始迭代但不希望迭代之间有任何延迟，请确保调用 `tween.repeatDelay(0)` 。
### `dynamic`
如果 `dynamic` 设置为 `true`（默认为 `false`），则传递给 `tween.to()` 的对象可以在补间动画的外部进行修改。这可用于在运行时动态修改补间的结果。
请参阅 [dynamic 示例](http://tweenjs.github.io/tween.js/examples/07_dynamic_to.html)。在那个例子中，在这两个场景中，兔子的位置都在动画期间更新。 兔子的位置恰好是传递给狐狸的 `tween.to()` 方法的对象。 随着兔子位置的更新，在第一个带有 `.dynamic(false)` 的场景中，狐狸向兔子的初始位置移动并且不跟随兔子，而在第二个带有 `.dynamic(true)` 的场景中，狐狸移动到兔子的最终目的地 狐狸因此也被更新，这使得狐狸跟随兔子。
> **Warning** 当 `dynamic` 设置为 `false` 时，Tween 复制传递给 `tween.to()` 的对象并且永远不会修改它（因此从外部更新原始对象不是动态的）。当 `dynamic` 为 `true` 时，Tween 在动画期间使用原始对象作为值的来源（每次更新都读取值，因此可以动态修改它们） **但请注意，在 dynamic 模式下，Tween 将修改传递给 `tween.to()` 的对象的任何插值数组，这可能会对也可能依赖于同一对象的任何外部代码造成副作用。**
## 控制*所有*补间
在 TWEEN 全局对象中可以找到以下方法，除了 `update` 之外，你通常不需要使用其中的大部分方法。
### `TWEEN.update(time)`
我们已经讨论过这种方法。它用于更新所有活动的补间。
如果 `time` 不指定，它将使用当前时间。
### `TWEEN.getAll` and `TWEEN.removeAll`
用于获取对活动 `tweens` 数组的引用，并分别通过一次调用将它们从数组中移除。
### `TWEEN.add(tween)` and `TWEEN.remove(tween)`
分别用于将补间添加到活动补间列表，或从列表中删除特定补间。
这些方法通常只在内部使用，但如果你想做一些*有趣*的事情，我们会公开这些方法。
## 控制补间集
使用 `TWEEN` 单例来管理补间可能会导致包含许多组件的大型应用程序出现问题。在这些情况下，你可能想要创建自己的更小的补间集。
### 示例：交叉组件冲突
如果你有多个组件使用 `TWEEN`，并且每个组件都想管理自己的补间集，则可能会发生冲突。 如果一个组件调用 `TWEEN.update()` 或 `TWEEN.removeAll()`，其他组件的补间也将被更新或删除。
### 创建你自己的补间集
为了解决这个问题，每个组件都可以创建自己的 `TWEEN.Group` 实例（这是全局 `TWEEN` 对象在内部使用的实例）。 在实例化新补间时，这些组可以作为第二个可选参数传入：
```js
const groupA = new TWEEN.Group()
const groupB = new TWEEN.Group()
const tweenA = new TWEEN.Tween({x: 1}, groupA).to({x: 10}, 100).start()
const tweenB = new TWEEN.Tween({x: 1}, groupB).to({x: 10}, 100).start()
const tweenC = new TWEEN.Tween({x: 1}).to({x: 10}, 100).start()
groupA.update() // 只更新tweenA
groupB.update() // 只更新tweenB
TWEEN.update() // 只更新tweenC
groupA.removeAll() // 只移除tweenA
groupB.removeAll() // 只移除tweenB
TWEEN.removeAll() // 只移除tweenC
```
这样，每个组件都可以处理创建、更新和销毁自己的补间集。
## 改变缓动功能（别名：让它弹）
Tween.js 将以线性方式执行值之间的插值（即缓动），因此变化将与经过的时间成正比。 这是可以预见的，但在视觉上也很无趣。 不用担心——可以使用缓动方法轻松更改此行为。 例如：
```js
tween.easing(TWEEN.Easing.Quadratic.In)
```
这将导致补间缓慢开始向最终值变化，向中间加速，然后快速达到其最终值。 相比之下，`TWEEN.Easing.Quadratic.Out` 将开始向该值快速变化，但在接近最终值时会减慢速度。
### 可用的缓动函数：`TWEEN.Easing`
tween.js 提供了一些现成的缓动功能。它们按照它们表示的方程类型进行分组：线性、二次、三次、四次、五次、正弦、指数、圆形、弹性、后退和反弹，然后按缓动类型：In、Out 和 InOut。
除非你已经熟悉这些概念，否则这些名称可能对你没有任何意义，所以现在可能是查看 [图表示例](../examples/17_generate_pow.html) 的时候了，该示例在一页中绘制了所有曲线，以便你可以比较它们的动画。
这些函数源自 Robert Penner 几年前慷慨地作为免费软件提供的原始方程，但已经过优化后，可以很好地与 JavaScript 配合使用。
### 使用自定义缓动功能
你不仅可以使用任何现有的缓动函数，还可以提供自己的函数，只要它遵循一些约定即可：
- 它必须接受一个参数：
- `k`: 缓动过程，或我们的补间所处的时间有多长。允许的值在[0, 1]的范围内。
- 它必须根据输入参数返回一个值。
无论要更改多少属性，每次更新时每个补间只调用一次缓动函数。 然后将结果与初始值以及此值和最终值之间的差值（_deltas_）一起使用，如以下伪代码所示：
```js
easedElapsed = easing(k);
for each property:
newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;
```
对于更注重性能表现的人来说：只有在补间上调用 `start()` 时才会计算 deltas。
因此，假设你想要使用自定义缓动函数来缓动值但将 `Math.floor` 应用于输出，因此只会返回整数部分，从而产生一种阶梯式输出：
```js
function tenStepEasing(k) {
return Math.floor(k * 10) / 10
}
```
你可以通过简单地调用它的缓动方法在补间中使用它，就像我们之前看到的那样：
```js
tween.easing(tenStepEasing)
```
查看 [graphs for custom easing functions](../examples/12_graphs_custom_functions.html) 示例，以查看这个动作（还有一些用于生成步进函数的 _metaprogramming_ ）。
## 回调函数
另一个强大的特性是能够在每个补间的生命周期的特定时间运行自己的功能。 当更改属性不够时，通常需要这样做。
例如，假设你正在试图给一些不能直接访问属性的对象设置动画，但是需要你调用 setter。 你可以使用 `update` 回调来读取新的更新值，然后手动调用 setters。 所有的回调函数都将补间对象作为唯一的参数。
```js
const trickyObjTween = new TWEEN.Tween({
propertyA: trickyObj.getPropertyA(),
propertyB: trickyObj.getPropertyB(),
})
.to({propertyA: 100, propertyB: 200})
.onUpdate(function (object) {
object.setA(object.propertyA)
object.setB(object.propertyB)
})
```
或者假设你想在开始补间时播放声音。 你可以使用 `start` 回调：
```js
const tween = new TWEEN.Tween(obj).to({x: 100}).onStart(function () {
sound.play()
})
```
每个回调的范围是补间对象——在本例中为 `obj`。
### onStart
在补间开始动画之前执行，在 `delay` 方法指定的任何延迟时间之后。 每个补间只会执行一次，即当补间通过 `repeat()` 重复时不会运行。
`onStart` 非常适合与其他事件同步，或触发需要在补间开始时执行的操作。
补间对象作为第一个参数传入。
### onEveryStart
和 `onStart` 类似，单 `onEveryStart` 在每次重复补间时也会运行。
补间对象作为第一个参数传入。
### onStop
当补间通过 `stop()` 显式停止时执行，但不会在它正常完成时执行，并且在停止任何可能的链接补间之前执行。
补间对象作为第一个参数传入。
### onUpdate
每次更新补间时执行，在实际更新值之后。
补间对象作为第一个参数传入。
### onComplete
当补间正常完成（即未停止）时执行。
补间对象作为第一个参数传入。
### onRepeat
每当补间刚刚完成一个重复并将开始另一个重复时执行。
补间对象作为第一个参数传入。
要阐明何时调用 `onStart`、`onEveryStart` 和 `onRepeat`，请参考：
```js
const obj = {x: 0}
const t = new TWEEN.Tween(obj)
.to({x: 5}, 5)
.repeat(Infinity)
.onStart(() => {
console.log('onStart')
})
.onRepeat(() => {
console.log('onRepeat')
})
.onEveryStart(() => {
console.log('onEveryStart')
})
.start(0)
for (let ticks = 0; ticks < 22; ticks += 1) {
console.log('Tick', ticks)
TWEEN.update(ticks)
console.log(obj)
console.log()
}
```
输出如下所示，左侧如上，右侧带有 `.delay(5)`：
```txt
Tick 0 Tick 0
onStart { x: 0 }
onEveryStart
{ x: 0 }
Tick 1 Tick 1
{ x: 1 } { x: 0 }
Tick 2 Tick 2
{ x: 2 } { x: 0 }
Tick 3 Tick 3
{ x: 3 } { x: 0 }
Tick 4 Tick 4
{ x: 4 } { x: 0 }
Tick 5 Tick 5
onRepeat onStart
{ x: 5 } onEveryStart
{ x: 0 }
Tick 6 Tick 6
onEveryStart { x: 1 }
{ x: 1 }
Tick 7 Tick 7
{ x: 2 } { x: 2 }
Tick 8 Tick 8
{ x: 3 } { x: 3 }
Tick 9 Tick 9
{ x: 4 } { x: 4 }
Tick 10 Tick 10
onRepeat onRepeat
{ x: 5 } { x: 5 }
Tick 11 Tick 11
onEveryStart { x: 5 }
{ x: 1 }
Tick 12 Tick 12
{ x: 2 } { x: 5 }
Tick 13 Tick 13
{ x: 3 } { x: 5 }
Tick 14 Tick 14
{ x: 4 } { x: 5 }
Tick 15 Tick 15
onRepeat onEveryStart
{ x: 5 } { x: 0 }
Tick 16 Tick 16
onEveryStart { x: 1 }
{ x: 1 }
Tick 17 Tick 17
{ x: 2 } { x: 2 }
Tick 18 Tick 18
{ x: 3 } { x: 3 }
Tick 19 Tick 19
{ x: 4 } { x: 4 }
Tick 20 Tick 20
onRepeat onRepeat
{ x: 5 } { x: 5 }
Tick 21 Tick 21
onEveryStart { x: 5 }
{ x: 1 }
```
## 补间状态
### `isPlaying`
开始时为 `true`（即使是暂停）。
当补间停止时，`isPlaying` 和 `isPaused` 都将为 `false`。
### `isPaused`
暂停时为 `true`。 `isPlaying` 也将为 `true`。 如果补间已启动但未暂停，则 `isPlaying` 将为 `true` 而 `isPaused` 将为 `false`。
## 高级补间
### 相对值
使用 `to` 方法时，也可以使用相对值。 当 tween 启动时，Tween.js 将读取当前属性值并应用相对值来找出新的最终值。
**但是你需要使用引号**，否则这些值将被视为绝对的。 我们来看一个例子:
```js
// 这将使 `x` 属性始终为 100
const absoluteTween = new TWEEN.Tween(absoluteObj).to({x: 100})
// 假设 absoluteObj.x 现在为 0
absoluteTween.start() // 使 x 变为 100
// 假设 absoluteObj.x 现在是 -100
absoluteTween.start() // 使 x 变为 100
// 相比之下...
// 这将使 `x` 属性相对于开始时的实际值多 100 个单位
const relativeTween = new TWEEN.Tween(relativeObj).to({x: '+100'})
// 假设 relativeObj.x 现在是 0
relativeTween.start() // 使 x 变为 0 +100 = 100
// 假设 relativeObj.x 现在是 -100
relativeTween.start() // 使 x 变为 -100 +100 = 0
```
查看 [09_relative_values](../examples/09_relative_values.html) 示例。
### 补间嵌套对象
Tween.js 还可以跨嵌套对象更改属性。 例如：
```js
const nestedObject = {scale: {x: 0, y: 0}, alpha: 0}
const tween = new TWEEN.Tween(nestedObject).to({scale: {x: 100, y: 100}, alpha: 1})
```
### 补间值的数组
除了补间到绝对值或相对值之外，你还可以让 Tween.js 更改一系列值的属性。 为此，你只需为属性指定一个值数组而不是单个值。 例如：
```js
const tween = new TWEEN.Tween(relativeObj).to({x: [0, -100, 100]})
```
将使 `x` 从初始值变为 0，-100 和 100。
这些值的计算方法如下：
- 首先，补间进度如常计算
- 进度（从 0 到 1）用作插值函数的输入
- 基于进度和值的数组，生成内插值
例如，当补间刚刚启动（进度为 0）时，插值函数将返回数组中的第一个值。 当补间到一半时，插值函数将返回一个大约在数组中间的值，当补间结束时，插值函数将返回最后一个值。
你可以使用插值方法更改插值函数。 例如：
```js
tween.interpolation(TWEEN.Interpolation.Bezier)
```
以下值可用：
- TWEEN.Interpolation.Linear
- TWEEN.Interpolation.Bezier
- TWEEN.Interpolation.CatmullRom
默认是 `Linear`。
请注意，插值函数对于在同一补间中与数组补间的所有属性都是全局的。
你不能使用数组和线性函数更改属性 A，也不能使用数组和使用相同补间的贝塞尔函数更改属性 B； 你应该使用两个运行在同一对象上但修改不同属性并使用不同插值函数的补间对象。
查看 [06_array_interpolation](../examples/06_array_interpolation.html) 示例。
## 获得最佳性能
虽然 Tween.js 试图靠自己发挥性能，但没有什么能阻止你以反性能的方式使用它。 以下是一些在使用 Tween.js 时（或通常在 Web 中制作动画时）可以避免拖慢项目速度的方法。
### 使用高性能的 CSS
当你尝试为页面中元素的位置设置动画时，最简单的解决方案是为 `top` 和 `left` 样式属性设置动画，如下所示：
```js
const element = document.getElementById('myElement')
const tween = new TWEEN.Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {
element.style.top = object.top + 'px'
element.style.left = object.left + 'px'
})
```
但这确实效率低下，因为更改这些属性会强制浏览器在每次更新时重新计算布局，这是一项非常消耗性能的操作。你应该使用 `transform`，它不会使布局无效，并且在可能的情况下也会进行硬件加速，如下所示：
```js
const element = document.getElementById('myElement')
const tween = new TWEEN.Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {
element.style.transform = 'translate(' + object.left + 'px, ' + object.top + 'px);'
})
```
如果你想了解更多关于高性能的 CSS，看看[这篇文章](https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)。
但是，如果你的动画需求就这么简单，最好只使用 CSS 动画或过渡（在适用的情况下），这样浏览器就可以尽可能地进行优化。
当你的动画需要涉及复杂的操作时，Tween.js 是非常有用，也就是说，你需要将多个补间同步在一起，在一个完成后开始，循环多次，具有不是使用 CSS 而是使用 Canvas 渲染的图形或 WebGL 等等。
### 对垃圾收集器（别名 GC）
如果你使用 `onUpdate` 回调，你需要非常小心你放在它上面的东西。 这个函数每秒会被调用很多次，所以如果你在每次更新时都做代价高昂的操作，你可能会阻塞主线程并导致可怕的卡顿，或者——如果你的操作涉及内存分配，你最终会得到 垃圾收集器运行过于频繁，也会导致卡顿。 所以不要做这两件事。 保持你的 `onUpdate` 回调非常轻量级，并确保在开发时也使用内存分析器。
### 疯狂的补间
这是你可能不经常使用的东西，但你可以在 Tween.js 之外使用补间方程式。 毕竟，它们只是函数。 因此，你可以使用它们来计算平滑曲线作为输入数据。 例如，它们用于在[此实验](<(http://5013.es/toys/tween.audio/)>)中生成音频数据。
================================================
FILE: examples/00_hello_world.html
================================================
Tween.js / hello world!
================================================
FILE: examples/02_black_and_red.html
================================================
Tween.js / Black and Red
Creating a tween and doing little else apart from that :)
================================================
FILE: examples/05_video_and_time.html
================================================
Tween.js / video and time
Animate multiple objects with a single tween using an array of values.
one
two
three
================================================
FILE: examples/17_generate_pow.html
================================================
Tween.js / easing with a power of number
Example for illustrating the startFromCurrentValues() functionality.
================================================
FILE: examples/19_end_tween.html
================================================
================================================
FILE: examples/css/style.css
================================================
body {
background: #fff;
font-family: Helvetica, Arial, sans;
}
a {
color: #333;
}
h2 {
font-weight: normal;
}
button {
cursor: pointer;
color: #333;
background: #fff;
border: 2px solid #333;
padding: 10px;
border-radius: 10px;
font-weight: bold;
font-size: 20px;
transition: all 150ms ease-out;
}
button:hover {
background: #333;
color: #fff;
}
#info {
position: absolute;
top: 0;
left: 0;
padding: 1.5em 2em;
}
#info h1 {
font-size: 3em;
color: #333;
margin-top: 0;
letter-spacing: -0.05em;
}
#info h2 {
font-size: 2.5em;
text-transform: uppercase;
color: #666;
margin-top: 0;
}
#info p {
font-size: 2em;
line-height: 1em;
color: #aaa;
max-width: 10em;
}
================================================
FILE: examples/example-projects/nodejs-commonjs/README.md
================================================
This example shows that Tween.js can be imported into a Node.js project in CommonJS format.
================================================
FILE: examples/example-projects/nodejs-commonjs/index.js
================================================
// Ensure we can import into Node CommonJS:
const TWEEN = require('@tweenjs/tween.js')
console.log(Object.keys(TWEEN))
const tween = new TWEEN.Tween()
console.log(Object.keys(tween))
================================================
FILE: examples/example-projects/nodejs-commonjs/package.json
================================================
{
"description": "Node.js project in CommonJS format, importing Tween in CommonJS format.",
"type": "commonjs",
"scripts": {
"start": "node ./index.js"
},
"dependencies": {
"@tweenjs/tween.js": "file:../../../"
}
}
================================================
FILE: examples/example-projects/nodejs-esmodules/README.md
================================================
This example shows that Tween.js can be imported into a Node.js project in ES Module format.
================================================
FILE: examples/example-projects/nodejs-esmodules/index.js
================================================
// Ensure we can import into Node ESM:
import * as TWEEN from '@tweenjs/tween.js'
console.log(Object.keys(TWEEN))
const tween = new TWEEN.Tween()
console.log(Object.keys(tween))
================================================
FILE: examples/example-projects/nodejs-esmodules/package.json
================================================
{
"description": "Node.js project in CommonJS format, importing Tween in CommonJS format.",
"type": "module",
"scripts": {
"start": "node ./index.js"
},
"dependencies": {
"@tweenjs/tween.js": "file:../../../"
}
}
================================================
FILE: examples/example-projects/plain-javascript-modules/README.md
================================================
This example is written in JavaScript without any build, using JavaScript
modules to organize code into separate files and importing from one file to the
other using native `import` syntax.
To set up, run `npm install`.
To run the project, run `npm start`.
================================================
FILE: examples/example-projects/plain-javascript-modules/animate.js
================================================
export function animate(group) {
function loop(time) {
group.update(time)
const stopped = group.allStopped()
if (!stopped) requestAnimationFrame(loop)
}
loop(performance.now())
}
================================================
FILE: examples/example-projects/plain-javascript-modules/index.html
================================================
Tween.js / hello world (JS modules)!
Simple example for illustrating the creation and chaining of tweens.
hello world!
================================================
FILE: examples/example-projects/plain-javascript-modules/index.js
================================================
import * as TWEEN from '@tweenjs/tween.js'
// For sake of example, we put animate() in a separate file, and import it into index.js.
import {animate} from './animate.js'
const group = new TWEEN.Group()
const position = {x: 100, y: 100, rotation: 10}
const target = document.getElementById('target')
const tween = new TWEEN.Tween(position, group)
.to({x: 700, y: 200, rotation: 359}, 2000)
.delay(1000)
.easing(TWEEN.Easing.Elastic.InOut)
.onUpdate(update)
const tweenBack = new TWEEN.Tween(position, group)
.to({x: 100, y: 100, rotation: 10}, 3000)
.easing(TWEEN.Easing.Elastic.InOut)
.onUpdate(update)
tween.chain(tweenBack)
tweenBack.chain(tween)
tween.start()
animate(group)
function update() {
target.style.transform = `translate3d(${position.x}px, ${position.y}px, 0.0001px) rotateY(${Math.floor(position.rotation)}deg)`
}
================================================
FILE: examples/example-projects/plain-javascript-modules/package.json
================================================
{
"description": "Plain JS modules in a browser.",
"type": "module",
"scripts": {
"start": "npm run serve",
"serve": "five-server ."
},
"dependencies": {
"@tweenjs/tween.js": "file:../../../"
},
"devDependencies": {
"five-server": "^0.3.2"
}
}
================================================
FILE: examples/example-projects/plain-javascript-modules/style.css
================================================
html {
transform-style: preserve-3d;
perspective: 800px;
}
body {
background: #fff;
font-family: Helvetica, Arial, sans;
transform-style: preserve-3d;
}
a {
color: #333;
}
h2 {
font-weight: normal;
}
button {
cursor: pointer;
color: #333;
background: #fff;
border: 2px solid #333;
padding: 10px;
border-radius: 10px;
font-weight: bold;
font-size: 20px;
transition: all 150ms ease-out;
}
button:hover {
background: #333;
color: #fff;
}
#info {
position: absolute;
top: 0;
left: 0;
padding: 1.5em 2em;
}
#info h1 {
font-size: 3em;
color: #333;
margin-top: 0;
letter-spacing: -0.05em;
}
#info h2 {
font-size: 2.5em;
text-transform: uppercase;
color: #666;
margin-top: 0;
}
#info p {
font-size: 2em;
line-height: 1em;
color: #aaa;
max-width: 10em;
}
================================================
FILE: examples/example-projects/plain-typescript-modules/README.md
================================================
This example is written in TypeScript and requires running a build step, using
JavaScript module format to organize code into separate files and importing from
one file to the other using native `import` syntax.
This example uses the `tsc` (TypeScript compiler) to compile `.ts` files into
`.js` files. The `tsconfig.json` file specifies the output format to be
`esnext`, which means the output `.js` files will have `import` statements just
as we've written them in the `.ts` files, and the output `.js` files will be
executed as native JS modules in the browser.
To set up, run `npm install`.
To build and run the project in a single command, run `npm start`.
To compile only, run `npm run build` to generate `.js` files from `.ts` files.
To continuously build `.ts` files into `.js` files any time the `.ts` files change, run `npm run dev`.
================================================
FILE: examples/example-projects/plain-typescript-modules/animate.js
================================================
export function animate(group) {
function loop(time) {
group.update(time);
const stopped = group.allStopped();
if (!stopped)
requestAnimationFrame(loop);
}
loop(performance.now());
}
================================================
FILE: examples/example-projects/plain-typescript-modules/animate.ts
================================================
import type {Group} from '@tweenjs/tween.js'
export function animate(group: Group) {
function loop(time: number) {
group.update(time)
const stopped = group.allStopped()
if (!stopped) requestAnimationFrame(loop)
}
loop(performance.now())
}
================================================
FILE: examples/example-projects/plain-typescript-modules/index.html
================================================
Tween.js / hello world (JS modules)!
](https://lume.io)
[](https://aframe.io)
[](http://www.moma.org/interactives/exhibitions/2012/inventingabstraction/)
[](http://www.chromeweblab.com/)
[](http://5013.es/toys/macchina)
[](http://egraether.com/mine3d/)
[](http://ro.me)
[](http://data-arts.appspot.com/globe)
[](http://www.androidify.com/)
[](http://thewildernessdowntown.com/)
[](http://dejavis.org/linechart)
[npm-image]: https://img.shields.io/npm/v/@tweenjs/tween.js.svg
[npm-url]: https://npmjs.org/package/@tweenjs/tween.js
[downloads-image]: https://img.shields.io/npm/dm/@tweenjs/tween.js.svg
[downloads-url]: https://npmjs.org/package/@tweenjs/tween.js
[ci-image]: https://github.com/tweenjs/tween.js/workflows/build%20and%20tests/badge.svg?branch=master
[ci-url]: https://github.com/tweenjs/tween.js/actions
[cdnjs-image]: https://img.shields.io/cdnjs/v/tween.js.svg
[cdnjs-url]: https://cdnjs.com/libraries/tween.js
================================================
FILE: README_zh-CN.md
================================================
# tween.js
用于简单动画的 JavaScript (TypeScript) 补间引擎，结合优化的 Robert Penner 方程式。
[![NPM Version][npm-image]][npm-url]
[![CDNJS][cdnjs-image]][cdnjs-url]
[![NPM Downloads][downloads-image]][downloads-url]
[![Build and Tests][ci-image]][ci-url]
更多语言: [English](./README.md), [简体中文](./README_zh-CN.md)
---
```html
```
[在 CodePen 上试试这个例子](https://codepen.io/trusktr/pen/KKGaBVz?editors=1000)
## 安装
## 从 CDN 安装
从上例中的内容分发网络 (CDN) 安装。
cdnjs:
```html
```
或者 unpkg.com:
```html
```
请注意，unpkg.com 支持 URL 中的 semver 版本，其中 URL 中的 `^` 告诉 unpkg 为你提供最新版本 20.x.x。
## 使用 script 标签构建并包含在你的项目中
目前需要 npm 来构建项目。
```bash
git clone https://github.com/tweenjs/tween.js
cd tween.js
npm install
npm run build
```
这将在 `dist` 目录中创建一些构建。 目前有两种不同的库版本：
- UMD : `tween.umd.js`
- ES6 Module : `tween.esm.js`
你现在可以将 tween.umd.js 复制到你的项目中，然后将其包含在一个 script 标签，它将 TWEEN 添加到全局范围，
```html
```
或将 TWEEN 作为 JavaScript 模块导入，
```html
```
其中 `path/to` 替换为你放置文件的位置。
## 使用 `npm install` 和 `import` 从 `node_modules` 中添加
你可以将 tween.js 添加为 npm 依赖项：
```bash
npm install @tweenjs/tween.js
```
### 使用构建工具
如果你使用 [Node.js](https://nodejs.org/)、[Parcel](https://parceljs.org/)、[Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org/)、[Vite](https://vitejs.dev/) 或者其他的构建工具，那么你现在可以使用以下方式来导入 tween.js：
```javascript
import * as TWEEN from '@tweenjs/tween.js'
```
### 没有构建工具
如果你将 `node_modules` 作为网站的一部分提供服务，则可以使用 `importmap` script 标签从 `node_modules` 导入。 首先，假设 `node_modules` 位于你网站的根目录，你可以编写一个导入映射：
```html
```
现在，在任何 module script 中，你都可以通过包名导入它：
```javascript
import * as TWEEN from '@tweenjs/tween.js'
```
# 特性
- 做一件事并且只做一件事：补间属性
- 不处理 CSS 单位（例如附加 `px`）
- 不插值颜色
- 缓动函数可在 Tween 之外重复使用
- 也可以使用自定义缓动函数
# 文档