mirror of
https://github.com/tweenjs/tween.js.git
synced 2026-02-01 17:27:10 +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.
73 lines
1.9 KiB
HTML
73 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Tween.js / yoyo</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"tweenjs": "../dist/tween.esm.js"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script type="module" src="./10_yoyo.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="info">
|
|
<h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
|
|
<h2>10 _ yoyo</h2>
|
|
<p>Demonstrating the yoyo() feature.</p>
|
|
<button onclick="restart()">restart</button>
|
|
<button onclick="stop()">stop</button>
|
|
<button onclick="start()">start</button>
|
|
<button onclick="pause()">pause</button>
|
|
<button onclick="resume()">resume</button>
|
|
</div>
|
|
<div style="position: absolute; top: 100px; left: 400px">
|
|
<div id="target1" data-rotation="0" data-y="0" class="box" style="left: 0px; top: 0px">yoyo with repeat once</div>
|
|
<div id="target2" data-rotation="0" data-y="0" class="box" style="left: 200px; top: 0px">
|
|
yoyo with repeat forever
|
|
</div>
|
|
<div id="target3" data-rotation="0" data-y="0" class="box" style="left: 400px; top: 0px">
|
|
yoyo with repeat once, relative values
|
|
</div>
|
|
<div id="target4" data-rotation="0" data-y="0" class="box" style="left: 600px; top: 0px">
|
|
yoyo with repeat forever, relative values
|
|
</div>
|
|
</div>
|
|
|
|
<style type="text/css">
|
|
.box {
|
|
width: 100px;
|
|
height: 100px;
|
|
display: flex;
|
|
flex-flow: row;
|
|
align-items: center;
|
|
text-align: center;
|
|
-webkit-border-radius: 70px;
|
|
-moz-border-radius: 70px;
|
|
border-radius: 70px;
|
|
position: absolute;
|
|
border: 1px solid black;
|
|
font-size: 10px;
|
|
padding: 20px;
|
|
}
|
|
#target1 {
|
|
background: #fcc;
|
|
}
|
|
#target2 {
|
|
background: #cfc;
|
|
}
|
|
#target3 {
|
|
background: orange;
|
|
}
|
|
#target4 {
|
|
background: skyblue;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|