Question

由于浏览器的行为，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并使用只是翻译但在动画框架内

Answer 1

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

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

(function () {
    var $closeElement = $('.slide-panel.shown').find('.close-panel');

    $document.bind(events['move'], function(e) {
        $closeElement.trigger('click');

        // rest of your animation code.
    });
}());

当您移动时会触发多少事件？

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

Answer 2

实际上你可以使用translate3d（）和第三个参数z = 0并且通常像translate（）一样使用它。

或者像translate3d（0,0,0）一样使用它来强制硬件提升，然后使用简单的translate（）进行移动。所有翻译功能都可以加速，但translate3d（）函数似乎迫使浏览器使用GPU。

您当然可以使用reqestAnimationFrame（）来递归调用某个函数来在屏幕重绘之前更改元素，从而为您提供最佳性能。但是，如果你也想要一些缓和，这很容易通过CSS轻松实现。动画中的论点＆＃39;属性，在你的动画中，你将自己实现它，创建一些基于时间的功能。 [这里] [1]是我所说的例子。

我如何使用requestAnimationFrame而不是translate3d？

2 个答案: