声明: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>结束**/