本站常年招開AS3培訓,一對一教學。聯系QQ:8286659

通過JS設置對象緩動。Tween類的使用。

演示效果:
http://www.zdtdgk.tw/h5/testTween.htm

代碼如下:

<script>
// 演示如何使用
/*
* Tween.js
* t: current time(當前時間);
* b: beginning value(初始值);
* c: change in value(變化量);
* d: duration(持續時間)。
*/

// requestAnimationFrame的兼容處理
if (!window.requestAnimationFrame) {
  requestAnimationFrame = function(fn) {
    setTimeout(fn, 17);
  };  
}

// 容器元素
var eleContainer = document.getElementById('container');
// 標題元素(同時作為方法關鍵字)
var eleTitles = eleContainer.getElementsByTagName('h4');
// 循環標題
for (var indexTitle = 0; indexTitle < eleTitles.length; indexTitle += 1) {
  (function(index) {
    // 標題元素
    var eleTitle = eleTitles[index];
    // 標題對應的動畫關鍵字
    var arrKeyTween = eleTitle.innerHTML.split('.');
    // 找到球元素
    var eleBall = eleTitle.parentNode.getElementsByTagName('i')[0];
      
    // 是否正在運動
    var isMoving = false;
    
    // 點擊球觸發運動
    if (eleBall) {
      eleBall.onclick = function () {
        if (isMoving == true) {
          return;  
        }
        
        // 一些數據
        // 當前時間
        var start = 0;
        // 初始值,因為一開始球在最左邊,因此是0
        var begin = 0;
        // 容器寬度減去球的寬度
        var end = (800 - 42);
        // 持續時間
        var during = 100;
        
        // 當前圓球對應的動畫算法
        var fnGetCurrentPosition;
        
        if (arrKeyTween.length == 1) {
          fnGetCurrentPosition = Math.tween[arrKeyTween[0]];
        } else if (arrKeyTween.length == 2) {
          fnGetCurrentPosition = Math.tween[arrKeyTween[0]][arrKeyTween[1]];
        }
        
        // 運動
        var step = function() {
          // 當前的運動位置
          var left = fnGetCurrentPosition(start, begin, end, during);
          // 高級瀏覽器使用transform位置,會更細膩
          if (history.pushState) {
            eleBall.style.transform = 'translateX(' + left + 'px)';
          } else {
            eleBall.style.left = left + 'px';  
          }
          
          // 時間遞增
          start++;
          
          // 如果還沒有運動到位,繼續
          if (start <= during) {
             requestAnimationFrame(step);
          } else {
            // 動畫結束,這里可以插入回調...
            // callback()...
            
            // 標記動畫已結束,可以再次點擊小球執行動畫
            isMoving = false;
          }
        };
        // 開始執行動畫
        if (typeof fnGetCurrentPosition == 'function') {
          isMoving = true;
          step();
        }
      };  
    }
  })(indexTitle);
}
</script>


留言
用戶名:   密碼:   注冊?
驗證碼 * 請輸入驗證碼(不想注冊?OK,請直接輸入用戶名、驗證碼、內容即可。密碼處請留空)
 

四川时时彩玩法