本站常年招开AS3培训,一对一教学。联系QQ:8286659

通过JS设置对象缓动。Tween类的使用。

演示效果:
http://www.taoshaw.com/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,请直接输入用户名、验证码、内容即可。密码处请留空)