码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2016-08-23 12:56:08      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:

声明: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()函数**/

  function init() {

    var tween = new TWEEN.Tween(position);

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

      .onUpdate(update);

      .start();

  }

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

  function animate(time){

    requestAnimationFrame(animate);

    tween.update(time);

  }

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

  function update() {

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

  }

  

</script>

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

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

标签:

原文地址:http://www.cnblogs.com/zhao12354/p/5798826.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!