Javascript 如何使动画平滑_Javascript_Jquery_Css_Animation

Javascript 如何使动画平滑

javascript jquery css animation

Javascript 如何使动画平滑,javascript,jquery,css,animation,Javascript,Jquery,Css,Animation,我已经创建了一个只能在加载时查看的动画徽标，我正在尝试实现的是平滑度，必须有一些方法使其更平滑，但不确定如何实现，下面是我的代码请帮忙 HTML代码 <div class="logo-onload"> <div class="logo-shape1"></div> <div class="logo-shape2"></div> <div class="logo-shape3"></div> &l

我已经创建了一个只能在加载时查看的动画徽标，我正在尝试实现的是平滑度，必须有一些方法使其更平滑，但不确定如何实现，下面是我的代码

请帮忙

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>

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();

$（'.logo-shape1'）。动画（{'left'：'50%，'margin-left'：'-100px'，'margin-top'：'-100px'，'top'：'50%'），1500，'linear'）。show（）；
$（'.logo-shape2'）。动画（{'right'：'50%，'margin-right'：'-100px'，'margin-top'：'-100px'，'top'：'50%'），1500，'linear'）。show（）；
$（'.logo-shape3'）。动画（{'left'：'50%，'margin-left'：'-100px'，'margin-bottom'：'-100px'，'bottom'：'50%'），1500，'linear'）。show（）；
$（'.logo-shape4'）。动画（{'right'：'50%，'margin-right'：'-100px'，'margin-bottom'：'-100px'，'bottom'：'50%'），1500，'linear'）。show（）
.logo onload{位置：绝对；宽度：100%；高度：100%；左侧：0；顶部：0；底部：0；}
.logo-shape1{位置：绝对；左侧：0；顶部：0；背景：url(https://cdn.img42.com/4e9b933c10ade6e9f67221ad0a5f96f3.png)无重复；背景大小：包含；宽度：200px；高度：200px；显示：无；}
.logo-shape2{位置：绝对；右侧：0；顶部：0；背景：url(https://cdn.img42.com/76aedf703b3fcefe6fed03e03f376643.png)无重复；背景大小：包含；宽度：200px；高度：200px；显示：无；}
.logo-shape3{位置：绝对；左侧：0；底部：0；背景：url(https://cdn.img42.com/2efa074230b3d973e9023e064ed4448a.png)无重复；背景大小：包含；宽度：200px；高度：200px；显示：无；}
.logo-shape4{位置：绝对；右侧：0；底部：0；背景：url(https://cdn.img42.com/e4ca14cbb6f077785f634d666c0de4aa.png)无重复；背景大小：包含；宽度：200px；高度：200px；显示：无；}
* {
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}


$（'.logo-shape1'）。动画（{'left'：'50%，'margin-left'：'-100px'，'margin-top'：'-100px'，'top'：'50%'），1500，'linear'）。show（）；
$（'.logo-shape2'）。动画（{'right'：'50%，'margin-right'：'-100px'，'margin-top'：'-100px'，'top'：'50%'），1500，'linear'）。show（）；
$（'.logo-shape3'）。动画（{'left'：'50%，'margin-left'：'-100px'，'margin-bottom'：'-100px'，'bottom'：'50%'），1500，'linear'）。show（）；
$（'.logo-shape4'）。动画（{'right'：'50%，'margin-right'：'-100px'，'margin-bottom'：'-100px'，'bottom'：'50%'），1500，'linear'）。show（）
.logo onload{位置：绝对；宽度：100%；高度：100%；左侧：0；顶部：0；底部：0；}
.logo-shape1{位置：绝对；左侧：0；顶部：0；背景：url(https://cdn.img42.com/4e9b933c10ade6e9f67221ad0a5f96f3.png)无重复；背景大小：包含；宽度：200px；高度：200px；显示：无；}
.logo-shape2{位置：绝对；右侧：0；顶部：0；背景：url(https://cdn.img42.com/76aedf703b3fcefe6fed03e03f376643.png)无重复；背景大小：包含；宽度：200px；高度：200px；显示：无；}
.logo-shape3{位置：绝对；左侧：0；底部：0；背景：url(https://cdn.img42.com/2efa074230b3d973e9023e064ed4448a.png)无重复；背景大小：包含；宽度：200px；高度：200px；显示：无；}
.logo-shape4{位置：绝对；右侧：0；底部：0；背景：url(https://cdn.img42.com/e4ca14cbb6f077785f634d666c0de4aa.png)无重复；背景大小：包含；宽度：200px；高度：200px；显示：无；}
* {
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
您是否使用了swing
而不是linear
。看看这个
JS
$（'.logo-shape1'）。动画（{'left'：'50%，'margin-left'：'-100px'，'margin-top'：'-100px'，'top'：'50%，'1500，'swing'）。show（）；
$（'.logo-shape2'）。动画（{'right'：'50%，'margin-right'：'-100px'，'margin-top'：'-100px'，'top'：'50%，'1500，'swing'）。show（）；
$（'.logo-shape3'）。动画（{'left'：'50%，'margin-left'：'-100px'，'margin-bottom'：'-100px'，'bottom'：'50%，'1500，'swing'）。show（）；
$（'.logo-shape4'）。动画（{'right'：'50%，'margin-right'：'-100px'，'margin-bottom'：'-100px'，'bottom'：'50%，'1500，'swing'）。show（）
您是否使用了swing
而不是linear
。看看这个
JS
$（'.logo-shape1'）。动画（{'left'：'50%，'margin-left'：'-100px'，'margin-top'：'-100px'，'top'：'50%，'1500，'swing'）。show（）；
$（'.logo-shape2'）。动画（{'right'：'50%，'margin-right'：'-100px'，'margin-top'：'-100px'，'top'：'50%，'1500，'swing'）。show（）；
$（'.logo-shape3'）。动画（{'left'：'50%，'margin-left'：'-100px'，'margin-bottom'：'-100px'，'bottom'：'50%，'1500，'swing'）。show（）；
$（'.logo-shape4'）。动画（{'right'：'50%，'margin-right'：'-100px'，'margin-bottom'：'-100px'，'bottom'：'50%，'1500，'swing'）。show（）
或只是CSS3和一点jQuery，以了解何时要初始化动画：

演示：
.logo-onload{
  position:absolute; 
  width:100%; 
  height:100%; 
  left:0; 
  top:0; 
  bottom:0;
  &.is-loaded {
    .logo-shape {
      &--1 {
        transform:translate(calc(50vw - 100px), calc(50vh - 100px));
      }
      &--2 {
        transform:translate(calc(-50vw + 100px), calc(50vh - 100px));
      }
      &--3 {
        transform:translate(calc(-50vw + 100px), calc(-50vh + 100px));
      }
      &--4 {
        transform:translate(calc(50vw - 100px), calc(-50vh + 100px));
      }
    }
  }
}
.logo-shape{
  position:absolute; 
  width:200px; 
  height:200px; 
  transition:transform 1s ease;
  &--1  {
    background:url(https://cdn.img42.com/4e9b933c10ade6e9f67221ad0a5f96f3.png) no-repeat; 
    background-size:contain;
    left:0;
    top:0;
  }
  &--2 {
    background:url(https://cdn.img42.com/76aedf703b3fcefe6fed03e03f376643.png) no-repeat; 
    background-size:contain;
    right:0;
    top:0;
  }
  &--3 {
    background:url(https://cdn.img42.com/2efa074230b3d973e9023e064ed4448a.png) no-repeat; 
    background-size:contain;
    bottom:0;
    right:0;
  }
  &--4 {
    background:url(https://cdn.img42.com/e4ca14cbb6f077785f634d666c0de4aa.png) no-repeat; 
    background-size:contain;
    bottom:0;
    left:0;
  }
}

$(function(){
  setTimeout(function(){
    $('.logo-onload').addClass('is-loaded');
  }, 1000);
})



CSS：
.logo-onload{
  position:absolute; 
  width:100%; 
  height:100%; 
  left:0; 
  top:0; 
  bottom:0;
  &.is-loaded {
    .logo-shape {
      &--1 {
        transform:translate(calc(50vw - 100px), calc(50vh - 100px));
      }
      &--2 {
        transform:translate(calc(-50vw + 100px), calc(50vh - 100px));
      }
      &--3 {
        transform:translate(calc(-50vw + 100px), calc(-50vh + 100px));
      }
      &--4 {
        transform:translate(calc(50vw - 100px), calc(-50vh + 100px));
      }
    }
  }
}
.logo-shape{
  position:absolute; 
  width:200px; 
  height:200px; 
  transition:transform 1s ease;
  &--1  {
    background:url(https://cdn.img42.com/4e9b933c10ade6e9f67221ad0a5f96f3.png) no-repeat; 
    background-size:contain;
    left:0;
    top:0;
  }
  &--2 {
    background:url(https://cdn.img42.com/76aedf703b3fcefe6fed03e03f376643.png) no-repeat; 
    background-size:contain;
    right:0;
    top:0;
  }
  &--3 {
    background:url(https://cdn.img42.com/2efa074230b3d973e9023e064ed4448a.png) no-repeat; 
    background-size:contain;
    bottom:0;
    right:0;
  }
  &--4 {
    background:url(https://cdn.img42.com/e4ca14cbb6f077785f634d666c0de4aa.png) no-repeat; 
    background-size:contain;
    bottom:0;
    left:0;
  }
}

$(function(){
  setTimeout(function(){
    $('.logo-onload').addClass('is-loaded');
  }, 1000);
})


JS：
.logo-onload{
  position:absolute; 
  width:100%; 
  height:100%; 
  left:0; 
  top:0; 
  bottom:0;
  &.is-loaded {
    .logo-shape {
      &--1 {
        transform:translate(calc(50vw - 100px), calc(50vh - 100px));
      }
      &--2 {
        transform:translate(calc(-50vw + 100px), calc(50vh - 100px));
      }
      &--3 {
        transform:translate(calc(-50vw + 100px), calc(-50vh + 100px));
      }
      &--4 {
        transform:translate(calc(50vw - 100px), calc(-50vh + 100px));
      }
    }
  }
}
.logo-shape{
  position:absolute; 
  width:200px; 
  height:200px; 
  transition:transform 1s ease;
  &--1  {
    background:url(https://cdn.img42.com/4e9b933c10ade6e9f67221ad0a5f96f3.png) no-repeat; 
    background-size:contain;
    left:0;
    top:0;
  }
  &--2 {
    background:url(https://cdn.img42.com/76aedf703b3fcefe6fed03e03f376643.png) no-repeat; 
    background-size:contain;
    right:0;
    top:0;
  }
  &--3 {
    background:url(https://cdn.img42.com/2efa074230b3d973e9023e064ed4448a.png) no-repeat; 
    background-size:contain;
    bottom:0;
    right:0;
  }
  &--4 {
    background:url(https://cdn.img42.com/e4ca14cbb6f077785f634d666c0de4aa.png) no-repeat; 
    background-size:contain;
    bottom:0;
    left:0;
  }
}

$(function(){
  setTimeout(function(){
    $('.logo-onload').addClass('is-loaded');
  }, 1000);
})


HTML：
<div class="logo-onload">
  <div class="logo-shape logo-shape--1"></div>
  <div class="logo-shape logo-shape--2"></div>
  <div class="logo-shape logo-shape--3"></div>
  <div class="logo-shape logo-shape--4"></div>
</div>

或只是CSS3和一点jQuery，以了解何时要初始化动画：

演示：
.logo-onload{
  position:absolute; 
  width:100%; 
  height:100%; 
  left:0; 
  top:0; 
  bottom:0;
  &.is-loaded {
    .logo-shape {
      &--1 {
        transform:translate(calc(50vw - 100px), calc(50vh - 100px));
      }
      &--2 {
        transform:translate(calc(-50vw + 100px), calc(50vh - 100px));
      }
      &--3 {
        transform:translate(calc(-50vw + 100px), calc(-50vh + 100px));
      }
      &--4 {
        transform:translate(calc(50vw - 100px), calc(-50vh + 100px));
      }
    }
  }
}
.logo-shape{
  position:absolute; 
  width:200px; 
  height:200px; 
  transition:transform 1s ease;
  &--1  {
    background:url(https://cdn.img42.com/4e9b933c10ade6e9f67221ad0a5f96f3.png) no-repeat; 
    background-size:contain;
    left:0;
    top:0;
  }
  &--2 {
    background:url(https://cdn.img42.com/76aedf703b3fcefe6fed03e03f376643.png) no-repeat; 
    background-size:contain;
    right:0;
    top:0;
  }
  &--3 {
    background:url(https://cdn.img42.com/2efa074230b3d973e9023e064ed4448a.png) no-repeat; 
    background-size:contain;
    bottom:0;
    right:0;
  }
  &--4 {
    background:url(https://cdn.img42.com/e4ca14cbb6f077785f634d666c0de4aa.png) no-repeat; 
    background-size:contain;
    bottom:0;
    left:0;
  }
}

$(function(){
  setTimeout(function(){
    $('.logo-onload').addClass('is-loaded');
  }, 1000);
})



CSS：
.logo-onload{
  position:absolute; 
  width:100%; 
  height:100%; 
  left:0; 
  top:0; 
  bottom:0;
  &.is-loaded {
    .logo-shape {
      &--1 {
        transform:translate(calc(50vw - 100px), calc(50vh - 100px));
      }
      &--2 {
        transform:translate(calc(-50vw + 100px), calc(50vh - 100px));
      }
      &--3 {
        transform:translate(calc(-50vw + 100px), calc(-50vh + 100px));
      }
      &--4 {
        transform:translate(calc(50vw - 100px), calc(-50vh + 100px));
      }
    }
  }
}
.logo-shape{
  position:absolute; 
  width:200px; 
  height:200px; 
  transition:transform 1s ease;
  &--1  {
    background:url(https://cdn.img42.com/4e9b933c10ade6e9f67221ad0a5f96f3.png) no-repeat; 
    background-size:contain;
    left:0;
    top:0;
  }
  &--2 {
    background:url(https://cdn.img42.com/76aedf703b3fcefe6fed03e03f376643.png) no-repeat; 
    background-size:contain;
    right:0;
    top:0;
  }
  &--3 {
    background:url(https://cdn.img42.com/2efa074230b3d973e9023e064ed4448a.png) no-repeat; 
    background-size:contain;
    bottom:0;
    right:0;
  }
  &--4 {
    background:url(https://cdn.img42.com/e4ca14cbb6f077785f634d666c0de4aa.png) no-repeat; 
    background-size:contain;
    bottom:0;
    left:0;
  }
}

$(function(){
  setTimeout(function(){
    $('.logo-onload').addClass('is-loaded');
  }, 1000);
})


JS：
.logo-onload{
  position:absolute; 
  width:100%; 
  height:100%; 
  left:0; 
  top:0; 
  bottom:0;
  &.is-loaded {
    .logo-shape {
      &--1 {
        transform:translate(calc(50vw - 100px), calc(50vh - 100px));
      }
      &--2 {
        transform:translate(calc(-50vw + 100px), calc(50vh - 100px));
      }
      &--3 {
        transform:translate(calc(-50vw + 100px), calc(-50vh + 100px));
      }
      &--4 {
        transform:translate(calc(50vw - 100px), calc(-50vh + 100px));
      }
    }
  }
}
.logo-shape{
  position:absolute; 
  width:200px; 
  height:200px; 
  transition:transform 1s ease;
  &--1  {
    background:url(https://cdn.img42.com/4e9b933c10ade6e9f67221ad0a5f96f3.png) no-repeat; 
    background-size:contain;
    left:0;
    top:0;
  }
  &--2 {
    background:url(https://cdn.img42.com/76aedf703b3fcefe6fed03e03f376643.png) no-repeat; 
    background-size:contain;
    right:0;
    top:0;
  }
  &--3 {
    background:url(https://cdn.img42.com/2efa074230b3d973e9023e064ed4448a.png) no-repeat; 
    background-size:contain;
    bottom:0;
    right:0;
  }
  &--4 {
    background:url(https://cdn.img42.com/e4ca14cbb6f077785f634d666c0de4aa.png) no-repeat; 
    background-size:contain;
    bottom:0;
    left:0;
  }
}

$(function(){
  setTimeout(function(){
    $('.logo-onload').addClass('is-loaded');
  }, 1000);
})


HTML：
<div class="logo-onload">
  <div class="logo-shape logo-shape--1"></div>
  <div class="logo-shape logo-shape--2"></div>
  <div class="logo-shape logo-shape--3"></div>
  <div class="logo-shape logo-shape--4"></div>
</div>


您可以使用一些缓和，使动画不仅仅是线性的。我尝试添加缓和插件，但没有效果。动画已经是平滑的。如果您想要超级平滑，请在哪个系统上使用CSS动画或requestAnimationFrame（）
平滑？另外，你能描述一下动画到底在做什么，而不是依赖人们观看小提琴吗？想一想从现在起需要找到这个月。你可以使用一些缓和，这样动画就不仅仅是线性的。我尝试添加缓和插件，但没有效果。动画已经很平滑了，如果你想要超级平滑，那么使用CSS动画或requestAnimationFram