mirror of
https://github.com/tweenjs/tween.js.git
synced 2025-12-08 20:16:12 +00:00
98c8064a33
Adds a new `dynamic` option to the `to()` method. If set to true, objects are passed in an used directly by Tween. This allows outside code to modify values dynamically during animation (including interpolated array values). Tween will modify the initial interpolation arrays. If `dynamic` is set to false, the object passed in will be copied and will never be modified, but in this case it is not possible to modify the object values dynamically during animation. The breaking change is that, when dynamic is false, Tween makes a non-inheriting hard copy of the object passed into `to()` instead of making an prototypal "copy" that inherits values from the original object. The reason for this breaking change is that now things are consistent: when `dynamic` is set to `false` (the default) no object passed into `Tween.to()` will ever be modified AND those objects can never be used for dynamic updates (whereas before, objects could be dynamic, but arrays were not). Likewise, when `dynamic` is `true`, then both objects and arrays can be modified on the outside and Tween will animate based on those changes.
123 lines
2.6 KiB
HTML
123 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Tween.js / dynamic to, two objects</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, two rabbits</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 src="../dist/tween.umd.js"></script>
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script type="module">
|
|
import {drawRabbit, drawFox} from './js/drawings.js'
|
|
|
|
startScene('scene1', false)
|
|
startScene('scene2', true)
|
|
|
|
function startScene(id, dynamic) {
|
|
var context
|
|
var width
|
|
var height
|
|
var rabbit1
|
|
var rabbit2
|
|
var fox
|
|
|
|
init()
|
|
animate()
|
|
|
|
function init() {
|
|
width = 480
|
|
height = 320
|
|
|
|
var scene = document.getElementById(id)
|
|
|
|
var canvas = document.createElement('canvas')
|
|
canvas.width = width
|
|
canvas.height = height
|
|
scene.appendChild(canvas)
|
|
|
|
context = canvas.getContext('2d')
|
|
|
|
rabbit1 = {
|
|
x: width * 0.8,
|
|
y: 50,
|
|
}
|
|
|
|
new TWEEN.Tween(rabbit1)
|
|
.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()
|
|
|
|
rabbit2 = {
|
|
x: width - 50,
|
|
y: height - 50,
|
|
}
|
|
|
|
new TWEEN.Tween(rabbit2)
|
|
.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()
|
|
|
|
var rabbits = {
|
|
x: [rabbit1.x, rabbit2.x],
|
|
y: [rabbit1.y, rabbit2.y],
|
|
}
|
|
|
|
fox = {
|
|
x: 50,
|
|
y: 50,
|
|
}
|
|
|
|
new TWEEN.Tween(fox).to(rabbits, 3000).dynamic(dynamic).interpolation(TWEEN.Interpolation.CatmullRom).start()
|
|
}
|
|
|
|
function animate(time) {
|
|
TWEEN.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>
|