zoukankan      html  css  js  c++  java
  • 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;/***绝对定位**/

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

  • 相关阅读:
    ChsDet is a Charset Detector (检测字符编码)
    Microsoft Fakes进行单元测试
    区域及分离、Js压缩、css、jquery扩展
    服务端软件的服务品质
    警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context}
    开发之技能
    分布式
    工具集
    Visual Studio Code
    Autofac 入门
  • 原文地址:https://www.cnblogs.com/zhao12354/p/5798826.html
Copyright © 2011-2022 走看看