mirror of
https://github.com/tweenjs/tween.js.git
synced 2026-01-25 16:46:30 +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.
118 lines
2.5 KiB
HTML
118 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Tween.js / dynamic to interpolation array</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
}
|
|
|
|
#scene1,
|
|
#scene2 {
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
padding-right: 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>07a _ dynamic to interpolation array</h2>
|
|
<p>tweening towards two moving targets</p>
|
|
|
|
<div id="scene1">
|
|
<p><code>.dynamic(false)</code></p>
|
|
</div>
|
|
<div id="scene2">
|
|
<p><code>.dynamic(true)</code></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import * as TWEEN from '../dist/tween.esm.js'
|
|
import {drawRabbit, drawFox} from './js/drawings.js'
|
|
|
|
startScene('scene1', false)
|
|
startScene('scene2', true)
|
|
|
|
function startScene(id, dynamic) {
|
|
const group = new TWEEN.Group()
|
|
|
|
const width = 480
|
|
const height = 320
|
|
|
|
const scene = document.getElementById(id)
|
|
|
|
const canvas = document.createElement('canvas')
|
|
canvas.width = width
|
|
canvas.height = height
|
|
scene.appendChild(canvas)
|
|
|
|
const context = canvas.getContext('2d')
|
|
|
|
const rabbit1 = {
|
|
x: width * 0.8,
|
|
y: 50,
|
|
}
|
|
|
|
new TWEEN.Tween(rabbit1, group)
|
|
.to({x: width / 2, y: height - 50}, 2000)
|
|
.easing(TWEEN.Easing.Cubic.InOut)
|
|
.onUpdate(function ({x, y}) {
|
|
rabbits.x[1] = x
|
|
rabbits.y[1] = y
|
|
})
|
|
.start()
|
|
|
|
const rabbit2 = {
|
|
x: width - 50,
|
|
y: height - 50,
|
|
}
|
|
|
|
new TWEEN.Tween(rabbit2, group)
|
|
.to({x: width / 3, y: 50}, 3000)
|
|
.easing(TWEEN.Easing.Cubic.InOut)
|
|
.onUpdate(function ({x, y}) {
|
|
rabbits.x[2] = x
|
|
rabbits.y[2] = y
|
|
})
|
|
.start()
|
|
|
|
const rabbits = {
|
|
x: [rabbit1.x, rabbit2.x],
|
|
y: [rabbit1.y, rabbit2.y],
|
|
}
|
|
|
|
const fox = {
|
|
x: 50,
|
|
y: 50,
|
|
}
|
|
|
|
new TWEEN.Tween(fox, group)
|
|
.to(rabbits, 3000)
|
|
.dynamic(dynamic)
|
|
.interpolation(TWEEN.Interpolation.CatmullRom)
|
|
.start()
|
|
|
|
animate()
|
|
|
|
function animate(time) {
|
|
group.update(time)
|
|
|
|
context.fillStyle = 'rgb(240,250,240)'
|
|
context.fillRect(0, 0, width, height)
|
|
|
|
drawRabbit(context, rabbit1.x, rabbit1.y, 'rgb(0,0,150)')
|
|
drawRabbit(context, rabbit2.x, rabbit2.y, 'rgb(0,80,80)')
|
|
drawFox(context, fox.x, fox.y, 'rgb(200,80,80)')
|
|
|
|
requestAnimationFrame(animate)
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|