@tweenjs/tween.js 18.3.2 → 18.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -34
- package/dist/index.d.ts +273 -0
- package/dist/tween.amd.js +792 -961
- package/dist/tween.cjs.js +786 -955
- package/dist/tween.esm.js +786 -955
- package/dist/tween.umd.js +795 -964
- package/package.json +54 -31
- package/.eslintrc.json +0 -100
- package/.travis.yml +0 -26
- package/CODE_OF_CONDUCT.md +0 -75
- package/README_zh-CN.md +0 -297
- package/rollup.config.js +0 -24
- package/src/Tween.js +0 -961
package/README.md
CHANGED
@@ -15,28 +15,29 @@ Do you use tween.js? If you have some time, please fill out [this short survey](
|
|
15
15
|
---
|
16
16
|
|
17
17
|
```javascript
|
18
|
-
const box = document.createElement('div')
|
19
|
-
box.style.setProperty('background-color', '#008800')
|
20
|
-
box.style.setProperty('width', '100px')
|
21
|
-
box.style.setProperty('height', '100px')
|
22
|
-
document.body.appendChild(box)
|
18
|
+
const box = document.createElement('div')
|
19
|
+
box.style.setProperty('background-color', '#008800')
|
20
|
+
box.style.setProperty('width', '100px')
|
21
|
+
box.style.setProperty('height', '100px')
|
22
|
+
document.body.appendChild(box)
|
23
23
|
|
24
24
|
// Setup the animation loop.
|
25
25
|
function animate(time) {
|
26
|
-
|
27
|
-
|
26
|
+
requestAnimationFrame(animate)
|
27
|
+
TWEEN.update(time)
|
28
28
|
}
|
29
|
-
requestAnimationFrame(animate)
|
29
|
+
requestAnimationFrame(animate)
|
30
30
|
|
31
|
-
const coords = {
|
31
|
+
const coords = {x: 0, y: 0} // Start at (0, 0)
|
32
32
|
const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
33
|
+
.to({x: 300, y: 200}, 1000) // Move to (300, 200) in 1 second.
|
34
|
+
.easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
|
35
|
+
.onUpdate(() => {
|
36
|
+
// Called after tween.js updates 'coords'.
|
37
|
+
// Move 'box' to the position described by 'coords' with a CSS translation.
|
38
|
+
box.style.setProperty('transform', `translate(${coords.x}px, ${coords.y}px)`)
|
39
|
+
})
|
40
|
+
.start() // Start the tween immediately.
|
40
41
|
```
|
41
42
|
|
42
43
|
[Test it with CodePen](https://codepen.io/mikebolt/pen/zzzvZg)
|
@@ -54,10 +55,10 @@ npm run build
|
|
54
55
|
|
55
56
|
This will create some builds in the `dist` directory. There are currently four different builds of the library:
|
56
57
|
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
58
|
+
- UMD : tween.umd.js
|
59
|
+
- AMD : tween.amd.js
|
60
|
+
- CommonJS : tween.cjs.js
|
61
|
+
- ES6 Module : tween.es.js
|
61
62
|
|
62
63
|
You are now able to copy tween.umd.js into your project, then include it with
|
63
64
|
a script tag. This will add TWEEN to the global scope.
|
@@ -77,25 +78,25 @@ npm i @tweenjs/tween.js@^18
|
|
77
78
|
If you are using Node, Webpack, or Browserify, then you can now use the following to include tween.js:
|
78
79
|
|
79
80
|
```javascript
|
80
|
-
const TWEEN = require('@tweenjs/tween.js')
|
81
|
+
const TWEEN = require('@tweenjs/tween.js')
|
81
82
|
```
|
82
83
|
|
83
84
|
## Features
|
84
85
|
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
86
|
+
- Does one thing and one thing only: tween properties
|
87
|
+
- Doesn't take care of CSS units (e.g. appending `px`)
|
88
|
+
- Doesn't interpolate colours
|
89
|
+
- Easing functions are reusable outside of Tween
|
90
|
+
- Can also use custom easing functions
|
90
91
|
|
91
92
|
## Documentation
|
92
93
|
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
94
|
+
- [User guide](./docs/user_guide.md)
|
95
|
+
- [Contributor guide](./docs/contributor_guide.md)
|
96
|
+
- [Tutorial](http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/) using tween.js with three.js
|
97
|
+
- Also: [libtween](https://github.com/jsm174/libtween), a port of tween.js to C by [jsm174](https://github.com/jsm174)
|
98
|
+
- Also: [es6-tween](https://github.com/tweenjs/es6-tween), a port of tween.js to ES6/Harmony by [dalisoft](https://github.com/dalisoft)
|
99
|
+
- [Understanding tween.js](https://mikebolt.me/article/understanding-tweenjs.html)
|
99
100
|
|
100
101
|
## Examples
|
101
102
|
|
@@ -249,7 +250,7 @@ npm test
|
|
249
250
|
|
250
251
|
every time you want to run the tests.
|
251
252
|
|
252
|
-
If you want to add any feature or change existing features, you
|
253
|
+
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. If you send a pull request (PR) to add something new and it doesn't have tests, or the tests don't pass, the PR won't be accepted. See [contributing](CONTRIBUTING.md) for more information.
|
253
254
|
|
254
255
|
## People
|
255
256
|
|
@@ -280,4 +281,3 @@ Maintainers: [mikebolt](https://github.com/mikebolt), [sole](https://github.com/
|
|
280
281
|
[flattr-url]: https://flattr.com/thing/45014/tween-js
|
281
282
|
[cdnjs-image]: https://img.shields.io/cdnjs/v/tween.js.svg
|
282
283
|
[cdnjs-url]: https://cdnjs.com/libraries/tween.js
|
283
|
-
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,273 @@
|
|
1
|
+
declare module "TWEEN" {
|
2
|
+
|
3
|
+
type EasingFunction = (amount: number) => number;
|
4
|
+
|
5
|
+
/**
|
6
|
+
* The Ease class provides a collection of easing functions for use with tween.js.
|
7
|
+
*/
|
8
|
+
const Easing: {
|
9
|
+
Linear: {
|
10
|
+
None: (amount: number) => number;
|
11
|
+
};
|
12
|
+
Quadratic: {
|
13
|
+
In: (amount: number) => number;
|
14
|
+
Out: (amount: number) => number;
|
15
|
+
InOut: (amount: number) => number;
|
16
|
+
};
|
17
|
+
Cubic: {
|
18
|
+
In: (amount: number) => number;
|
19
|
+
Out: (amount: number) => number;
|
20
|
+
InOut: (amount: number) => number;
|
21
|
+
};
|
22
|
+
Quartic: {
|
23
|
+
In: (amount: number) => number;
|
24
|
+
Out: (amount: number) => number;
|
25
|
+
InOut: (amount: number) => number;
|
26
|
+
};
|
27
|
+
Quintic: {
|
28
|
+
In: (amount: number) => number;
|
29
|
+
Out: (amount: number) => number;
|
30
|
+
InOut: (amount: number) => number;
|
31
|
+
};
|
32
|
+
Sinusoidal: {
|
33
|
+
In: (amount: number) => number;
|
34
|
+
Out: (amount: number) => number;
|
35
|
+
InOut: (amount: number) => number;
|
36
|
+
};
|
37
|
+
Exponential: {
|
38
|
+
In: (amount: number) => number;
|
39
|
+
Out: (amount: number) => number;
|
40
|
+
InOut: (amount: number) => number;
|
41
|
+
};
|
42
|
+
Circular: {
|
43
|
+
In: (amount: number) => number;
|
44
|
+
Out: (amount: number) => number;
|
45
|
+
InOut: (amount: number) => number;
|
46
|
+
};
|
47
|
+
Elastic: {
|
48
|
+
In: (amount: number) => number;
|
49
|
+
Out: (amount: number) => number;
|
50
|
+
InOut: (amount: number) => number;
|
51
|
+
};
|
52
|
+
Back: {
|
53
|
+
In: (amount: number) => number;
|
54
|
+
Out: (amount: number) => number;
|
55
|
+
InOut: (amount: number) => number;
|
56
|
+
};
|
57
|
+
Bounce: {
|
58
|
+
In: (amount: number) => number;
|
59
|
+
Out: (amount: number) => number;
|
60
|
+
InOut: (amount: number) => number;
|
61
|
+
};
|
62
|
+
};
|
63
|
+
|
64
|
+
let NOW: () => number;
|
65
|
+
|
66
|
+
/**
|
67
|
+
*
|
68
|
+
*/
|
69
|
+
type InterpolationFunction = (v: number[], k: number) => number;
|
70
|
+
|
71
|
+
/**
|
72
|
+
*
|
73
|
+
*/
|
74
|
+
const Interpolation: {
|
75
|
+
Linear: (v: number[], k: number) => number;
|
76
|
+
Bezier: (v: number[], k: number) => number;
|
77
|
+
CatmullRom: (v: number[], k: number) => number;
|
78
|
+
Utils: {
|
79
|
+
Linear: (p0: number, p1: number, t: number) => number;
|
80
|
+
Bernstein: (n: number, i: number) => number;
|
81
|
+
Factorial: (n: number) => number;
|
82
|
+
CatmullRom: (p0: number, p1: number, p2: number, p3: number, t: number) => number;
|
83
|
+
};
|
84
|
+
};
|
85
|
+
|
86
|
+
/**
|
87
|
+
* Utils
|
88
|
+
*/
|
89
|
+
class Sequence {
|
90
|
+
private static _nextId;
|
91
|
+
static nextId(): number;
|
92
|
+
}
|
93
|
+
|
94
|
+
const VERSION = "18.6.0";
|
95
|
+
|
96
|
+
/**
|
97
|
+
* Controlling groups of tweens
|
98
|
+
*
|
99
|
+
* Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components.
|
100
|
+
* In these cases, you may want to create your own smaller groups of tween
|
101
|
+
*/
|
102
|
+
class Main extends Group {
|
103
|
+
version: string;
|
104
|
+
now: () => number;
|
105
|
+
Group: typeof Group;
|
106
|
+
Easing: {
|
107
|
+
Linear: {
|
108
|
+
None: (amount: number) => number;
|
109
|
+
};
|
110
|
+
Quadratic: {
|
111
|
+
In: (amount: number) => number;
|
112
|
+
Out: (amount: number) => number;
|
113
|
+
InOut: (amount: number) => number;
|
114
|
+
};
|
115
|
+
Cubic: {
|
116
|
+
In: (amount: number) => number;
|
117
|
+
Out: (amount: number) => number;
|
118
|
+
InOut: (amount: number) => number;
|
119
|
+
};
|
120
|
+
Quartic: {
|
121
|
+
In: (amount: number) => number;
|
122
|
+
Out: (amount: number) => number;
|
123
|
+
InOut: (amount: number) => number;
|
124
|
+
};
|
125
|
+
Quintic: {
|
126
|
+
In: (amount: number) => number;
|
127
|
+
Out: (amount: number) => number;
|
128
|
+
InOut: (amount: number) => number;
|
129
|
+
};
|
130
|
+
Sinusoidal: {
|
131
|
+
In: (amount: number) => number;
|
132
|
+
Out: (amount: number) => number;
|
133
|
+
InOut: (amount: number) => number;
|
134
|
+
};
|
135
|
+
Exponential: {
|
136
|
+
In: (amount: number) => number;
|
137
|
+
Out: (amount: number) => number;
|
138
|
+
InOut: (amount: number) => number;
|
139
|
+
};
|
140
|
+
Circular: {
|
141
|
+
In: (amount: number) => number;
|
142
|
+
Out: (amount: number) => number;
|
143
|
+
InOut: (amount: number) => number;
|
144
|
+
};
|
145
|
+
Elastic: {
|
146
|
+
In: (amount: number) => number;
|
147
|
+
Out: (amount: number) => number;
|
148
|
+
InOut: (amount: number) => number;
|
149
|
+
};
|
150
|
+
Back: {
|
151
|
+
In: (amount: number) => number;
|
152
|
+
Out: (amount: number) => number;
|
153
|
+
InOut: (amount: number) => number;
|
154
|
+
};
|
155
|
+
Bounce: {
|
156
|
+
In: (amount: number) => number;
|
157
|
+
Out: (amount: number) => number;
|
158
|
+
InOut: (amount: number) => number;
|
159
|
+
};
|
160
|
+
};
|
161
|
+
Interpolation: {
|
162
|
+
Linear: (v: number[], k: number) => number;
|
163
|
+
Bezier: (v: number[], k: number) => number;
|
164
|
+
CatmullRom: (v: number[], k: number) => number;
|
165
|
+
Utils: {
|
166
|
+
Linear: (p0: number, p1: number, t: number) => number;
|
167
|
+
Bernstein: (n: number, i: number) => number;
|
168
|
+
Factorial: (n: number) => number;
|
169
|
+
CatmullRom: (p0: number, p1: number, p2: number, p3: number, t: number) => number;
|
170
|
+
};
|
171
|
+
};
|
172
|
+
nextId: typeof Sequence.nextId;
|
173
|
+
Tween: typeof Tween;
|
174
|
+
}
|
175
|
+
|
176
|
+
const TWEEN: Main;
|
177
|
+
|
178
|
+
/**
|
179
|
+
* Tween.js - Licensed under the MIT license
|
180
|
+
* https://github.com/tweenjs/tween.js
|
181
|
+
* ----------------------------------------------
|
182
|
+
*
|
183
|
+
* See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
|
184
|
+
* Thank you all, you're awesome!
|
185
|
+
*/
|
186
|
+
|
187
|
+
|
188
|
+
|
189
|
+
class Tween<T extends UnknownProps> {
|
190
|
+
private _object;
|
191
|
+
private _group;
|
192
|
+
private _isPaused;
|
193
|
+
private _pauseStart;
|
194
|
+
private _valuesStart;
|
195
|
+
private _valuesEnd;
|
196
|
+
private _valuesStartRepeat;
|
197
|
+
private _duration;
|
198
|
+
private _initialRepeat;
|
199
|
+
private _repeat;
|
200
|
+
private _repeatDelayTime?;
|
201
|
+
private _yoyo;
|
202
|
+
private _isPlaying;
|
203
|
+
private _reversed;
|
204
|
+
private _delayTime;
|
205
|
+
private _startTime;
|
206
|
+
private _easingFunction;
|
207
|
+
private _interpolationFunction;
|
208
|
+
private _chainedTweens;
|
209
|
+
private _onStartCallback?;
|
210
|
+
private _onStartCallbackFired;
|
211
|
+
private _onUpdateCallback?;
|
212
|
+
private _onRepeatCallback?;
|
213
|
+
private _onCompleteCallback?;
|
214
|
+
private _onStopCallback?;
|
215
|
+
private _id;
|
216
|
+
private _isChainStopped;
|
217
|
+
constructor(_object: T, _group?: Group);
|
218
|
+
getId(): number;
|
219
|
+
isPlaying(): boolean;
|
220
|
+
isPaused(): boolean;
|
221
|
+
to(properties: UnknownProps, duration?: number): this;
|
222
|
+
duration(d: number): this;
|
223
|
+
start(time: number): this;
|
224
|
+
private _setupProperties;
|
225
|
+
stop(): this;
|
226
|
+
end(): this;
|
227
|
+
pause(time: number): this;
|
228
|
+
resume(time: number): this;
|
229
|
+
stopChainedTweens(): this;
|
230
|
+
group(group: Group): this;
|
231
|
+
delay(amount: number): this;
|
232
|
+
repeat(times: number): this;
|
233
|
+
repeatDelay(amount: number): this;
|
234
|
+
yoyo(yoyo: boolean): this;
|
235
|
+
easing(easingFunction: EasingFunction): this;
|
236
|
+
interpolation(interpolationFunction: InterpolationFunction): this;
|
237
|
+
chain(...tweens: Array<Tween<UnknownProps>>): this;
|
238
|
+
onStart(callback: (object: T) => void): this;
|
239
|
+
onUpdate(callback: (object: T, elapsed: number) => void): this;
|
240
|
+
onRepeat(callback: (object: T) => void): this;
|
241
|
+
onComplete(callback: (object: T) => void): this;
|
242
|
+
onStop(callback: (object: T) => void): this;
|
243
|
+
update(time: number): boolean;
|
244
|
+
private _updateProperties;
|
245
|
+
private _handleRelativeValue;
|
246
|
+
private _swapEndStartRepeatValues;
|
247
|
+
}
|
248
|
+
|
249
|
+
type UnknownProps = Record<string, unknown>;
|
250
|
+
|
251
|
+
/**
|
252
|
+
* Controlling groups of tweens
|
253
|
+
*
|
254
|
+
* Using the TWEEN singleton to manage your tweens can cause issues in large apps with many components.
|
255
|
+
* In these cases, you may want to create your own smaller groups of tween
|
256
|
+
*/
|
257
|
+
class Group {
|
258
|
+
private _tweens;
|
259
|
+
private _tweensAddedDuringUpdate;
|
260
|
+
getAll(): Array<Tween<UnknownProps>>;
|
261
|
+
removeAll(): void;
|
262
|
+
add(tween: Tween<UnknownProps>): void;
|
263
|
+
remove(tween: Tween<UnknownProps>): void;
|
264
|
+
update(time: number, preserve?: boolean): boolean;
|
265
|
+
}
|
266
|
+
|
267
|
+
export default TWEEN;
|
268
|
+
}
|
269
|
+
|
270
|
+
declare module "@tweenjs/tween.js" {
|
271
|
+
import TWEEN from "TWEEN";
|
272
|
+
export = TWEEN;
|
273
|
+
}
|