Showing preview only (540K chars total). Download the full file or copy to clipboard to get everything.
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
<div id="box"></div>
<style>
#box {
background-color: deeppink;
width: 100px;
height: 100px;
}
</style>
<script type="module">
import {Tween, Easing} from 'https://unpkg.com/@tweenjs/tween.js@23.1.3/dist/tween.esm.js'
const box = document.getElementById('box') // Get the element we want to animate.
const coords = {x: 0, y: 0} // Start at (0, 0)
const tween = new Tween(coords, false) // Create a new tween that modifies 'coords'.
.to({x: 300, y: 200}, 1000) // Move to (300, 200) in 1 second.
.easing(Easing.Quadratic.InOut) // Use an easing function to make the animation smooth.
.onUpdate(() => {
// Called after tween.js updates 'coords'.
// Move 'box' to the position described by 'coords' with a CSS translation.
box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)')
})
.start() // Start the tween immediately.
// Setup the animation loop.
function animate(time) {
tween.update(time)
requestAnimationFrame(animate)
}
requestAnimationFrame(animate)
</script>
```
[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
<table>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/00_hello_world.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/00_hello_world.png" alt="hello world" />
</a>
</td>
<td>
hello world<br />
(<a href="examples/00_hello_world.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/01_bars.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/01_bars.png" alt="Bars" />
</a>
</td>
<td>
Bars<br />
(<a href="examples/01_bars.html">source</a>)
</td>
<tr>
</tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/02_black_and_red.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/02_black_and_red.png" alt="Black and red" />
</a>
</td>
<td>
Black and red<br />
(<a href="examples/02_black_and_red.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/03_graphs.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/03_graphs.png" alt="Graphs" />
</a>
</td>
<td>
Graphs<br />
(<a href="examples/03_graphs.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/04_simplest.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/04_simplest.png" alt="Simplest possible example" />
</a>
</td>
<td>
Simplest possible example<br />
(<a href="examples/04_simplest.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/05_video_and_time.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/06_video_and_time.png" alt="Video and time" />
</a>
</td>
<td>
Video and time<br />
(<a href="examples/05_video_and_time.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/06_array_interpolation.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/03_graphs.png" alt="Array interpolation" />
</a>
</td>
<td>
Array interpolation<br />
(<a href="examples/06_array_interpolation.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/07_dynamic_to.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/07_dynamic_to.png" alt="Dynamic to, object" />
</a>
</td>
<td>
Dynamic to, object<br />
(<a href="examples/07_dynamic_to.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/07a_dynamic_to_two_array_values.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/07a_dynamic_to.png" alt="Dynamic to, interpolation array" />
</a>
</td>
<td>
Dynamic to, interpolation array<br />
(<a href="examples/07a_dynamic_to_two_array_values.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/07b_dynamic_to_an_array_of_values.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/07b_dynamic_to.png" alt="Dynamic to, large interpolation array" />
</a>
</td>
<td>
Dynamic to, large interpolation array<br />
(<a href="examples/07b_dynamic_to_an_array_of_values.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/08_repeat.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/08_repeat.png" alt="Repeat" />
</a>
</td>
<td>
Repeat<br />
(<a href="examples/08_repeat.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/09_relative_values.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/09_relative.png" alt="Relative values" />
</a>
</td>
<td>
Relative values<br />
(<a href="examples/09_relative_values.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/10_yoyo.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/10_yoyo.png" alt="Yoyo" />
</a>
</td>
<td>
Yoyo<br />
(<a href="examples/10_yoyo.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/11_stop_all_chained_tweens.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/11_stop_all_chained_tweens.png" alt="Stop all chained tweens" />
</a>
</td>
<td>
Stop all chained tweens<br />
(<a href="examples/11_stop_all_chained_tweens.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/12_graphs_custom_functions.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/03_graphs.png" alt="Custom functions" />
</a>
</td>
<td>
Custom functions<br />
(<a href="examples/12_graphs_custom_functions.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/13_relative_start_time.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/13_relative_start_time.png" alt="Relative start time" />
</a>
</td>
<td>
Relative start time<br />
(<a href="examples/13_relative_start_time.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/14_pause_tween.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/14_pause_tween.png" alt="Pause tween" />
</a>
</td>
<td>
Pause tween<br />
(<a href="examples/14_pause_tween.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/15_complex_properties.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/15_complex_properties.png" alt="Complex properties" />
</a>
</td>
<td>
Complex properties<br />
(<a href="examples/15_complex_properties.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/16_animate_an_array_of_values.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/16_animate_an_array_of_values.png" alt="Animate an array of values" />
</a>
</td>
<td>
Animate an array of values<br />
(<a href="examples/16_animate_an_array_of_values.html">source</a>)
</td>
</tr>
</table>
# 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
<script type="importmap">
{
"imports": {
"@tweenjs/tween.js": "/node_modules/@tweenjs/tween.js/dist/tween.esm.js"
}
}
</script>
```
Now in any of your module scripts you can import Tween.js by its package name:
```html
<script type="module">
import {Tween} from '@tweenjs/tween.js'
</script>
```
#### Import from CDN
Note that, without the `importmap`, you can import directly from a CDN as with the first example above, like so:
```html
<script type="module">
import {Tween} from 'https://unpkg.com/browse/@tweenjs/tween.js@23.1.3/dist/tween.esm.js'
</script>
```
You can also link your `importmap` to the CDN instead of a local `node_modules` folder, if you prefer that:
```html
<script type="importmap">
{
"imports": {
"@tweenjs/tween.js": "https://unpkg.com/browse/@tweenjs/tween.js@23.1.3/dist/tween.esm.js"
}
}
</script>
<script type="module">
import {Tween} from '@tweenjs/tween.js'
</script>
```
### 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
<script type="module">
import {Tween} from 'path/to/tween.esm.js'
</script>
```
or (deprecated, to be removed in future major):
```html
<script src="path/to/tween.umd.js"></script>
<script>
const {Tween} = TWEEN
</script>
```
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
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script>
```
Or from unpkg.com:
```html
<script src="https://unpkg.com/@tweenjs/tween.js@^23.1.3/dist/tween.umd.js"></script>
```
Then use the `TWEEN` variable in any script:
```html
<script>
const {Tween, Easing, Group /*, ...*/} = TWEEN
const tween = new Tween(someObject)
// ...
</script>
```
> [!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
[<img src="./assets/projects/11_lume.jpg" width="100" alt="Lume" />](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
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script>
<div id="box"></div>
<style>
#box {
background-color: deeppink;
width: 100px;
height: 100px;
}
</style>
<script>
const box = document.getElementById('box') // 获取我们想要设置动画的元素。
const coords = {x: 0, y: 0} // 从 (0, 0) 开始
const tween = new TWEEN.Tween(coords, false) // 创建一个修改“坐标”的新 tween。
.to({x: 300, y: 200}, 1000) // 在 1 秒内移动到 (300, 200)。
.easing(TWEEN.Easing.Quadratic.InOut) // 使用缓动函数使动画流畅。
.onUpdate(() => {
// 在 tween.js 更新“坐标”后调用。
// 使用 CSS transform 将 'box' 移动到 'coords' 描述的位置。
box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)')
})
.start() // 立即开始 tween。
// 设置动画循环。
function animate(time) {
tween.update(time)
requestAnimationFrame(animate)
}
requestAnimationFrame(animate)
</script>
```
[在 CodePen 上试试这个例子](https://codepen.io/trusktr/pen/KKGaBVz?editors=1000)
## 安装
## 从 CDN 安装
从上例中的内容分发网络 (CDN) 安装。
cdnjs:
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script>
```
或者 unpkg.com:
```html
<script src="https://unpkg.com/@tweenjs/tween.js@^23.1.3/dist/tween.umd.js"></script>
```
请注意，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
<script src="path/to/tween.umd.js"></script>
```
或将 TWEEN 作为 JavaScript 模块导入，
```html
<script type="module">
import * as TWEEN from 'path/to/tween.esm.js'
</script>
```
其中 `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
<script type="importmap">
{
"imports": {
"@tweenjs/tween.js": "/node_modules/@tweenjs/tween.js/dist/tween.esm.js"
}
}
</script>
```
现在，在任何 module script 中，你都可以通过包名导入它：
```javascript
import * as TWEEN from '@tweenjs/tween.js'
```
# 特性
- 做一件事并且只做一件事：补间属性
- 不处理 CSS 单位（例如附加 `px`）
- 不插值颜色
- 缓动函数可在 Tween 之外重复使用
- 也可以使用自定义缓动函数
# 文档
<table>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/00_hello_world.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/00_hello_world.png" alt="hello world" />
</a>
</td>
<td>
hello world<br />
(<a href="examples/00_hello_world.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/01_bars.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/01_bars.png" alt="Bars" />
</a>
</td>
<td>
Bars<br />
(<a href="examples/01_bars.html">source</a>)
</td>
<tr>
</tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/02_black_and_red.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/02_black_and_red.png" alt="Black and red" />
</a>
</td>
<td>
Black and red<br />
(<a href="examples/02_black_and_red.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/03_graphs.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/03_graphs.png" alt="Graphs" />
</a>
</td>
<td>
Graphs<br />
(<a href="examples/03_graphs.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/04_simplest.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/04_simplest.png" alt="Simplest possible example" />
</a>
</td>
<td>
Simplest possible example<br />
(<a href="examples/04_simplest.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/05_video_and_time.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/06_video_and_time.png" alt="Video and time" />
</a>
</td>
<td>
Video and time<br />
(<a href="examples/05_video_and_time.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/06_array_interpolation.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/03_graphs.png" alt="Array interpolation" />
</a>
</td>
<td>
Array interpolation<br />
(<a href="examples/06_array_interpolation.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/07_dynamic_to.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/07_dynamic_to.png" alt="Dynamic to, object" />
</a>
</td>
<td>
Dynamic to, object<br />
(<a href="examples/07_dynamic_to.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/07a_dynamic_to_two_array_values.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/07a_dynamic_to.png" alt="Dynamic to, interpolation array" />
</a>
</td>
<td>
Dynamic to, interpolation array<br />
(<a href="examples/07a_dynamic_to_two_array_values.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/07b_dynamic_to_an_array_of_values.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/07b_dynamic_to.png" alt="Dynamic to, large interpolation array" />
</a>
</td>
<td>
Dynamic to, large interpolation array<br />
(<a href="examples/07b_dynamic_to_an_array_of_values.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/08_repeat.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/08_repeat.png" alt="Repeat" />
</a>
</td>
<td>
Repeat<br />
(<a href="examples/08_repeat.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/09_relative_values.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/09_relative.png" alt="Relative values" />
</a>
</td>
<td>
Relative values<br />
(<a href="examples/09_relative_values.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/10_yoyo.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/10_yoyo.png" alt="Yoyo" />
</a>
</td>
<td>
Yoyo<br />
(<a href="examples/10_yoyo.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/11_stop_all_chained_tweens.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/11_stop_all_chained_tweens.png" alt="Stop all chained tweens" />
</a>
</td>
<td>
Stop all chained tweens<br />
(<a href="examples/11_stop_all_chained_tweens.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/12_graphs_custom_functions.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/03_graphs.png" alt="Custom functions" />
</a>
</td>
<td>
Custom functions<br />
(<a href="examples/12_graphs_custom_functions.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/13_relative_start_time.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/13_relative_start_time.png" alt="Relative start time" />
</a>
</td>
<td>
Relative start time<br />
(<a href="examples/13_relative_start_time.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/14_pause_tween.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/14_pause_tween.png" alt="Pause tween" />
</a>
</td>
<td>
Pause tween<br />
(<a href="examples/14_pause_tween.html">source</a>)
</td>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/15_complex_properties.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/15_complex_properties.png" alt="Complex properties" />
</a>
</td>
<td>
Complex properties<br />
(<a href="examples/15_complex_properties.html">source</a>)
</td>
</tr>
<tr>
<td>
<a href="http://tweenjs.github.io/tween.js/examples/16_animate_an_array_of_values.html">
<img width="100" height="50" src="https://tweenjs.github.io/tween.js/assets/examples/16_animate_an_array_of_values.png" alt="Animate an array of values" />
</a>
</td>
<td>
Animate an array of values<br />
(<a href="examples/16_animate_an_array_of_values.html">source</a>)
</td>
</tr>
</table>
# 测试
你需要先安装 `npm`——它随 node.js 一起提供，因此请先安装它。 然后，cd 到 `tween.js` 的（或你克隆 repo 的任何地方）目录并运行：
```bash
npm install
```
运行测试：
```bash
npm test
```
如果你想添加任何功能或更改现有功能，你 _必须_ 运行测试以确保你没有破坏任何其他功能。任何拉取请求 (PR) 都需要在 `src/tests.ts` 中更新通过功能更改测试（或通过新功能或修复的新测试）才能接受 PR。 有关更多信息，请参阅 [贡献](CONTRIBUTING.md)。
# 使用 tween.js 的项目
[<img src="./assets/projects/11_lume.jpg" width="100" alt="Lume" />](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<EasingFunctionGroup & {
None: EasingFunction;
}>;
Quadratic: Readonly<EasingFunctionGroup>;
Cubic: Readonly<EasingFunctionGroup>;
Quartic: Readonly<EasingFunctionGroup>;
Quintic: Readonly<EasingFunctionGroup>;
Sinusoidal: Readonly<EasingFunctionGroup>;
Exponential: Readonly<EasingFunctionGroup>;
Circular: Readonly<EasingFunctionGroup>;
Elastic: Readonly<EasingFunctionGroup>;
Back: Readonly<EasingFunctionGroup>;
Bounce: Readonly<EasingFunctionGroup>;
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<T extends UnknownProps = any> {
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<Tween<any>>): 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<string, any>;
/**
* 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<Tween>;
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<any>[];
/**
* @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<any>[]) => 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<any>[]) => 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<EasingFunctionGroup & {
None: EasingFunction;
}>;
Quadratic: Readonly<EasingFunctionGroup>;
Cubic: Readonly<EasingFunctionGroup>;
Quartic: Readonly<EasingFunctionGroup>;
Quintic: Readonly<EasingFunctionGroup>;
Sinusoidal: Readonly<EasingFunctionGroup>;
Exponential: Readonly<EasingFunctionGroup>;
Circular: Readonly<EasingFunctionGroup>;
Elastic: Readonly<EasingFunctionGroup>;
Back: Readonly<EasingFunctionGroup>;
Bounce: Readonly<EasingFunctionGroup>;
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<any>[];
/**
* @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<any>[]) => 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<any>[]) => 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) {
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
SYMBOL INDEX (255 symbols across 29 files)
FILE: dist/tween.amd.js
function setNow (line 222) | function setNow(nowFunction) {
function Group (line 233) | function Group() {
function Sequence (line 405) | function Sequence() {
function Tween (line 425) | function Tween(object, group) {
FILE: dist/tween.cjs
function setNow (line 224) | function setNow(nowFunction) {
function Group (line 235) | function Group() {
function Sequence (line 407) | function Sequence() {
function Tween (line 427) | function Tween(object, group) {
FILE: dist/tween.d.ts
type EasingFunction (line 1) | type EasingFunction = (amount: number) => number;
type EasingFunctionGroup (line 2) | type EasingFunctionGroup = {
type InterpolationFunction (line 30) | type InterpolationFunction = (v: number[], k: number) => number;
class Tween (line 55) | class Tween<T extends UnknownProps = any> {
type UnknownProps (line 158) | type UnknownProps = Record<string, any>;
class Group (line 166) | class Group {
class Sequence (line 194) | class Sequence {
FILE: dist/tween.esm.js
function setNow (line 220) | function setNow(nowFunction) {
function Group (line 231) | function Group() {
function Sequence (line 403) | function Sequence() {
function Tween (line 423) | function Tween(object, group) {
FILE: dist/tween.umd.js
function setNow (line 226) | function setNow(nowFunction) {
function Group (line 237) | function Group() {
function Sequence (line 409) | function Sequence() {
function Tween (line 429) | function Tween(object, group) {
FILE: examples/09_relative_values.js
function animate (line 20) | function animate(time) {
function updateBox (line 25) | function updateBox(box, params) {
FILE: examples/10_yoyo.js
function animate (line 90) | function animate(time) {
function updateBox (line 96) | function updateBox(box, params) {
FILE: examples/example-projects/nodejs-commonjs/index.js
constant TWEEN (line 3) | const TWEEN = require('@tweenjs/tween.js')
FILE: examples/example-projects/plain-javascript-modules/animate.js
function animate (line 1) | function animate(group) {
FILE: examples/example-projects/plain-javascript-modules/index.js
function update (line 28) | function update() {
FILE: examples/example-projects/plain-typescript-modules/animate.js
function animate (line 1) | function animate(group) {
FILE: examples/example-projects/plain-typescript-modules/animate.ts
function animate (line 3) | function animate(group: Group) {
FILE: examples/example-projects/plain-typescript-modules/index.js
function update (line 21) | function update() {
FILE: examples/example-projects/plain-typescript-modules/index.ts
function update (line 29) | function update() {
FILE: examples/js/createGraph.js
function createGraph (line 5) | function createGraph(group, text, easingFn, width = 180, height = 100) {
FILE: examples/js/createPath.js
function createPath (line 32) | function createPath(group, text, interpolation, width = 240, height = 16...
FILE: examples/js/drawings.js
function drawRabbit (line 1) | function drawRabbit(context, x, y, color, opacity = 1) {
function drawFox (line 26) | function drawFox(context, x, y, color) {
FILE: scripts/write-version.js
function handleError (line 6) | function handleError(error) {
FILE: src/Easing.ts
type EasingFunction (line 1) | type EasingFunction = (amount: number) => number
type EasingFunctionGroup (line 3) | type EasingFunctionGroup = {
method None (line 15) | None(amount: number): number {
method In (line 18) | In(amount: number): number {
method Out (line 21) | Out(amount: number): number {
method InOut (line 24) | InOut(amount: number): number {
method In (line 30) | In(amount: number): number {
method Out (line 33) | Out(amount: number): number {
method InOut (line 36) | InOut(amount: number): number {
method In (line 46) | In(amount: number): number {
method Out (line 49) | Out(amount: number): number {
method InOut (line 52) | InOut(amount: number): number {
method In (line 61) | In(amount: number): number {
method Out (line 64) | Out(amount: number): number {
method InOut (line 67) | InOut(amount: number): number {
method In (line 77) | In(amount: number): number {
method Out (line 80) | Out(amount: number): number {
method InOut (line 83) | InOut(amount: number): number {
method In (line 93) | In(amount: number): number {
method Out (line 96) | Out(amount: number): number {
method InOut (line 99) | InOut(amount: number): number {
method In (line 105) | In(amount: number): number {
method Out (line 108) | Out(amount: number): number {
method InOut (line 111) | InOut(amount: number): number {
method In (line 129) | In(amount: number): number {
method Out (line 132) | Out(amount: number): number {
method InOut (line 135) | InOut(amount: number): number {
method In (line 144) | In(amount: number): number {
method Out (line 155) | Out(amount: number): number {
method InOut (line 165) | InOut(amount: number): number {
method In (line 185) | In(amount: number): number {
method Out (line 189) | Out(amount: number): number {
method InOut (line 193) | InOut(amount: number): number {
method In (line 203) | In(amount: number): number {
method Out (line 206) | Out(amount: number): number {
method InOut (line 217) | InOut(amount: number): number {
method generatePow (line 225) | generatePow(power = 4): EasingFunctionGroup {
FILE: src/Group.ts
class Group (line 10) | class Group {
method constructor (line 14) | constructor(...tweens: Tween[]) {
method getAll (line 18) | getAll(): Array<Tween> {
method removeAll (line 22) | removeAll(): void {
method add (line 26) | add(...tweens: Tween[]): void {
method remove (line 40) | remove(...tweens: Tween[]): void {
method allStopped (line 51) | allStopped() {
method update (line 64) | update(time: number = now(), preserve = true): void {
method onComplete (line 87) | onComplete(callback: (object: Tween[]) => void) {
FILE: src/Index.ts
constant TWEEN (line 27) | const TWEEN = mainGroup
FILE: src/Interpolation.ts
type InterpolationFunction (line 4) | type InterpolationFunction = (v: number[], k: number) => number
FILE: src/Now.ts
function setNow (line 7) | function setNow(nowFunction: Function) {
FILE: src/Sequence.ts
class Sequence (line 4) | class Sequence {
method nextId (line 7) | static nextId(): number {
FILE: src/Tween.ts
class Tween (line 20) | class Tween<T extends UnknownProps = any> {
method constructor (line 68) | constructor(object: T, group?: Group | true) {
method getId (line 82) | getId(): number {
method getCompleteCallback (line 86) | getCompleteCallback(): ((object: T) => void) | undefined {
method isPlaying (line 90) | isPlaying(): boolean {
method isPaused (line 94) | isPaused(): boolean {
method getDuration (line 98) | getDuration(): number {
method to (line 102) | to(target: UnknownProps, duration = 1000): this {
method duration (line 113) | duration(duration = 1000): this {
method dynamic (line 118) | dynamic(dynamic = false): this {
method start (line 123) | start(time: number = now(), overrideStartingValues = false): this {
method startFromCurrentValues (line 176) | startFromCurrentValues(time?: number): this {
method _setupProperties (line 180) | private _setupProperties(
method stop (line 278) | stop(): this {
method end (line 299) | end(): this {
method pause (line 305) | pause(time: number = now()): this {
method resume (line 317) | resume(time: number = now()): this {
method stopChainedTweens (line 331) | stopChainedTweens(): this {
method group (line 348) | group(group?: Group): this {
method remove (line 361) | remove() {
method delay (line 366) | delay(amount = 0): this {
method repeat (line 371) | repeat(times = 0): this {
method repeatDelay (line 377) | repeatDelay(amount?: number): this {
method yoyo (line 382) | yoyo(yoyo = false): this {
method easing (line 387) | easing(easingFunction: EasingFunction = Easing.Linear.None): this {
method interpolation (line 392) | interpolation(interpolationFunction: InterpolationFunction = Interpola...
method chain (line 398) | chain(...tweens: Array<Tween<any>>): this {
method onStart (line 403) | onStart(callback?: (object: T) => void): this {
method onEveryStart (line 408) | onEveryStart(callback?: (object: T) => void): this {
method onUpdate (line 413) | onUpdate(callback?: (object: T, elapsed: number) => void): this {
method onRepeat (line 418) | onRepeat(callback?: (object: T) => void): this {
method onComplete (line 423) | onComplete(callback?: (object: T) => void): this {
method onStop (line 428) | onStop(callback?: (object: T) => void): this {
method update (line 444) | update(time = now(), autoStart = Tween.autoStartOnUpdate): boolean {
method _updateProperties (line 563) | private _updateProperties(
method _handleRelativeValue (line 601) | private _handleRelativeValue(start: number, end: number | string): num...
method _swapEndStartRepeatValues (line 613) | private _swapEndStartRepeatValues(property: string): void {
type UnknownProps (line 627) | type UnknownProps = Record<string, any>
FILE: src/Version.ts
constant VERSION (line 1) | const VERSION = '25.0.0'
FILE: src/test-performance-now-fake.ts
function tickTime (line 8) | function tickTime(t: number): void {
function patchPerformanceNow (line 12) | function patchPerformanceNow(): void {
function restorePerformanceNow (line 23) | function restorePerformanceNow(): void {
FILE: src/tests.ts
method hello (line 6) | hello(test: Test): void {
method 'TWEEN.getAll' (line 12) | 'TWEEN.getAll'(test: Test): void {
method 'TWEEN object stores tweens automatically on start' (line 17) | 'TWEEN object stores tweens automatically on start'(test: Test): void {
method 'TWEEN.removeAll()' (line 29) | 'TWEEN.removeAll()'(test: Test): void {
method 'TWEEN.add()' (line 50) | 'TWEEN.add()'(test: Test): void {
method 'TWEEN.remove()' (line 62) | 'TWEEN.remove()'(test: Test): void {
method 'TWEEN.update() removes tweens when they are finished only if preserve is set to false' (line 78) | 'TWEEN.update() removes tweens when they are finished only if preserve i...
method 'TWEEN.update() does not remove tweens when they are finished with preserve true (default)' (line 103) | 'TWEEN.update() does not remove tweens when they are finished with prese...
method 'Unremoved tweens which have been updated past their finish time may go backward in time' (line 132) | 'Unremoved tweens which have been updated past their finish time may go ...
method constructor (line 170) | constructor(test: Test): void {
method 'Return the same tween instance for method chaining' (line 177) | 'Return the same tween instance for method chaining'(test: Test): void {
method 'Tween existing property' (line 225) | 'Tween existing property'(test: Test): void {
method 'Tween non-existing property' (line 237) | 'Tween non-existing property'(test: Test): void {
method 'Tween non-null property' (line 252) | 'Tween non-null property'(test: Test): void {
method 'Tween function property' (line 265) | 'Tween function property'(test: Test): void {
method 'Tween boolean property' (line 279) | 'Tween boolean property'(test: Test): void {
method 'Tween null property' (line 292) | 'Tween null property'(test: Test): void {
method 'Tween undefined property' (line 304) | 'Tween undefined property'(test: Test): void {
method 'Tween relative positive value' (line 318) | 'Tween relative positive value'(test: Test): void {
method 'Tween relative negative value' (line 330) | 'Tween relative negative value'(test: Test): void {
method 'String values without a + or - sign should not be interpreted as relative' (line 342) | 'String values without a + or - sign should not be interpreted as relati...
method 'Tween relative positive value, with yoyo' (line 354) | 'Tween relative positive value, with yoyo'(test: Test): void {
method 'Tween relative negative value, with yoyo' (line 375) | 'Tween relative negative value, with yoyo'(test: Test): void {
method 'Tween relative positive array interpolation values' (line 396) | 'Tween relative positive array interpolation values'(test: Test): void {
method 'String values without a + or - sign should not be interpreted as relative with array interpolation values' (line 423) | 'String values without a + or - sign should not be interpreted as relati...
method 'animate values in an array' (line 452) | 'animate values in an array'(test: Test): void {
method 'animate values in a nested array' (line 479) | 'animate values in a nested array'(test: Test): void {
method 'Test TWEEN.Tween.start()' (line 506) | 'Test TWEEN.Tween.start()'(test: Test): void {
method 'Ensure tweens start without calling start() method.' (line 522) | 'Ensure tweens start without calling start() method.'(test: Test): void {
method 'Test Tween.to() tweening towards a dynamic object' (line 548) | 'Test Tween.to() tweening towards a dynamic object'(test: Test): void {
method 'Test TWEEN.Tween.stop()' (line 588) | 'Test TWEEN.Tween.stop()'(test: Test): void {
method 'Test TWEEN.Tween.delay()' (line 604) | 'Test TWEEN.Tween.delay()'(test: Test): void {
method 'Test TWEEN.Tween.easing()' (line 627) | 'Test TWEEN.Tween.easing()'(test: Test): void {
method 'Test TWEEN.Tween.EasingFunctionGroup should be frozen' (line 640) | 'Test TWEEN.Tween.EasingFunctionGroup should be frozen'(test: Test): void {
method 'Test TWEEN.Easing should starts at 0.0, ends at 1.0. TWEEN.Easing.InOut() should be 0.5 at midpoint' (line 680) | 'Test TWEEN.Easing should starts at 0.0, ends at 1.0. TWEEN.Easing.InOut...
method 'Test TWEEN.Easing should pass a specific value' (line 708) | 'Test TWEEN.Easing should pass a specific value'(test: Test): void {
method 'Test TWEEN.interpolation should starts at values[0], ends at values[values.length-1].' (line 780) | 'Test TWEEN.interpolation should starts at values[0], ends at values[val...
method 'Test TWEEN.interpolation.Bezier should return a value equal to Linear if there are two values.' (line 799) | 'Test TWEEN.interpolation.Bezier should return a value equal to Linear i...
method 'Test TWEEN.interpolation should pass a specific value.' (line 814) | 'Test TWEEN.interpolation should pass a specific value.'(test: Test): vo...
method 'Test TWEEN.Tween.chain --with one tween' (line 832) | 'Test TWEEN.Tween.chain --with one tween'(test: Test): void {
method 'Test TWEEN.Tween.chain --with several tweens in an array' (line 880) | 'Test TWEEN.Tween.chain --with several tweens in an array'(test: Test): ...
method 'Test TWEEN.Tween.chain allows endless loops' (line 916) | 'Test TWEEN.Tween.chain allows endless loops'(test: Test): void {
method 'Test TWEEN.Tween.startFromCurrentValues' (line 1002) | 'Test TWEEN.Tween.startFromCurrentValues'(test: Test): void {
method 'Test TWEEN.Tween.onStart' (line 1035) | 'Test TWEEN.Tween.onStart'(test: Test): void {
method 'Test TWEEN.Tween.onEveryStart' (line 1061) | 'Test TWEEN.Tween.onEveryStart'(test: Test): void {
method 'Test TWEEN.Tween.onStop' (line 1093) | 'Test TWEEN.Tween.onStop'(test: Test): void {
method 'Test TWEEN.Tween.onUpdate' (line 1126) | 'Test TWEEN.Tween.onUpdate'(test: Test): void {
method 'Test TWEEN.Tween.onComplete' (line 1160) | 'Test TWEEN.Tween.onComplete'(test: Test): void {
method 'TWEEN.Tween does not repeat by default' (line 1193) | 'TWEEN.Tween does not repeat by default'(test: Test): void {
method 'Test single repeat happens only once' (line 1215) | 'Test single repeat happens only once'(test: Test): void {
method 'Test Infinity repeat happens forever' (line 1240) | 'Test Infinity repeat happens forever'(test: Test): void {
method 'Test tweening relatively with repeat' (line 1268) | 'Test tweening relatively with repeat'(test: Test): void {
method 'Test yoyo with repeat Infinity happens forever' (line 1298) | 'Test yoyo with repeat Infinity happens forever'(test: Test): void {
method 'Test yoyo with repeat 1 happens once' (line 1326) | 'Test yoyo with repeat 1 happens once'(test: Test): void {
method 'Test yoyo works with arrays' (line 1354) | 'Test yoyo works with arrays'(test: Test): void {
method 'Test yoyo can be stopped and restarted properly' (line 1380) | 'Test yoyo can be stopped and restarted properly'(test: Test): void {
method 'Test TWEEN.Tween.stopChainedTweens()' (line 1424) | 'Test TWEEN.Tween.stopChainedTweens()'(test: Test): void {
method 'Test TWEEN.Tween.chain progressess into chained tweens' (line 1472) | 'Test TWEEN.Tween.chain progressess into chained tweens'(test: Test): vo...
method 'Test that TWEEN.Tween.end sets the final values.' (line 1494) | 'Test that TWEEN.Tween.end sets the final values.'(test: Test): void {
method 'Test that TWEEN.Tween.end calls the onComplete callback of the tween.' (line 1523) | 'Test that TWEEN.Tween.end calls the onComplete callback of the tween.'(...
method 'Ensure Tween.end() works after stopping a tween.' (line 1536) | 'Ensure Tween.end() works after stopping a tween.'(test: Test): void {
method 'Test delay adds delay before each repeat' (line 1554) | 'Test delay adds delay before each repeat'(test: Test): void {
method 'Test repeatDelay adds delay before each repeat' (line 1589) | 'Test repeatDelay adds delay before each repeat'(test: Test): void {
method 'Test repeatDelay and delay can be used together' (line 1621) | 'Test repeatDelay and delay can be used together'(test: Test): void {
method 'TWEEN.Tween.onRepeat should not be called if repeat = 0 or default' (line 1653) | 'TWEEN.Tween.onRepeat should not be called if repeat = 0 or default'(tes...
method 'TWEEN.Tween.onRepeat should be called once if repeat = 1' (line 1677) | 'TWEEN.Tween.onRepeat should be called once if repeat = 1'(test: Test): ...
method 'TWEEN.Tween.onRepeat should be called every time if repeat = Infinity' (line 1707) | 'TWEEN.Tween.onRepeat should be called every time if repeat = Infinity'(...
method 'TWEEN.Tween.onRepeat should not be called if Tween.pause() or Tween.stop(), and should be called after Tween.resume() or restart' (line 1737) | 'TWEEN.Tween.onRepeat should not be called if Tween.pause() or Tween.sto...
method 'If Tween.delay is set, TWEEN.Tween.onRepeat should be called when repeat section finished' (line 1785) | 'If Tween.delay is set, TWEEN.Tween.onRepeat should be called when repea...
method 'If Tween.repeatDelay is set, TWEEN.Tween.onRepeat should be called when repeat section finished' (line 1831) | 'If Tween.repeatDelay is set, TWEEN.Tween.onRepeat should be called when...
method 'Test TWEEN.update() should reduce the repeat count' (line 1870) | 'Test TWEEN.update() should reduce the repeat count'(test: Test) {
method 'Test TWEEN.update() should reduce the repeat count multiple times' (line 1909) | 'Test TWEEN.update() should reduce the repeat count multiple times'(test...
method 'Test browser tab sleep with delay' (line 1924) | 'Test browser tab sleep with delay'(test: Test) {
method 'Test browser tab sleep with repeatDelay' (line 1941) | 'Test browser tab sleep with repeatDelay'(test: Test) {
method 'Test browser tab sleep with repeatDelay and delay' (line 1961) | 'Test browser tab sleep with repeatDelay and delay'(test: Test) {
method 'Tween.js compatible with Object.defineProperty getter / setters' (line 1981) | 'Tween.js compatible with Object.defineProperty getter / setters'(test: ...
method 'tween.isPlaying() is false before the tween starts' (line 2015) | 'tween.isPlaying() is false before the tween starts'(test: Test): void {
method 'tween.isPlaying() is true when a tween is started and before it ends' (line 2023) | 'tween.isPlaying() is true when a tween is started and before it ends'(t...
method 'tween.isPlaying() is false after a tween ends' (line 2031) | 'tween.isPlaying() is false after a tween ends'(test: Test): void {
method 'A zero-duration tween finishes at its starting time without an error.' (line 2042) | 'A zero-duration tween finishes at its starting time without an error.'(...
method 'Custom group.getAll()' (line 2058) | 'Custom group.getAll()'(test: Test): void {
method 'Custom group.onComplete() should be triggered when all Tweens in the group have reached their completion, and the child Tween.onComplete() should also be fired' (line 2063) | 'Custom group.onComplete() should be triggered when all Tweens in the gr...
method 'Custom group stores tweens instead of global TWEEN group' (line 2128) | 'Custom group stores tweens instead of global TWEEN group'(test: Test): ...
method "Custom group.removeAll() doesn't conflict with global TWEEN group" (line 2147) | "Custom group.removeAll() doesn't conflict with global TWEEN group"(test...
method "Global TWEEN.removeAll() doesn't conflict with custom group" (line 2179) | "Global TWEEN.removeAll() doesn't conflict with custom group"(test: Test...
method "Custom group.add() doesn't conflict with global TWEEN group, or vice versa" (line 2211) | "Custom group.add() doesn't conflict with global TWEEN group, or vice ve...
method "Custom group.update() doesn't conflict with global TWEEN group" (line 2228) | "Custom group.update() doesn't conflict with global TWEEN group"(test: T...
method "Global TWEEN.update() doesn't conflict with custom group" (line 2248) | "Global TWEEN.update() doesn't conflict with custom group"(test: Test): ...
method 'Ensure tweens work without any group' (line 2268) | 'Ensure tweens work without any group'(test: Test): void {
method 'Stopping a tween within an update callback will not cause an error.' (line 2294) | 'Stopping a tween within an update callback will not cause an error.'(te...
method 'Set the duration with .duration' (line 2322) | 'Set the duration with .duration'(test: Test): void {
method 'Get the duration with .getDuration' (line 2332) | 'Get the duration with .getDuration'(test: Test): void {
method "Tween.group sets the tween's group." (line 2340) | "Tween.group sets the tween's group."(test: Test): void {
method 'Test TWEEN.Tween.pause() and TWEEN.Tween.resume()' (line 2351) | 'Test TWEEN.Tween.pause() and TWEEN.Tween.resume()'(test: Test): void {
method 'Test TWEEN.Tween.pause() and TWEEN.Tween.resume(), without groups' (line 2392) | 'Test TWEEN.Tween.pause() and TWEEN.Tween.resume(), without groups'(test...
method 'Arrays in the object passed to to() are not modified by start() if dynamic is false.' (line 2427) | 'Arrays in the object passed to to() are not modified by start() if dyna...
method 'Arrays in the object passed to to() are modified by start() if dynamic is true.' (line 2439) | 'Arrays in the object passed to to() are modified by start() if dynamic ...
method 'Arrays in the object passed to to() are not modified by start() if they are not interpolation arrays, regardless of dynamic.' (line 2453) | 'Arrays in the object passed to to() are not modified by start() if they...
method 'Tween.js animate nested object' (line 2475) | 'Tween.js animate nested object'(test: Test): void {
method 'Tween.js animate nested object including relative value' (line 2500) | 'Tween.js animate nested object including relative value'(test: Test): v...
method 'Test TWEEN.Tween with nested objects' (line 2528) | 'Test TWEEN.Tween with nested objects'(test: Test): void {
method 'Test TWEEN.Tween.pause() and .resume() with nested objects' (line 2567) | 'Test TWEEN.Tween.pause() and .resume() with nested objects'(test: Test)...
method 'Test TWEEN.Easing.generatePow(1) equals Linear' (line 2633) | 'Test TWEEN.Easing.generatePow(1) equals Linear'(test: Test): void {
method 'Test TWEEN.Easing.generatePow(n) should pass 0.0, 0.5, 1.0' (line 2653) | 'Test TWEEN.Easing.generatePow(n) should pass 0.0, 0.5, 1.0'(test: Test)...
method "Test TWEEN.to(ends) shouldn't grow endless on ends value" (line 2677) | "Test TWEEN.to(ends) shouldn't grow endless on ends value"(test: Test): ...
method 'Test TWEEN.Tween.to() with a dynamic target provided as object' (line 2693) | 'Test TWEEN.Tween.to() with a dynamic target provided as object'(test: T...
method 'Test TWEEN.Tween.update() with no arguments' (line 2783) | 'Test TWEEN.Tween.update() with no arguments'(test: Test): void {
type Test (line 2811) | type Test = {
function toBeCloseTo (line 2822) | function toBeCloseTo(test: Test, numberA: number, numberB: number, numDi...
FILE: test/unit/nodeunit.js
function f (line 178) | function f(n) {
function quote (line 226) | function quote(string) {
function str (line 243) | function str(key, holder) {
function walk (line 421) | function walk(holder, key) {
function fail (line 1293) | function fail(actual, expected, message, operator, stackStartFunction) {
function _deepEqual (line 1353) | function _deepEqual(actual, expected) {
function isUndefinedOrNull (line 1402) | function isUndefinedOrNull(value) {
function isArguments (line 1406) | function isArguments(object) {
function objEquiv (line 1410) | function objEquiv(a, b) {
function expectedException (line 1479) | function expectedException(actual, expected) {
function _throws (line 1495) | function _throws(shouldThrow, block, expected, message) {
function run_once (line 1867) | function run_once() {
function setText (line 2069) | function setText(el, txt) {
function getOrCreate (line 2077) | function getOrCreate(tag, id) {
Condensed preview — 90 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (572K chars).
[
{
"path": ".editorconfig",
"chars": 255,
"preview": "# EditorConfig is awesome: http://EditorConfig.org\n\n# top-most EditorConfig file\nroot = true\n\n[*]\ncharset = utf-8\nindent"
},
{
"path": ".github/workflows/tests.yml",
"chars": 653,
"preview": "# This workflow will do a clean install of node dependencies, build the source code and run tests across different versi"
},
{
"path": ".gitignore",
"chars": 67,
"preview": ".DS_Store\n.idea\n.vscode\n.tmp\nbuild/npm*\nnode_modules\nnpm-debug.log\n"
},
{
"path": ".npmignore",
"chars": 57,
"preview": "assets/\nbower.json\ndocs/\nexamples/\nCONTRIBUTING.md\ntest/\n"
},
{
"path": ".prettierignore",
"chars": 105,
"preview": "dist/\n.tmp/\n.vscode/\nexamples/js/stats.min.js\nexamples/example-projects/plain-typescript-modules/**/*.js\n"
},
{
"path": ".prettierrc.cjs",
"chars": 159,
"preview": "module.exports = {\n\tarrowParens: 'avoid',\n\tbracketSpacing: false,\n\tprintWidth: 120,\n\tsemi: false,\n\tsingleQuote: true,\n\tt"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3232,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "CONTRIBUTING.md",
"chars": 1373,
"preview": "# Contributing\n\n## Code of conduct\n\nPlease note that this project is released with a [Contributor Code of Conduct](./COD"
},
{
"path": "LICENSE",
"chars": 1166,
"preview": "The MIT License\n\nCopyright (c) 2010-2012 Tween.js authors.\n\nEasing equations Copyright (c) 2001 Robert Penner http://rob"
},
{
"path": "README.md",
"chars": 16049,
"preview": "# tween.js\n\nJavaScript (TypeScript) tweening engine for easy animations, incorporating optimised Robert Penner's equatio"
},
{
"path": "README_zh-CN.md",
"chars": 11730,
"preview": "# tween.js\n\n用于简单动画的 JavaScript (TypeScript) 补间引擎，结合优化的 Robert Penner 方程式。\n\n[![NPM Version][npm-image]][npm-url]\n[![CDNJS"
},
{
"path": "assets/style.css",
"chars": 448,
"preview": "body {\n\tbackground: #fff;\n\tfont-family: Helvetica, Arial, sans;\n}\n\na {\n\tcolor: #333;\n}\n\nh2 {\n\tfont-weight: normal;\n}\n\n#i"
},
{
"path": "dist/tween.amd.js",
"chars": 50433,
"preview": "define(['exports'], (function (exports) { 'use strict';\n\n /**\n * The Ease class provides a collection of easing f"
},
{
"path": "dist/tween.cjs",
"chars": 44725,
"preview": "'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\n/**\n * The Ease class provides a collecti"
},
{
"path": "dist/tween.d.ts",
"chars": 18419,
"preview": "type EasingFunction = (amount: number) => number;\ntype EasingFunctionGroup = {\n In: EasingFunction;\n Out: EasingFu"
},
{
"path": "dist/tween.esm.js",
"chars": 44403,
"preview": "/**\n * The Ease class provides a collection of easing functions for use with tween.js.\n */\nvar Easing = Object.freeze({\n"
},
{
"path": "dist/tween.umd.js",
"chars": 50726,
"preview": "(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n "
},
{
"path": "docs/contributor_guide.md",
"chars": 5476,
"preview": "# tween.js contributor guide\n\nMore languages: [English](./contributor_guide.md), [简体中文](./contributor_guide_zh-CN.md)\n\nT"
},
{
"path": "docs/contributor_guide_zh-CN.md",
"chars": 2746,
"preview": "# tween.js 贡献者指南\n\n更多语言: [English](./contributor_guide.md), [简体中文](./contributor_guide_zh-CN.md)\n\n本指南适用于想要向库贡献的人，或者想了解背后的"
},
{
"path": "docs/user_guide.md",
"chars": 27056,
"preview": "# tween.js user guide\n\nMore languages: [English](./user_guide.md), [简体中文](./user_guide_zh-CN.md)\n\n_**NOTE** This is a wo"
},
{
"path": "docs/user_guide_zh-CN.md",
"chars": 14205,
"preview": "## tween.js 用户指南\n\n更多语言: [English](./user_guide.md), [简体中文](./user_guide_zh-CN.md)\n\n中文用户指南最近更新为 Tween.js v20.0.3\n\n_**NOTE"
},
{
"path": "examples/00_hello_world.html",
"chars": 1789,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / hello world!</title>\n\t\t<meta http-equiv=\"Content-Type\" cont"
},
{
"path": "examples/01_bars.html",
"chars": 2212,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / bars</title>\n\t\t<meta http-equiv=\"Content-Type\" content=\"tex"
},
{
"path": "examples/02_black_and_red.html",
"chars": 2255,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / Black and Red</title>\n\t\t<meta http-equiv=\"Content-Type\" con"
},
{
"path": "examples/03_graphs.html",
"chars": 3944,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / graphs</title>\n\t\t<meta http-equiv=\"Content-Type\" content=\"t"
},
{
"path": "examples/04_simplest.html",
"chars": 1222,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / simplest possible example!</title>\n\t\t<meta http-equiv=\"Cont"
},
{
"path": "examples/05_video_and_time.html",
"chars": 1841,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / video and time</title>\n\t\t<meta http-equiv=\"Content-Type\" co"
},
{
"path": "examples/06_array_interpolation.html",
"chars": 1603,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / array interpolation</title>\n\t\t<meta http-equiv=\"Content-Typ"
},
{
"path": "examples/07_dynamic_to.html",
"chars": 2005,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / dynamic to object</title>\n\t\t<meta http-equiv=\"Content-Type\""
},
{
"path": "examples/07a_dynamic_to_two_array_values.html",
"chars": 2606,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / dynamic to interpolation array</title>\n\t\t<meta http-equiv=\""
},
{
"path": "examples/07b_dynamic_to_an_array_of_values.html",
"chars": 4441,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / dynamic to large interpolation array</title>\n\t\t<meta http-e"
},
{
"path": "examples/08_repeat.html",
"chars": 2419,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / repeat</title>\n\t\t<meta http-equiv=\"Content-Type\" content=\"t"
},
{
"path": "examples/09_relative_values.html",
"chars": 1007,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / relative values</title>\n\t\t<meta http-equiv=\"Content-Type\" c"
},
{
"path": "examples/09_relative_values.js",
"chars": 681,
"preview": "import {Tween, Group, Easing} from '@tweenjs/tween.js'\n\nconst target1 = document.getElementById('target1')\nconst tween ="
},
{
"path": "examples/10_yoyo.html",
"chars": 1956,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / yoyo</title>\n\t\t<meta http-equiv=\"Content-Type\" content=\"tex"
},
{
"path": "examples/10_yoyo.js",
"chars": 2197,
"preview": "// @ts-check\nimport {Tween, Group, Easing} from 'tweenjs'\n\nconst group = new Group()\n\nanimate()\n\nconst target1 = documen"
},
{
"path": "examples/11_stop_all_chained_tweens.html",
"chars": 2458,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / stop chained</title>\n\t\t<meta http-equiv=\"Content-Type\" cont"
},
{
"path": "examples/12_graphs_custom_functions.html",
"chars": 2938,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / graphs for custom easing functions</title>\n\t\t<meta http-equ"
},
{
"path": "examples/13_relative_start_time.html",
"chars": 1953,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / relative start time</title>\n\t\t<meta http-equiv=\"Content-Typ"
},
{
"path": "examples/14_pause_tween.html",
"chars": 1685,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / pause tween</title>\n\t\t<meta http-equiv=\"Content-Type\" conte"
},
{
"path": "examples/15_complex_properties.html",
"chars": 1538,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / complex properties</title>\n\t\t<meta http-equiv=\"Content-Type"
},
{
"path": "examples/16_animate_an_array_of_values.html",
"chars": 1747,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / animate an array of values</title>\n\t\t<meta http-equiv=\"Cont"
},
{
"path": "examples/17_generate_pow.html",
"chars": 1928,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / easing with a power of number</title>\n\t\t<meta http-equiv=\"C"
},
{
"path": "examples/18_start_from_current_values.html",
"chars": 2362,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / hello world!</title>\n\t\t<meta http-equiv=\"Content-Type\" cont"
},
{
"path": "examples/19_end_tween.html",
"chars": 1336,
"preview": "<!-- shows what happens when we call tween.end() -->\n\n<style>\n\t#box {\n\t\tbackground-color: deeppink;\n\t\twidth: 100px;\n\t\the"
},
{
"path": "examples/css/style.css",
"chars": 696,
"preview": "body {\n\tbackground: #fff;\n\tfont-family: Helvetica, Arial, sans;\n}\n\na {\n\tcolor: #333;\n}\n\nh2 {\n\tfont-weight: normal;\n}\n\nbu"
},
{
"path": "examples/example-projects/nodejs-commonjs/README.md",
"chars": 92,
"preview": "This example shows that Tween.js can be imported into a Node.js project in CommonJS format.\n"
},
{
"path": "examples/example-projects/nodejs-commonjs/index.js",
"chars": 187,
"preview": "// Ensure we can import into Node CommonJS:\n\nconst TWEEN = require('@tweenjs/tween.js')\n\nconsole.log(Object.keys(TWEEN))"
},
{
"path": "examples/example-projects/nodejs-commonjs/package.json",
"chars": 225,
"preview": "{\n\t\"description\": \"Node.js project in CommonJS format, importing Tween in CommonJS format.\",\n\t\"type\": \"commonjs\",\n\t\"scri"
},
{
"path": "examples/example-projects/nodejs-esmodules/README.md",
"chars": 93,
"preview": "This example shows that Tween.js can be imported into a Node.js project in ES Module format.\n"
},
{
"path": "examples/example-projects/nodejs-esmodules/index.js",
"chars": 182,
"preview": "// Ensure we can import into Node ESM:\n\nimport * as TWEEN from '@tweenjs/tween.js'\n\nconsole.log(Object.keys(TWEEN))\n\ncon"
},
{
"path": "examples/example-projects/nodejs-esmodules/package.json",
"chars": 223,
"preview": "{\n\t\"description\": \"Node.js project in CommonJS format, importing Tween in CommonJS format.\",\n\t\"type\": \"module\",\n\t\"script"
},
{
"path": "examples/example-projects/plain-javascript-modules/README.md",
"chars": 259,
"preview": "This example is written in JavaScript without any build, using JavaScript\nmodules to organize code into separate files a"
},
{
"path": "examples/example-projects/plain-javascript-modules/animate.js",
"chars": 189,
"preview": "export function animate(group) {\n\tfunction loop(time) {\n\t\tgroup.update(time)\n\t\tconst stopped = group.allStopped()\n\t\tif ("
},
{
"path": "examples/example-projects/plain-javascript-modules/index.html",
"chars": 1111,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / hello world (JS modules)!</title>\n\t\t<link href=\"./style.css"
},
{
"path": "examples/example-projects/plain-javascript-modules/index.js",
"chars": 844,
"preview": "import * as TWEEN from '@tweenjs/tween.js'\n\n// For sake of example, we put animate() in a separate file, and import it i"
},
{
"path": "examples/example-projects/plain-javascript-modules/package.json",
"chars": 260,
"preview": "{\n\t\"description\": \"Plain JS modules in a browser.\",\n\t\"type\": \"module\",\n\t\"scripts\": {\n\t\t\"start\": \"npm run serve\",\n\t\t\"serv"
},
{
"path": "examples/example-projects/plain-javascript-modules/style.css",
"chars": 788,
"preview": "html {\n\ttransform-style: preserve-3d;\n\tperspective: 800px;\n}\nbody {\n\tbackground: #fff;\n\tfont-family: Helvetica, Arial, s"
},
{
"path": "examples/example-projects/plain-typescript-modules/README.md",
"chars": 849,
"preview": "This example is written in TypeScript and requires running a build step, using\nJavaScript module format to organize code"
},
{
"path": "examples/example-projects/plain-typescript-modules/animate.js",
"chars": 231,
"preview": "export function animate(group) {\n function loop(time) {\n group.update(time);\n const stopped = group.all"
},
{
"path": "examples/example-projects/plain-typescript-modules/animate.ts",
"chars": 250,
"preview": "import type {Group} from '@tweenjs/tween.js'\n\nexport function animate(group: Group) {\n\tfunction loop(time: number) {\n\t\tg"
},
{
"path": "examples/example-projects/plain-typescript-modules/index.html",
"chars": 1162,
"preview": "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Tween.js / hello world (JS modules)!</title>\n\t\t<link href=\"./style.css"
},
{
"path": "examples/example-projects/plain-typescript-modules/index.js",
"chars": 1026,
"preview": "import * as TWEEN from '@tweenjs/tween.js';\n// For sake of example, we put animate() in a separate file, and import it i"
},
{
"path": "examples/example-projects/plain-typescript-modules/index.ts",
"chars": 990,
"preview": "import * as TWEEN from '@tweenjs/tween.js'\n\n// For sake of example, we put animate() in a separate file, and import it i"
},
{
"path": "examples/example-projects/plain-typescript-modules/package.json",
"chars": 370,
"preview": "{\n\t\"description\": \"TS compiled to plain JS modules for running in browser.\",\n\t\"type\": \"module\",\n\t\"scripts\": {\n\t\t\"start\":"
},
{
"path": "examples/example-projects/plain-typescript-modules/style.css",
"chars": 788,
"preview": "html {\n\ttransform-style: preserve-3d;\n\tperspective: 800px;\n}\nbody {\n\tbackground: #fff;\n\tfont-family: Helvetica, Arial, s"
},
{
"path": "examples/example-projects/plain-typescript-modules/tsconfig.json",
"chars": 129,
"preview": "{\n\t\"compilerOptions\": {\n\t\t\"module\": \"ESNext\",\n\t\t\"moduleResolution\": \"node\",\n\t\t\"target\": \"ESNext\"\n\t},\n\t\"include\": [\"./**/"
},
{
"path": "examples/js/createGraph.js",
"chars": 1750,
"preview": "// @ts-check\nimport {Tween, Easing} from '../../dist/tween.esm.js'\nimport {toPhysicalPx} from './toPhysicalPx.js'\n\nexpor"
},
{
"path": "examples/js/createPath.js",
"chars": 2453,
"preview": "// @ts-check\nimport {Tween, Easing} from '../../dist/tween.esm.js'\nimport {toPhysicalPx} from './toPhysicalPx.js'\n\nconst"
},
{
"path": "examples/js/drawings.js",
"chars": 1027,
"preview": "export function drawRabbit(context, x, y, color, opacity = 1) {\n\tcontext.save()\n\n\tcontext.fillStyle = color\n\tcontext.glo"
},
{
"path": "examples/js/toPhysicalPx.js",
"chars": 62,
"preview": "export const toPhysicalPx = cssPx => cssPx * devicePixelRatio\n"
},
{
"path": "package.json",
"chars": 2122,
"preview": "{\n\t\"name\": \"@tweenjs/tween.js\",\n\t\"description\": \"Simple and fast tweening engine with optimised Robert Penner's equation"
},
{
"path": "rollup.config.js",
"chars": 1037,
"preview": "import dts from 'rollup-plugin-dts'\n\nexport default [\n\t{\n\t\tinput: '.tmp/Index.js',\n\t\t// https://github.com/rollup/rollup"
},
{
"path": "scripts/write-version.js",
"chars": 387,
"preview": "import fs from 'fs'\nimport pkg from '../package.json' with {type: 'json'}\n\nconst {version} = pkg\n\nfunction handleError(e"
},
{
"path": "src/Easing.ts",
"chars": 5887,
"preview": "export type EasingFunction = (amount: number) => number\n\nexport type EasingFunctionGroup = {\n\tIn: EasingFunction\n\tOut: E"
},
{
"path": "src/Group.ts",
"chars": 3229,
"preview": "import now from './Now'\nimport type {Tween} from './Tween'\n\n/**\n * Controlling groups of tweens\n *\n * Using the TWEEN si"
},
{
"path": "src/Index.ts",
"chars": 10401,
"preview": "/**\n * Tween.js - Licensed under the MIT license\n * https://github.com/tweenjs/tween.js\n * -----------------------------"
},
{
"path": "src/Interpolation.ts",
"chars": 2138,
"preview": "/**\n *\n */\nexport type InterpolationFunction = (v: number[], k: number) => number\n\n/**\n *\n */\nconst Interpolation = {\n\tL"
},
{
"path": "src/Now.ts",
"chars": 194,
"preview": "let _nowFunc: Function = () => performance.now()\n\nconst now = (): number => {\n\treturn _nowFunc()\n}\n\nexport function setN"
},
{
"path": "src/Sequence.ts",
"chars": 138,
"preview": "/**\n * Utils\n */\nexport default class Sequence {\n\tprivate static _nextId = 0\n\n\tstatic nextId(): number {\n\t\treturn Sequen"
},
{
"path": "src/Tween.ts",
"chars": 16762,
"preview": "/**\n * Tween.js - Licensed under the MIT license\n * https://github.com/tweenjs/tween.js\n * -----------------------------"
},
{
"path": "src/Version.ts",
"chars": 48,
"preview": "const VERSION = '25.0.0'\nexport default VERSION\n"
},
{
"path": "src/mainGroup.ts",
"chars": 66,
"preview": "import Group from './Group'\n\nexport const mainGroup = new Group()\n"
},
{
"path": "src/test-performance-now-fake.ts",
"chars": 502,
"preview": "/**\n * @fileoverview Tool for patching performance.now so we can fake it in the\n * tests.\n */\n\nlet time = 0\n\nexport func"
},
{
"path": "src/tests.ts",
"chars": 62920,
"preview": "import {tickTime, patchPerformanceNow, restorePerformanceNow} from './test-performance-now-fake'\nimport * as TWEEN from "
},
{
"path": "test/unit/nodeunit.html",
"chars": 341,
"preview": "<html>\n\t<head>\n\t\t<title>nodeunit based tests</title>\n\t\t<script src=\"nodeunit.js\"></script>\n\t\t<script src=\"../../dist/twe"
},
{
"path": "test/unit/nodeunit.js",
"chars": 58446,
"preview": "/*!\n * Nodeunit\n * https://github.com/caolan/nodeunit\n * Copyright (c) 2010 Caolan McMahon\n * MIT Licensed\n *\n * json2.j"
},
{
"path": "test/unit/nodeunitheadless.cjs",
"chars": 206,
"preview": "const {tests} = require('../../.tmp/tests.cjs')\nmodule.exports = {tween: tests}\n\n// CONTINUE: got html tests running, ha"
},
{
"path": "tsconfig.json",
"chars": 376,
"preview": "{\n\t\"compilerOptions\": {\n\t\t\"baseUrl\": \".\",\n\t\t\"outDir\": \"./.tmp\",\n\t\t\"declaration\": true,\n\t\t\"strict\": true,\n\t\t\"sourceMap\": "
}
]
// ... and 1 more files (download for full content)
About this extraction
This page contains the full source code of the tweenjs/tween.js GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 90 files (512.7 KB), approximately 148.0k tokens, and a symbol index with 255 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.