Warning: file_get_contents(/data/phpspider/zhask/data//catemap/6/ant/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
javascript动画在分辨率更高的屏幕上显得滞后_Javascript_Html_Jquery Animate - Fatal编程技术网

javascript动画在分辨率更高的屏幕上显得滞后

javascript动画在分辨率更高的屏幕上显得滞后,javascript,html,jquery-animate,Javascript,Html,Jquery Animate,我有一个动画,其中26个小SVG在视口中随机导航,在我的macbook上,动画效果完美,在我的手机上,动画效果完美,但当我在具有非常高分辨率屏幕的大型(桌面)设备上测试它时,动画令人厌恶地滞后。有人知道是什么导致了这一切吗 JSFiddle到代码: 代码: <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> &

我有一个动画,其中26个小SVG在视口中随机导航,在我的macbook上,动画效果完美,在我的手机上,动画效果完美,但当我在具有非常高分辨率屏幕的大型(桌面)设备上测试它时,动画令人厌恶地滞后。有人知道是什么导致了这一切吗

JSFiddle到代码:

代码:

<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<div id="container">
    <div class="a"><img src="images/aos-index.svg" class="index" alt="." /></div>
    <div class="b"><img src="images/2os-index.svg" class="index" alt="." /></div>
    <div class="c"><img src="images/3os-index.svg" class="index" alt="." /></div>
    <div class="d"><img src="images/4os-index.svg" class="index" alt="." /></div>
    <div class="e"><img src="images/5os-index.svg" class="index" alt="." /></div>
    <div class="f"><img src="images/6os-index.svg" class="index" alt="." /></div>
    <div class="g"><img src="images/7os-index.svg" class="index" alt="." /></div>
    <div class="h"><img src="images/8os-index.svg" class="index" alt="." /></div>
    <div class="i"><img src="images/9os-index.svg" class="index" alt="." /></div>
    <div class="j"><img src="images/tos-index.svg" class="index" alt="." /></div>
    <div class="k"><img src="images/jos-index.svg" class="index" alt="." /></div>
    <div class="l"><img src="images/qos-index.svg" class="index" alt="." /></div>
    <div class="m"><img src="images/kos-index.svg" class="index" alt="." /></div>
    <div class="n"><img src="images/aoc-index.svg" class="index" alt="." /></div>
    <div class="o"><img src="images/2oc-index.svg" class="index" alt="." /></div>
    <div class="p"><img src="images/3oc-index.svg" class="index" alt="." /></div>
    <div class="q"><img src="images/4oc-index.svg" class="index" alt="." /></div>
    <div class="r"><img src="images/5oc-index.svg" class="index" alt="." /></div>
    <div class="s"><img src="images/6oc-index.svg" class="index" alt="." /></div>
    <div class="t"><img src="images/7oc-index.svg" class="index" alt="." /></div>
    <div class="u"><img src="images/8oc-index.svg" class="index" alt="." /></div>
    <div class="v"><img src="images/9oc-index.svg" class="index" alt="." /></div>
    <div class="w"><img src="images/toc-index.svg" class="index" alt="." /></div>
    <div class="x"><img src="images/joc-index.svg" class="index" alt="." /></div>
    <div class="y"><img src="images/qoc-index.svg" class="index" alt="." /></div>
    <div class="z"><img src="images/koc-index.svg" class="index" alt="." /></div>
</div>

<script>
    $(document).ready(function() {
    animateDiv($('.a'));
    animateDiv($('.b'));
    animateDiv($('.c'));
    animateDiv($('.d'));
    animateDiv($('.e'));
    animateDiv($('.f'));
    animateDiv($('.g'));
    animateDiv($('.h'));
    animateDiv($('.i'));
    animateDiv($('.j'));
    animateDiv($('.k'));
    animateDiv($('.l'));
    animateDiv($('.m'));
    animateDiv($('.n'));
    animateDiv($('.o'));
    animateDiv($('.p'));
    animateDiv($('.q'));
    animateDiv($('.r'));
    animateDiv($('.s'));
    animateDiv($('.t'));
    animateDiv($('.u'));
    animateDiv($('.v'));
    animateDiv($('.w'));
    animateDiv($('.x'));
    animateDiv($('.y'));
    animateDiv($('.z'));
    });

    function makeNewPosition($container) {

    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

    }

    function animateDiv($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

$target.animate({
  top: newq[0],
  left: newq[1]
}, speed, function() {
  animateDiv($target);
});

    };

    function calcSpeed(prev, next) {

var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);

var greatest = x > y ? x : y;

var speedModifier = 0.055;

var speed = Math.ceil(greatest / speedModifier);

return speed;

    }

谢谢大家!

通过设置硬件加速css属性强制元素的3d硬件加速

在webkit中,喷射有时是由于webkit在亚像素和完全消除混叠之间切换造成的

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
将此“axl3d”类添加到要启用3d加速的元素中
使用适当的CSS选择器在这些元素上启用硬件加速。
选择适当的Css选择器,如class“.axl3d”Ex:

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.axl3d, /* all divs within the parent with id container, and */
#container > div, /* all divs within the parent with id container, and */  
img.index /* all images with index class  */   {
-webkit-transform: translateZ(0) translate3d(0, 0, 0);
-moz-transform: translateZ(0) translate3d(0, 0, 0);
-ms-transform: translateZ(0) translate3d(0, 0, 0);
-o-transform: translateZ(0) translate3d(0, 0, 0);
transform: translateZ(0) translate3d(0, 0, 0);

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}