由于浏览器的行为,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
更多推荐
发布评论