您的位置：首页 > Web前端 > JavaScript

tween.js可生成平滑动画效果的js动画库效果演示

2017-02-14 21:25 573 查看

tween.js强大的可生成平滑动画效果的js库

<!DOCTYPE html>
<html lang="en">
<head>
<title>Tween.js / dynamic to</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>07 _ dynamic to</h2>
<p>tweening towards a moving target</p>
</div>

<div id="target"></div>

<script src="../src/Tween.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script>
init();
animate();
function init() {
var width = 480;
var height = 320;
var target = document.getElementById('target');
var canvas = document.createElement( 'canvas' );
canvas.width = width;
canvas.height = height;
target.appendChild( canvas );
var context = canvas.getContext( '2d' );
var rabbit = { x: width - 50, y: 50 };
new TWEEN.Tween( rabbit ).to( { x: width - 50, y: height - 50 }, 3000 ).onUpdate( function() {
// draw background
context.fillStyle = "rgb(240,250,240)";
context.fillRect( 0, 0, width, height );
// draw rabbit
context.fillStyle = "rgb(150,150,150)";
context.save();
context.translate( this.x, this.y );
context.beginPath();
context.moveTo( 0, 0 );
context.bezierCurveTo( 15, 0, 15, -40, 5, -30 );
context.lineTo( 0, 0 );
context.bezierCurveTo( -15, 0, -15, -40, -5, -30 );
context.lineTo( 0, 0 );
context.fill();
context.beginPath();
context.arc( 0, 0, 15, 0, Math.PI * 2, true );
context.fill();
context.restore();
} ).start();
var fox = { x: 50, y: 50 };
new TWEEN.Tween( fox ).to( rabbit, 3000 ).onUpdate( function() {
// draw fox
context.fillStyle = "rgb(200,80,80)";
context.save();
context.translate( this.x, this.y - 13 );
context.scale( 1.2, 1.2 );
context.beginPath();
context.moveTo( 4, 24 );
context.lineTo( 8, 16 );
context.lineTo( 14, 10 );
context.lineTo( 15, 0 );
context.lineTo( 9, -10 );
context.lineTo( 2, 0 );
context.lineTo( -2, 0 );
context.lineTo( -9, -10 );
context.lineTo( -15, 0 );
context.lineTo( -14, 10 );
context.lineTo( -8, 16 );
context.lineTo( -4, 24 );
context.closePath();
context.fill();
context.restore();
} ).start();
}
function animate( time ) {
requestAnimationFrame( animate );
TWEEN.update( time );
}
animate();
</script>
</body>
</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/tweenjs/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="../src/Tween.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( time ) {
requestAnimationFrame( animate );
TWEEN.update( time );
stats.update();
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航