使用JS mousemove性能更改CSS属性

Question

我有一个jQuery函数更改background-position三个元素的属性,mousemove这似乎导致一些性能问题.

应该注意,这些元素的背景图像是SVG.

示例代码:

$(window).on('mousemove', function(event) {
    window.requestAnimationFrame(function() {

        $banner.find('.pattern').each(function(key) {

            var modifier = 20 * (key + 1);

            $(this).css({
                'background-position': (event.pageX / modifier)+'px '+(event.pageY / modifier)+'px'
            });

        });

    });
});

在这里查看我的工作代码:https://codepen.io/thelevicole/project/full/DarVMY/

我正在使用,window.requestAnimationFrame()我也有will-change: background-position;每个元素的css属性.

你可能会说,这种影响是滞后的.在较大的窗户尺寸上似乎会变得更糟.

我很确定这个问题是由于使用SVG代替PNG而导致的.我使用SVG的原因是因为高像素密度屏幕.

如果有人能够提供一些有关如何改进FPS的见解,而不必使用非常棒的PNG.谢谢.

Answer 1

成功。我的解决方案是建议的组合。

\n\n

我现在正在更改每个元素的转换属性，但在执行此操作时遇到了另一个问题。我在这些相同的元素上有一个变换关键帧动画，并且 JS 应用的样式被忽略。

\n\n

为了解决这个问题，我嵌套了关键帧动画元素并使用 JS 来转换父元素。

\n\n

我已应用 @CristianTra\xc3\xacna 的建议，搬出window.requestAnimationFrame()我的mousemove

\n\n

您可以在我的原始链接中看到更新：https ://codepen.io/thelevicole/project/full/DarVMY/

\n\n

遗憾的是 CodePen 不允许对项目进行版本控制。

\n\n\n\n

最终工作代码

\n\n

\r\n

\r\n

(function($) {\r\n\t\'use strict\';\r\n\t\r\n\tvar $banner = $(\'section.interactive\');\r\n\tif ($banner.length) {\r\n\t\tvar $patterns = $banner.find(\'.pattern\');\r\n\t\t\r\n\t\tvar x = 0,\r\n\t\t\ty = 0;\r\n\t\t\r\n\t\t// Bind animation to cursor\r\n\t\t$(window).on(\'mousemove\', function(event) {\r\n\t\t\tx = event.pageX;\r\n\t\t\ty = event.pageY;\r\n\t\t});\r\n\t\t\r\n\t\t/**\r\n\t\t * Tell the browser that we wish to perform an animation\r\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame\r\n\t\t */\r\n\t\twindow.requestAnimationFrame(function animation() {\r\n\r\n\t\t\t// Loop each pattern layer\r\n\t\t\t$patterns.each(function(key) {\r\n\r\n\t\t\t\t// Modify the x,y coords per element to give "depth"\r\n\t\t\t\tvar modifier = 20 * (key + 1);\r\n\r\n\t\t\t\t// Move background position\r\n\t\t\t\t$(this).css({\r\n\t\t\t\t\t\'transform\': \'translate(\'+(x / modifier)+\'px, \'+(y / modifier)+\'px)\'\r\n\t\t\t\t});\r\n\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\twindow.requestAnimationFrame(animation);\r\n\r\n\t\t});\r\n\t\t\r\n\t\t\r\n\t}\r\n\t\r\n})(jQuery);

\r\n

section.interactive {\r\n  position: relative;\r\n  height: 100vh;\r\n  background-image: linear-gradient(45deg, #6ac8ea 0%, #5de2c1 100%);\r\n}\r\n\r\nsection.interactive .layers {\r\n  overflow: hidden;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  bottom: 0;\r\n  right: 0;\r\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, 0.1) 100%);\r\n}\r\n\r\nsection.interactive .layers .pattern {\r\n  position: absolute;\r\n  top: -10px;\r\n  left: -10px;\r\n  bottom: -10px;\r\n  right: -10px;\r\n  background-position: top left;\r\n  will-change: background-position;\r\n  background-size: 1000px 1000px;\r\n}\r\n\r\nsection.interactive .layers .pattern .inner {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  bottom: 0;\r\n  right: 0;\r\n}\r\n\r\nsection.interactive .layers .pattern.pattern-1 .inner {\r\n  background-image: url("http://www.inrialpes.fr/sed/people/boissieux/VEAD/out_Stars.svg");\r\n  filter: blur(2px);\r\n  opacity: 0.3;\r\n  z-index: 1;\r\n  animation: Floating 10s infinite;\r\n  animation-delay: 2s;\r\n  background-size: 800px 800px;\r\n}\r\n\r\nsection.interactive .layers .pattern.pattern-2 .inner {\r\n  background-image: url("http://www.inrialpes.fr/sed/people/boissieux/VEAD/out_Stars.svg");\r\n  filter: blur(1px);\r\n  opacity: 0.4;\r\n  z-index: 2;\r\n  animation: Floating 10s infinite;\r\n  animation-delay: 1s;\r\n  background-size: 900px 900px;\r\n}\r\n\r\nsection.interactive .layers .pattern.pattern-3 .inner {\r\n  background-image: url("http://www.inrialpes.fr/sed/people/boissieux/VEAD/out_Stars.svg");\r\n  opacity: 0.4;\r\n  z-index: 3;\r\n  animation: Floating 10s infinite;\r\n  background-size: 1000px 1000px;\r\n}\r\n\r\n@keyframes Floating {\r\n  0% {\r\n    transform: translate(-10px, 10px);\r\n  }\r\n  50% {\r\n    transform: translate(10px, -10px);\r\n  }\r\n  100% {\r\n    transform: translate(-10px, 10px);\r\n  }\r\n}

\r\n

<!DOCTYPE html>\r\n<html lang="en">\r\n<head>\r\n\t<meta charset="UTF-8">\r\n\t<meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n\t<meta http-equiv="X-UA-Compatible" content="ie=edge">\r\n\t<title>Animation performance</title>\r\n\t<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">\r\n\t<link rel="stylesheet" href="styles.processed.css">\r\n</head>\r\n<body>\r\n\t<section class="interactive">\r\n\t\t<div class="layers">\r\n\t\t\t<div class="pattern pattern-3">\r\n\t\t\t\t<div class="inner"></div>\r\n\t\t\t</div>\r\n\t\t\t<div class="pattern pattern-2">\r\n\t\t\t\t<div class="inner"></div>\r\n\t\t\t</div>\r\n\t\t\t<div class="pattern pattern-1">\r\n\t\t\t\t<div class="inner"></div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</section>\r\n\t<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>\r\n</body>\r\n</html>

\r\n

\r\n

\r\n

\n