mirror of
https://github.com/tweenjs/tween.js.git
synced 2025-12-08 20:16:12 +00:00
899a0e3a59
* master: (38 commits) update dist files rename some tests to better reflect what they test improve the conditional logic more so that values in nested arrays can also be animated add and example and test for animating values in an array start values aren't arrays, only to values are move _updateProperties function back out to a method fix yoyo with array values test temporary, move updateProperties function to make diff with master more clear move some code and update variable names to make mergin with master easier (less conflict) update dist improve state reset when stopping and starting a tween (fixes #512 where yoyo wouldn't restart properly) move value-swapping code for repeated tweens to a function (it will be re-used in an upcoming change) consolidate duplicate handling of relative values update dist files ignore VS Code's config folder small refactor to prevent update from doing anything when a tween has finished, yet still allow tweens to go back in time fix lint error rename _isFinished to _isComplete to match other wording add one more test for relative array values add editorconfig to settings editors can be consistently unique (because we use tabs so people can set their own tab width) ...
137 lines
3.4 KiB
HTML
137 lines
3.4 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 src="../dist/tween.umd.js"></script>
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script>
|
|
init()
|
|
animate()
|
|
|
|
function init() {
|
|
var target = document.getElementById('target')
|
|
|
|
var width = 240,
|
|
height = 160
|
|
|
|
// random points
|
|
/*
|
|
var x0 = Math.random() * ( width - 40 ) + 20,
|
|
y0 = Math.random() * ( height - 40 ) + 20,
|
|
xA = [],
|
|
yA = [];
|
|
|
|
for ( var i = 0; i < 10; i++ ) {
|
|
|
|
xA.push( Math.random() * ( width - 40 ) + 20 );
|
|
yA.push( Math.random() * ( height - 40 ) + 20 );
|
|
|
|
}
|
|
*/
|
|
|
|
// fixed points
|
|
|
|
var min = 1 / 6,
|
|
max = 5 / 6
|
|
|
|
var x0 = width * min,
|
|
y0 = height / 2,
|
|
xA = [width * max, width / 2],
|
|
yA = [height * min, height * max]
|
|
|
|
target.appendChild(createPath('Linear', TWEEN.Interpolation.Linear))
|
|
target.appendChild(createPath('Bezier', TWEEN.Interpolation.Bezier))
|
|
target.appendChild(createPath('CatmullRom', TWEEN.Interpolation.CatmullRom))
|
|
|
|
target.appendChild(document.createElement('br'))
|
|
|
|
xA.push(x0)
|
|
yA.push(y0)
|
|
|
|
target.appendChild(createPath('start === end', TWEEN.Interpolation.Linear))
|
|
target.appendChild(createPath('', TWEEN.Interpolation.Bezier))
|
|
target.appendChild(createPath('', TWEEN.Interpolation.CatmullRom))
|
|
|
|
function createPath(title, interpolation) {
|
|
var div = document.createElement('div')
|
|
div.style.display = 'inline-block'
|
|
div.style.width = width + 20 + 'px'
|
|
div.style.height = height + 20 + 'px'
|
|
|
|
var canvas = document.createElement('canvas')
|
|
canvas.width = width
|
|
canvas.height = height
|
|
|
|
var context = canvas.getContext('2d')
|
|
context.fillStyle = 'rgb(250,250,250)'
|
|
context.fillRect(0, 0, width, height)
|
|
|
|
context.fillStyle = 'rgb(200,200,200)'
|
|
context.fillRect(x0 - 3, y0 - 3, 6, 6)
|
|
context.fillRect(xA[xA.length - 1] - 3, yA[yA.length - 1] - 3, 6, 6)
|
|
|
|
for (var i = 0; i < xA.length; i++) {
|
|
context.fillRect(xA[i] - 2, yA[i] - 2, 4, 4)
|
|
}
|
|
|
|
context.lineWidth = 2
|
|
context.strokeStyle = 'rgba(255,127,127,0.9)'
|
|
|
|
var obj = {x: x0, y: y0, old: {x: x0, y: y0}}
|
|
|
|
new TWEEN.Tween(obj)
|
|
.to({x: xA, y: yA}, 3000)
|
|
.onUpdate(function (object) {
|
|
context.beginPath()
|
|
context.moveTo(object.old.x, object.old.y)
|
|
context.lineTo(object.x, object.y)
|
|
context.closePath()
|
|
context.stroke()
|
|
|
|
object.old.x = object.x
|
|
object.old.y = object.y
|
|
})
|
|
.interpolation(interpolation)
|
|
.easing(TWEEN.Easing.Linear.None)
|
|
.delay(250)
|
|
.start()
|
|
|
|
div.appendChild(document.createTextNode(title))
|
|
div.appendChild(document.createElement('br'))
|
|
div.appendChild(canvas)
|
|
|
|
return div
|
|
}
|
|
}
|
|
|
|
function animate(time) {
|
|
requestAnimationFrame(animate)
|
|
|
|
TWEEN.update(time)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|