优化背光刷新频率

packages/artplayer-plugin-backlight/src/index.js

@@ -42,8 +42,8 @@ function creatMatrix(parent) {
     return matrixCallback((xIndex, yIndex, x, y) => {
         const $box = document.createElement('div');
         $box.style.position = 'absolute';
-        $box.style.left = `${xIndex * 100 / x}%`;
-        $box.style.top = `${yIndex * 100 / y}%`;
+        $box.style.left = `${(xIndex * 100) / x}%`;
+        $box.style.top = `${(yIndex * 100) / y}%`;
         $box.style.width = `${100 / x}%`;
         $box.style.height = `${100 / y}%`;
         $box.style.webkitBorderRadius = '50%';
@@ -86,7 +86,7 @@ function artplayerPluginBacklight(art) {
     $player.insertBefore($backlight, $video);
 
     (function loop() {
-        window.requestAnimationFrame(() => {
+        setTimeout(() => {
             if (player.playing) {
                 const { clientWidth, clientHeight } = $video;
                 const colors = getColors($canvas, $video, clientWidth, clientHeight);
@@ -98,13 +98,13 @@ function artplayerPluginBacklight(art) {
                     const y = top ? '-64px' : bottom ? '64px' : '0';
                     $box.style.webkitBoxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
                     $box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
-                });    
-            };
+                });
+            }
 
             if (!art.isDestroy) {
                 loop();
             }
-        });
+        }, 200);
     })();
 
     return {
@@ -112,4 +112,4 @@ function artplayerPluginBacklight(art) {
     };
 }
 
-export default artplayerPluginBacklight;
+export default artplayerPluginBacklight;