问题描述
由于浏览器的行为，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的使用，而只在动画框架内使用translate
1楼
Johan
0
已采纳
2015-07-30 11:32:27
我认为requestAnimationFrame不会在这里解决您的性能问题。
您正在使用事件处理程序，该事件处理程序在每个“刻度”上搜索元素。 您可以做的就是缓存从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）上有一篇很棒的文章介绍了如何执行此操作： :
2楼
AskarovBeknar
0
2015-07-30 11:43:25
实际上，您可以将带有第三个参数z = 0的translate3d（）与通常的translate（）一起使用。
或像translate3d（0,0,0）一样使用它来强制硬件提升，然后使用简单的translate（）进行移动。 所有的转换功能都是可加速的，但是translate3d（）函数似乎迫使浏览器使用GPU。
当然，您可以使用reqestAnimationFrame（）来递归地调用某些函数以在重新绘制屏幕之前更改元素，这将为您提供最佳的性能。 但是，如果您还想要一些轻松的效果（通过CSS的“ animation”属性中的“ ease”参数可以轻松实现），则可以在动画中自己实现它，或者创建一些基于时间的函数。 [这里] [1]是我所谈论的例子。