@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 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
- requestAnimationFrame(animate);
27
- TWEEN.update(time);
26
+ requestAnimationFrame(animate)
27
+ TWEEN.update(time)
28
28
  }
29
- requestAnimationFrame(animate);
29
+ requestAnimationFrame(animate)
30
30
 
31
- const coords = { x: 0, y: 0 }; // Start at (0, 0)
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
- .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(() => { // Called after tween.js updates 'coords'.
36
- // Move 'box' to the position described by 'coords' with a CSS translation.
37
- box.style.setProperty('transform', `translate(${coords.x}px, ${coords.y}px)`);
38
- })
39
- .start(); // Start the tween immediately.
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
- - UMD : tween.umd.js
58
- - AMD : tween.amd.js
59
- - CommonJS : tween.cjs.js
60
- - ES6 Module : tween.es.js
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
- * Does one thing and one thing only: tween properties
86
- * Doesn't take care of CSS units (e.g. appending `px`)
87
- * Doesn't interpolate colours
88
- * Easing functions are reusable outside of Tween
89
- * Can also use custom easing functions
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
- * [User guide](./docs/user_guide.md)
94
- * [Contributor guide](./docs/contributor_guide.md)
95
- * [Tutorial](http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/) using tween.js with three.js
96
- * Also: [libtween](https://github.com/jsm174/libtween), a port of tween.js to C by [jsm174](https://github.com/jsm174)
97
- * Also: [es6-tween](https://github.com/tweenjs/es6-tween), a port of tween.js to ES6/Harmony by [dalisoft](https://github.com/dalisoft)
98
- * [Understanding tween.js](https://mikebolt.me/article/understanding-tweenjs.html)
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 *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
+ 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
-
@@ -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
+ }