Hammer.js在pinchin / pinchout上缓慢而生涩 [英] Hammer.js is slow and jerky on pinchin/pinchout

问题描述

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

I'm using hammer.js to implement some touchscreen functionality on a pet project.

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

The desired product is a map that can be dragged around and zoomed in and out with a touchscreen. I got it working, and everything is nice except the pinchin/pinchout mechanics are very, very slow. There is a very noticeable delay between when the pinch happens, and when the event fires.

这是相关的JQuery / JS代码：

Here's the relevant JQuery/JS code:

编辑：根据西蒙的建议，代码现在更好（也更快）。这是完成的版本

Code is way nicer (and faster) now per Simon's suggestions. Here's the finished version

$(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文档

推荐答案

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

This is jerky because you make way to much computation in each event handler.

首先，缓存变量。调用 $（'#map'）总是进入DOM，获取对象并返回它。只执行一次，缓存结果。

First, cache your variables. calling $('#map') always goes in the DOM, get the object and return it. Only do this once, cache the result.

计算后也是如此。不要一直叫这个 a [0] + a [7] ，计算一次，多次申请。

Same thing after with your calculations. Don't call this a[0] + a[7] all the time, calculate once, apply multiple time.

然后，将您的 .css（）调用仅在一个具有多个属性的调用中合并。

Then, well, combine your .css() calls in only one call with multiple attributes.

这会有所帮助，但为了得到一些柔滑的东西，请继续阅读：

That'll help, but to get something silky smooth, read on:

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

Having smooth animation is not so hard, but you need to understand where to improve and how to limit layout cost, reflow and relayout. I can't explain all this here, but I can give you some concepts to research:

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

First of all, use requestAnimationFrame before firing any css changes. This will ensure the css modifications happens at the beginning of an animation frame, not at the end - so it helps reducing the risk of skipping a frame.

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

Then, try to use css3 transformations as much as possible (I don't mean use CSS stylesheet, I mean use css3 property with JavaScript). These properties perform way better. At the same time, try removing most of costly CSS styles and test a lot as some have a high rendering time cost (like drop-shadow and such).

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

Then, check and read most Google dev team presentation on respecting a 60 fps rate, and anything about making your website jank free. They often present basic concepts who'll help you better understand what's going on, and where/how to optimize and track the performance of your site.

这篇关于Hammer.js在pinchin / pinchout上缓慢而生涩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！