我如何使用requestAnimationFrame而不是translate3d？(How can i use requestAnimationFrame instead of translate3d

我如何使用requestAnimationFrame而不是translate3d？(How can i use requestAnimationFrame instead of translate3d?)

由于浏览器的行为，translate3d将矢量元素渲染为纹理，我现在需要使用简单的2d翻译，但这意味着性能受到损害。 我试图找到一个解决方案，并且requestAnimationFrame出现了，但我无法弄清楚如何在我的情况下使用它：

$document.bind(events['move'], function(e) { $('.slide-panel.shown').find('.close-panel').trigger('click'); var valueX = getTransform($elem,'posX'), valueY = getTransform($elem,'posY'), zoom = getTransform($elem,'zoom'), translateX, translateY; if (is_touch_device()) { translateX = valueX + (e.originalEvent.touches[0].pageX - mouse.x); translateY = valueY + (e.originalEvent.touches[0].pageY - mouse.y); } else { translateX = valueX + (e.pageX - mouse.x); translateY = valueY + (e.pageY - mouse.y); } $elem.css({ 'transform': 'translate3d(' + translateX +'px, ' + translateY +'px, 0) scale('+zoom+')', '-webkit-transform': 'translate3d(' + translateX +'px, ' + translateY +'px, 0) scale('+zoom+')', '-moz-transform': 'translate3d(' + translateX +'px, ' + translateY +'px, 0) scale('+zoom+')' }); console.log($elem.css('transform')) mouse.update(e); e.preventDefault(); });

有很多涉及，但基本上这是我的拖放代码的一部分，使用translate3d移动元素，我需要以某种方式摆脱translate3d并使用只是翻译但在动画帧内

Due to behaviour of browser where translate3d renders vector elements as textures I now need to use simple 2d translate, however this means that performance is harmed. I tried to find a solution and requestAnimationFrame came up, but I can't figure out how to use it in my case:

$document.bind(events['move'], function(e) { $('.slide-panel.shown').find('.close-panel').trigger('click'); var valueX = getTransform($elem,'posX'), valueY = getTransform($elem,'posY'), zoom = getTransform($elem,'zoom'), translateX, translateY; if (is_touch_device()) { translateX = valueX + (e.originalEvent.touches[0].pageX - mouse.x); translateY = valueY + (e.originalEvent.touches[0].pageY - mouse.y); } else { translateX = valueX + (e.pageX - mouse.x); translateY = valueY + (e.pageY - mouse.y); } $elem.css({ 'transform': 'translate3d(' + translateX +'px, ' + translateY +'px, 0) scale('+zoom+')', '-webkit-transform': 'translate3d(' + translateX +'px, ' + translateY +'px, 0) scale('+zoom+')', '-moz-transform': 'translate3d(' + translateX +'px, ' + translateY +'px, 0) scale('+zoom+')' }); console.log($elem.css('transform')) mouse.update(e); e.preventDefault(); });

There is a lot involved, but essentially this is part of my drag and drop code that uses translate3d to move element around, I need to somehow get rid of translate3d and use just translate but within animation frame

最满意答案

我认为requestAnimationFrame不会在这里解决您的性能问题。

您正在使用一个事件处理程序，它在每个'tick'上搜索元素。 你可以做的是缓存你从DOM请求的元素：

(function () { var $closeElement = $('.slide-panel.shown').find('.close-panel'); $document.bind(events['move'], function(e) { $closeElement.trigger('click'); // rest of your animation code. }); }());

你搬家时会发生多少事件？

如果有很多事件你可以尝试限制动画。 Remy Sharp有一篇关于如何做到这一点的精彩文章： https ： //remysharp.com/2010/07/21/throttling-function-calls

I don't think requestAnimationFrame is going to solve your performance problems here.

You're using a event handler which is searching for elements on every 'tick'. What you could do is cache the elements you request from the DOM:

(function () { var $closeElement = $('.slide-panel.shown').find('.close-panel'); $document.bind(events['move'], function(e) { $closeElement.trigger('click'); // rest of your animation code. }); }());

How many events are fired when you're moving?

If there are a lot of events you could try throttling the animation. Remy Sharp has a great article on how to do this: https://remysharp.com/2010/07/21/throttling-function-calls