Hammer.js在pinchin/pinchout上缓慢而生涩

Question

我正在使用hammer.js在宠物项目上实现一些触摸屏功能.

所需产品是可以使用触摸屏拖动和放大和缩小的地图.我得到了它的工作,一切都很好,除了pinchin/pinchout机制是非常非常慢.在捏合发生和事件发生之间存在非常明显的延迟.

这是相关的JQuery/JS代码:

编辑:根据西蒙的建议,代码现在更好(和更快).这是完成的版本

$(document).ready(function(){
  //Function which simulates zoom on the map on pinchin/pinchout
  $('#map').hammer()
    .on("pinchin", function(e) {
      var scale = $(this).css('transform');
      scale = (scale == null ? $(this).css('-webkit-transform') : scale); 
      scale = (scale == null ? $(this).css('-ms-transform') : scale);
      scale = scale.split(" ");
      scale = parseFloat(scale[0].substring(7, scale[0].length - 1));

      if(scale > 1) {
        scale = ('scale(' + (scale - .1).toString() + ')');
        $(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale });
      }
    })
    .on("pinchout", function(e) {
      var scale = $(this).css('transform');
      scale = (scale == null ? $(this).css('-webkit-transform') : scale); 
      scale = (scale == null ? $(this).css('-ms-transform') : scale);
      scale = scale.split(" ");
      scale = parseFloat(scale[0].substring(7, scale[0].length - 1));

      if(scale < 5) {
        scale = ('scale(' + (scale + .1).toString() + ')');
        $(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale
      }
  });
});

hammer.js文档

Answer 1

这是生涩的,因为你在每个事件处理程序中都有很多计算方法.

首先,缓存您的变量.调用$('#map')总是进入DOM,获取对象并返回它.只执行一次,缓存结果.

计算后也一样.不要一直打电话a[0] + a[7],计算一次,多次应用.

然后,将您的.css()呼叫仅在一个呼叫中与多个属性组合.

这会有所帮助,但为了获得丝般顺滑的东西,请继续阅读:

拥有流畅的动画并不是那么难,但你需要了解改进的地方以及如何限制布局成本,回流和重新布局.我不能在这里解释所有这些,但我可以给你一些研究概念:

首先,requestAnimationFrame在解雇任何css更改之前使用.这将确保css修改发生在动画帧的开头,而不是结束时 - 因此它有助于降低跳过帧的风险.

然后,尝试尽可能多地使用css3转换(我不是指使用CSS样式表,我的意思是使用JavaScript的css3属性).这些属性执行得更好.同时,尝试删除大多数昂贵的CSS样式并进行大量测试,因为有些样本具有较高的渲染时间成本(如drop-shadow等).

然后,检查并阅读大多数关于60 fps费率的Google开发团队演示文稿,以及有关使您的网站免费获取的任何信息.他们经常提供基本概念,帮助您更好地了解正在发生的事情,以及在何处/如何优化和跟踪您网站的效果.