mirror of
https://github.com/tweenjs/tween.js.git
synced 2026-01-18 15:54:41 +00:00
f28f0694f2
feat: the `tween.group(group)` method now has a reciprocal `tween.remove()`
method that will remove a tween from its associated group, and unassociate the
group. `tween.group()` without an arg is no longer valid, see breaking changes
and migration below.
fix: when a tween is stopped before its end time, do not allow its update method
to continue, therefore preventing logic (f.e. repeat logic) from being
triggered
docs: improved the docs, adding some missing information, removing all examples
of the global `TWEEN` group which has been deprecated, and adding docs on how to
manage groups of tweens. Also updated samples to use `import` syntax for
importing Tween, avoiding the use of the `TWEEN` UMD global variable which has
been deprecated.
feat: A new `Group.allStopped()` method returns true if all tweens in
a group are not playing (i.e. stopped, and not paused), otherwise false.
Useful for stopping an animation loop once all tweens in a group have
finished their animation.
BREAKING:
- Tweens are no longer automatically added or removed from groups by default
when you call any Tween methods such as `start()`, `stop()`, or `pause()`, and
the `preserve` parameter to `Group.update()` now defaults to `true` and is
deprecated to be removed in a future major version.
- MIGRATION: To keep old behavior for a while, explicitly call
`group.update()` with `false` for the second parameter. To migrate forward, do
not rely on automatic add/remove of tweens, and instead add/remove tweens
to/from groups manually.
- `Group.update()` no longer returns a boolean indicating if all tweens
have been removed.
- MIGRATION: Don't rely on auto-add/remove to/from groups. This
boolean return was previously useful for stopping an animation loop
once all tweens were finished animating. Instead, use the new
`Group.allStopped()` method to check if all tweens in a group are stopped in
order to determine whether or not to continue an animation loop.
- The second `group` parameter to `Tween.constructor` now defaults to
`undefined` instead of the global `TWEEN` group. Additionally it
accepts a value of `true` to restore the old default behavior. The
`true` value is deprecated and will be removed in a future major
version.
- MIGRATION: For the time being the parameter can be set to `true` to restore
the old behavior. To migrate forward, use `tween.group(group)` or
`group.add(tween)` instead.
- The argless `tween.group()` signature has been removed.
- MIGRATION: Use `group.add(tween)` or `group.remove(tween)` instead.
`tween.group(TWEEN)`, `TWEEN.add(tween)`, and `TWEEN.remove(tween)` will also
work for now, but they are deprecated and will be removed in a future major
version.
- `Group.update`'s second parameter `preserve` defaults to `true` now, and is
deprecated to be removed in a future major version, at which point tweens of a
group will no longer be automatically added/remove to/from a group when calling
any Tween methods such as `start()`, `pause()`, or `stop()`.
- MIGRATION: For now, explicitly set the parameter to `false` to restore old
default behavior when calling `group.update()`. To migrate forward, do not
rely on the automatic add/remove behavior, and instead manually add or remove
tweens to or from groups.
- To make the fix for `tween.update()` to be a no-op for stopped tweens, we had
to break an undocumented feature that allowed tweens to move backward in time
(https://github.com/tweenjs/tween.js/pull/271).
- MIGRATION: To move tweens backward in time after they have already
completed, first call `tween.start(startTime)` then proceed to call
`tween.update(time)` in reverse order as before (see the unit test with "go
backward in time" in its name). Without calling `tween.start()` nothing will
happen because stopped/completed tweens will now always return early from
`update()`, as they are considered to be no longer running.
59 lines
1.6 KiB
HTML
59 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Tween.js / array interpolation</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
}
|
|
|
|
#target {
|
|
font-size: 13px;
|
|
padding: 0px 32px;
|
|
}
|
|
</style>
|
|
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<div id="info" style="position: relative">
|
|
<h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
|
|
<h2>06 _ array interpolation</h2>
|
|
<p>The different interpolations if arrays are used as values.</p>
|
|
</div>
|
|
|
|
<div id="target"></div>
|
|
|
|
<script type="module">
|
|
import {createPath, xA, x0, yA, y0} from './js/createPath.js'
|
|
import * as TWEEN from '../dist/tween.esm.js'
|
|
|
|
const group = new TWEEN.Group()
|
|
|
|
const target = document.getElementById('target')
|
|
if (!target) throw 'missing element'
|
|
|
|
target.appendChild(createPath(group, 'Linear', TWEEN.Interpolation.Linear))
|
|
target.appendChild(createPath(group, 'Bezier', TWEEN.Interpolation.Bezier))
|
|
target.appendChild(createPath(group, 'CatmullRom', TWEEN.Interpolation.CatmullRom))
|
|
|
|
target.appendChild(document.createElement('br'))
|
|
|
|
xA.push(x0)
|
|
yA.push(y0)
|
|
|
|
target.appendChild(createPath(group, 'start === end', TWEEN.Interpolation.Linear))
|
|
target.appendChild(createPath(group, '', TWEEN.Interpolation.Bezier))
|
|
target.appendChild(createPath(group, '', TWEEN.Interpolation.CatmullRom))
|
|
|
|
animate()
|
|
|
|
function animate(time) {
|
|
requestAnimationFrame(animate)
|
|
|
|
group.update(time)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|