Question

我创建了一个动画徽标，只能在加载时查看，我正在尝试实现的是平滑性，必须有一些方法使其更加流畅，但不确定如何，这里是我的代码{{ 3}}

请帮忙！

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, 'swing').show(); $('.logo-shape3').animate({'left': '50%','margin-left': '-100px','margin-bottom': '-100px','bottom': '50%'},1500, 'swing').show(); $('.logo-shape4').animate({'right': '50%','margin-right': '-100px','margin-bottom': '-100px','bottom': '50%'},1500, 'swing').show();

Answer 2

或者只是 CSS3 以及一些jQuery来了解您何时想要启动动画：

<强>演示：

https://jsfiddle.net/4uo2njfh/

<强> 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;
  }
}

<强> JS ：

$(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>

Answer 3

＆＃13;

$('.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();

＆＃13;

.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;}


* {
  -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

- ）

如何使动画流畅

3 个答案: