javascript -- (tween.js简单动画制作)

声明：tween.js -- github.com -- search --下载

/***导入tween.js**/

<script type="text/javascript" src="js/tween.js" ></script>

/***style样式**/

<style>

　　#wrap {

　　　　position: relative;/***相对定位**/

　　}

　　#box {

　　　　position: absolute;/***绝对定位**/

　　　　width: 100px;

　　　　height: 100px;

　　　　background: blue;

　　}

</style>

/***style样式结束**/

/***body**/

<div id="wrap">

　　<div id="box">

　　</div>

</div>

/***body部分结束**/

/***<script>**/

<script type = "text/javascript">

　　var box = document.getElementById('box');

　　/***定义变量，存储box的位置**/

　　var position;

　　position = {x:100,y:0}; 

　　init();

　　/***init()函数**/

　　var tween;

　　function init() {

　　　　tween = new TWEEN.Tween(position);

　　　　tween.to({x:500},1000);

　　　　tween.onUpdate(update);

　　　　tween.start();

　　}

　　/***animate()函数  执行动画，相当于setInterval**/

　　animate();

　　function animate(time){

　　　　requestAnimationFrame(animate);

　　　　tween.update(time);

　　}

　　/***update()函数**/

　　function update() {

　　　　box.style.left = position.x + 'px'

　　}

　　

</script>

/***</script>结束**/