mirror of
https://github.com/tweenjs/tween.js.git
synced 2025-12-08 20:16:12 +00:00
136 lines
3.4 KiB
HTML
136 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>
|
|
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>
|