javascript 动画在分辨率较高的屏幕上滞后
javascript animation is laggy on screens with higher resolutions
我有一个动画,其中 26 个小 .SVG 在视口周围随机导航,在我的 macbook 上动画效果完美,在我的 phone 上动画效果完美,但是当我在大型(桌面)上测试它时具有非常高分辨率屏幕的设备,动画非常滞后。有谁知道可能导致这种情况发生的原因?
JSFiddle 代码:https://jsfiddle.net/gzunsq1v/1/
代码:
<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;
}
#container {
background-color: black;
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
div.a,
div.b,
div.c,
div.d,
div.e {
left: 34%;
top: 50%;
transform: translate(-50%, -50%);
height: 72px;
background-color: transparent;
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.f,
div.g,
div.h,
div.i,
div.j {
left: 32%;
top: 50%;
transform: translate(-50%, -50%);
height: 72px;
background-color: transparent;
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.k,
div.l,
div.m,
div.n,
div.o {
left: 30%;
top: 50%;
transform: translate(-50%, -50%);
height: 72px;
background-color: transparent;
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.p,
div.q,
div.r,
div.s,
div.t {
left: 28%;
top: 50%;
transform: translate(-50%, -50%);
height: 72px;
background-color: transparent
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.u,
div.v,
div.w,
div.x,
div.y,
div.z {
left: 26%;
top: 50%;
transform: translate(-50%, -50%);
height: 72px;
background-color: transparent;
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media screen and (orientation: portrait) {
div.a,
div.b,
div.c,
div.d,
div.e {
left: -5%;
}
div.f,
div.g,
div.h,
div.i,
div.j {
left: -6%;
}
div.k,
div.l,
div.m,
div.n,
div.o {
left: -7%;
}
div.p,
div.q,
div.r,
div.s,
div.t {
left: -8%;
}
div.u,
div.v,
div.w,
div.x,
div.y,
div.z {
left: -9%;
}
}
谢谢!
通过设置硬件加速 css 属性强制元素的 3d 硬件加速。
在 webkit 中,抖动有时是由于 webkit 在子像素和 完全抗锯齿.
之间切换造成的
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
添加此 "axl3d" class 您想要的元素 启用 3d 加速。
使用适当的 CSS 选择器在这些元素上启用 硬件加速 。
选择合适的 Css 选择器,例如 class ".axl3d" 例如:
.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;
}
我有一个动画,其中 26 个小 .SVG 在视口周围随机导航,在我的 macbook 上动画效果完美,在我的 phone 上动画效果完美,但是当我在大型(桌面)上测试它时具有非常高分辨率屏幕的设备,动画非常滞后。有谁知道可能导致这种情况发生的原因?
JSFiddle 代码:https://jsfiddle.net/gzunsq1v/1/
代码:
<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;
}
#container {
background-color: black;
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
div.a,
div.b,
div.c,
div.d,
div.e {
left: 34%;
top: 50%;
transform: translate(-50%, -50%);
height: 72px;
background-color: transparent;
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.f,
div.g,
div.h,
div.i,
div.j {
left: 32%;
top: 50%;
transform: translate(-50%, -50%);
height: 72px;
background-color: transparent;
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.k,
div.l,
div.m,
div.n,
div.o {
left: 30%;
top: 50%;
transform: translate(-50%, -50%);
height: 72px;
background-color: transparent;
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.p,
div.q,
div.r,
div.s,
div.t {
left: 28%;
top: 50%;
transform: translate(-50%, -50%);
height: 72px;
background-color: transparent
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.u,
div.v,
div.w,
div.x,
div.y,
div.z {
left: 26%;
top: 50%;
transform: translate(-50%, -50%);
height: 72px;
background-color: transparent;
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media screen and (orientation: portrait) {
div.a,
div.b,
div.c,
div.d,
div.e {
left: -5%;
}
div.f,
div.g,
div.h,
div.i,
div.j {
left: -6%;
}
div.k,
div.l,
div.m,
div.n,
div.o {
left: -7%;
}
div.p,
div.q,
div.r,
div.s,
div.t {
left: -8%;
}
div.u,
div.v,
div.w,
div.x,
div.y,
div.z {
left: -9%;
}
}
谢谢!
通过设置硬件加速 css 属性强制元素的 3d 硬件加速。
在 webkit 中,抖动有时是由于 webkit 在子像素和 完全抗锯齿.
之间切换造成的* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
添加此 "axl3d" class 您想要的元素 启用 3d 加速。
使用适当的 CSS 选择器在这些元素上启用 硬件加速 。
选择合适的 Css 选择器,例如 class ".axl3d" 例如:
.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;
}