读书频道 > web开发 > 其他综合 > HTML5敏捷实践
数值变化动画
2013-11-27 14:11:44     我来说两句 
收藏    我要投稿   

本文所属图书 > HTML5敏捷实践

《HTML5敏捷实践》共分10章,包括了HTML5中的语义化、新的样式、多媒体支持、新的图形实现方式、更易用交互功能、浏览器客户端存储、地理定位、Web Worker API、Node js 服务器端开发等方面。贯穿全书,作者都  立即去当当网订购

可以给进度指示器的.middle .value 高度增加动画效果,并且将示数从0 增长到当前的值。

让我们实现一个辅助函数。以下函数可以为数值添加逗号:
function addCommas(number) {
  var number = number+''; var l = number.length; var out = '';
 
  var n = 0;
 
  for (var i=(l-1);i>=0;i--) {
    out = '<span class="l">'+number.charAt(i)+'</span>'+out;
    if ((l-i)%3 == 0 && i != 0) {
         out = '<span class="lcom">,</span>'+out; 
    }
    n++;
      }
 
      return out;
  }

接下来我们来实现文本动画。这只是一个显示效果,它不需要很精确,只需要每隔50毫秒更新一次计算的结果。还要获取setInterval 的返回值,以便在其他需要的地方清除整个定时器。

可以从 mozilla.org(https://developer.mazilla.org/en/DOM/window.requestAnimationFrame )查看更多关于 requestAnimationFrame 替换 setInterval 实现动画的信息。
 
function animateText(el, fromValue, toValue) {
  var total = fromValue;
 
 
  var interval = setInterval(function() {
 
 
    if(total < toValue) {
      // 动画共有2000ms,我们每隔50ms 更新一次
      total += parseInt((toValue-fromValue) / (2000/50)); 
      total = Math.min(total, toValue);
      el.html('&pound;' + addCommas(total)); 
    }
    else {
      clearInterval(interval);
    }
  }, 50);
  return interval;
}

现在让我们实现进度指示器的动画效果。使用jQuery 的jQuery.animate 方法很容易将其实现:
    function animateThermometer(valueEl, fromHeight, toHeight, 
totalEl, totalValue, callback) {
 
      // 向下的动画执行很快,用户看起来不会很差
      valueEl.animate({'height':fromHeight + 'px'}, 'fast',
      function() {
 
 
        // 向上返回的动画比较缓慢,酷!
      valueEl.animate({'height':toHeight}, '2000', function() {
 
 
         totalEl.html('&pound;' + addCommas(totalValue)); 
 
      callback();
    });
  });
}

最后,将这些函数组合起来,实现进度指示器的最终动画效果,然后在addBehaviours 函数中添加一些设置。
      function animateValues(valueEl, totalEl, fromValue, toValue, 
goalValue, pixelsPerValue) {
 
        var fromHeight = pixelsPerValue*fromValue;
 
 
        var toHeight = Math.min(pixelsPerValue*toValue,
pixelsPerValue*goalValue);
        var interval = animateText(totalEl, fromValue, toValue);
 
 
        animateThermometer(valueEl, fromHeight, toHeight,
totalEl, toValue,
         function() {
           clearInterval(interval);
         });
      return interval;
    };
 
 
    function addBehaviours(config, setInitialValues) {
      setInitialValues = (setInitialValues === undefined?
true:setInitialValues);
      addThermometerMarks(config.middleEl, config.numberOfMarks,
config.valuePerMark);
 
      addMarkHighlights(config.middleEl);
 
 
      if(setInitialValues) {
        animateValues(config.middleValueEl, config.currentTotalEl, 0,
                     config.currentTotalValue, config.goalValue,
config.pixelsPerValue);
    }
}
 
    $(function() {
      var config = setUp('.thermometer-widget');
      addBehaviours(config);
    });

现在查看小部件,就可以看到进度指示器的动画效果了。

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:刻度值、指向高亮和信息框
下一篇:添加实时更新功能
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站