mirror of
https://github.com/tweenjs/tween.js.git
synced 2025-12-08 20:16:12 +00:00
156 lines
4.0 KiB
HTML
156 lines
4.0 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/createGraph.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(text, interpolation, width = 240, height = 160) {
|
|
var div = document.createElement('div')
|
|
div.style.display = 'inline-block'
|
|
// +20 for padding
|
|
div.style.width = width + 20 + 'px'
|
|
div.style.height = height + 20 + 'px'
|
|
|
|
var canvas = document.createElement('canvas')
|
|
canvas.style.width = width + 'px'
|
|
canvas.style.height = height + 'px'
|
|
canvas.width = toPhysicalPx(width)
|
|
canvas.height = toPhysicalPx(height)
|
|
|
|
var context = canvas.getContext('2d')
|
|
context.fillStyle = 'rgb(250,250,250)'
|
|
context.fillRect(0, 0, toPhysicalPx(width), toPhysicalPx(height))
|
|
|
|
context.lineWidth = toPhysicalPx(1)
|
|
context.strokeStyle = 'rgb(230,230,230)'
|
|
|
|
// points
|
|
context.fillStyle = 'rgb(200,200,200)'
|
|
context.fillRect(
|
|
toPhysicalPx(x0) - toPhysicalPx(3),
|
|
toPhysicalPx(y0) - toPhysicalPx(3),
|
|
toPhysicalPx(6),
|
|
toPhysicalPx(6),
|
|
)
|
|
context.fillRect(
|
|
toPhysicalPx(xA[xA.length - 1]) - toPhysicalPx(3),
|
|
toPhysicalPx(yA[yA.length - 1]) - toPhysicalPx(3),
|
|
toPhysicalPx(6),
|
|
toPhysicalPx(6),
|
|
)
|
|
|
|
for (var i = 0; i < xA.length; i++) {
|
|
context.fillRect(
|
|
toPhysicalPx(xA[i]) - toPhysicalPx(2),
|
|
toPhysicalPx(yA[i]) - toPhysicalPx(2),
|
|
toPhysicalPx(4),
|
|
toPhysicalPx(4),
|
|
)
|
|
}
|
|
//
|
|
|
|
context.lineWidth = toPhysicalPx(2)
|
|
context.strokeStyle = 'rgba(255,127,127,0.9)'
|
|
context.beginPath()
|
|
context.moveTo(toPhysicalPx(x0), toPhysicalPx(y0))
|
|
context.lineCap = 'round'
|
|
|
|
var position = {x: x0, y: y0}
|
|
|
|
new TWEEN.Tween(position)
|
|
.to({x: xA, y: yA}, 3000)
|
|
.easing(TWEEN.Easing.Linear.None)
|
|
.interpolation(interpolation)
|
|
.onUpdate(function () {
|
|
context.lineTo(toPhysicalPx(position.x), toPhysicalPx(position.y))
|
|
context.stroke()
|
|
})
|
|
.start()
|
|
|
|
div.appendChild(document.createTextNode(text))
|
|
div.appendChild(document.createElement('br'))
|
|
div.appendChild(canvas)
|
|
|
|
return div
|
|
}
|
|
}
|
|
|
|
function animate(time) {
|
|
requestAnimationFrame(animate)
|
|
|
|
TWEEN.update(time)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|