javascript - 如何让动画流畅

Question

我创建了一个只能在加载时查看的动画 Logo ，我想要实现的是平滑度，必须有一些方法可以使它更平滑，但不确定如何，这是我在 JSFiddle 中的代码

请帮忙!

HTML代码

<div class="logo-onload">
  <div class="logo-shape1"></div>
  <div class="logo-shape2"></div>
  <div class="logo-shape3"></div>
  <div class="logo-shape4"></div>
</div>

CSS 代码

.logo-onload{position:absolute; width:100%; height:100%; left:0; top:0; bottom:0;}
.logo-shape1{position:absolute; left:0; top:0; background:url(https://cdn.img42.com/4e9b933c10ade6e9f67221ad0a5f96f3.png) no-repeat; background-size:contain; width:200px; height:200px; display:none;}
.logo-shape2{position:absolute; right:0; top:0; background:url(https://cdn.img42.com/76aedf703b3fcefe6fed03e03f376643.png) no-repeat; background-size:contain; width:200px; height:200px; display:none;}
.logo-shape3{position:absolute; left:0; bottom:0; background:url(https://cdn.img42.com/2efa074230b3d973e9023e064ed4448a.png) no-repeat; background-size:contain; width:200px; height:200px; display:none;}
.logo-shape4{position:absolute; right:0; bottom:0; background:url(https://cdn.img42.com/e4ca14cbb6f077785f634d666c0de4aa.png) no-repeat; background-size:contain; width:200px; height:200px; display:none;}

和JS代码是

$('.logo-shape1').animate({'left': '50%','margin-left': '-100px','margin-top': '-100px','top': '50%'},1500, 'linear').show();
$('.logo-shape2').animate({'right': '50%','margin-right': '-100px','margin-top': '-100px','top': '50%'},1500, 'linear').show();
$('.logo-shape3').animate({'left': '50%','margin-left': '-100px','margin-bottom': '-100px','bottom': '50%'},1500, 'linear').show();
$('.logo-shape4').animate({'right': '50%','margin-right': '-100px','margin-bottom': '-100px','bottom': '50%'},1500, 'linear').show();

Answer 1

您是否使用了 swing 而不是 linear。检查这个fiddle .

JS

$('.logo-shape1').animate({'left': '50%','margin-left': '-100px','margin-top': '-100px', 'top': '50%'},1500, 'swing').show();
$('.logo-shape2').animate({'right': '50%','margin-right': '-100px','margin-top': '-100px','top': '50 %'},1500, '摆动').show();
$('.logo-shape3').animate({'left': '50%','margin-left': '-100px','margin-bottom': '-100px','bottom': '50 %'},1500, '摆动').show();
$('.logo-shape4').animate({'right': '50%','margin-right': '-100px','margin-bottom': '-100px','bottom': '50 %'},1500, '摆动').show();