mirror of
https://github.com/tweenjs/tween.js.git
synced 2026-02-01 17:27:10 +00:00
87 lines
2.2 KiB
HTML
87 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Black and Red / Tween.js</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<div id="info">
|
|
<h1><a href="http://github.com/sole/tween.js">tween.js</a></h1>
|
|
<h2>02 _ Black and red</h2>
|
|
<p>4096 continuously changing color cells (in a 64x64 table)</p>
|
|
<p></p>
|
|
</div>
|
|
<div id="target"></div>
|
|
|
|
<style>
|
|
body { font-family: Arial, Helvetica, sans; }
|
|
table { border-collapse:collapse; }
|
|
td { width: 5px; height: 5px; }
|
|
#target { position: absolute; top: 4em; right: 3em; }
|
|
</style>
|
|
|
|
<script src="../build/tween.min.js"></script>
|
|
<script src="js/stats.min.js"></script>
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script>
|
|
var stats;
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
var target = document.getElementById('target');
|
|
stats = new Stats();
|
|
target.appendChild(stats.domElement);
|
|
|
|
var t = document.createElement('table');
|
|
var index = 0;
|
|
|
|
for(var i = 0; i < 64; i++) {
|
|
var tr = t.insertRow(-1);
|
|
for(var j = 0; j < 64; j++) {
|
|
var td = tr.insertCell(-1);
|
|
td.style.background = '#000';
|
|
var x = (i+j) * 0.1;
|
|
var cell = { 'td': td, value : 0 };
|
|
var tween = new TWEEN.Tween(cell)
|
|
.to({ value: 1 }, 8000)
|
|
.delay((0.001 * index + Math.random()) * 500)
|
|
.easing(TWEEN.Easing.Elastic.InOut)
|
|
.onUpdate(function() {
|
|
var c = Math.floor(this.value * 0xff);
|
|
this.td.style.background = 'rgb(' + c + ', 0, 0)';
|
|
});
|
|
|
|
var tweenBack = new TWEEN.Tween(cell)
|
|
.to({ value: 0 }, 4000)
|
|
.delay((0.001*index + Math.random()) * 500)
|
|
.easing(TWEEN.Easing.Elastic.InOut)
|
|
.onUpdate(function() {
|
|
var c = Math.floor(this.value * 0xff);
|
|
this.td.style.background = 'rgb(' + c + ', 0, 0)';
|
|
});
|
|
|
|
tween.chain(tweenBack);
|
|
tweenBack.chain(tween);
|
|
|
|
tween.start();
|
|
index++;
|
|
}
|
|
}
|
|
|
|
target.appendChild(t);
|
|
}
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
TWEEN.update();
|
|
stats.update();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|