Как сделать анимацию гладкой

У меня есть анимированный логотип, который можно просматривать только при загрузке, то, что я пытаюсь достичь, является гладкостью, должен быть какой-то способ сделать его более гладким, но не уверен, как это сделать. мой код в 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();

источник

2016-07-13 Sanjeev Kumar

Вы можете использовать некоторое ослабление, так что анимация не просто линейный – Andrew

я попытался добавить ослабление плагина, но никакого эффекта –

анимации уже гладко, если вы хотите супер гладкие, то использовать CSS анимацию или ' requestAnimationFrame() ' –

Вы использовали swing вместо linear. Проверьте это fiddle.

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

источник

2016-07-13 11:02:59

Гораздо лучше! кажется лучше, чем линейный –

$('.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-onload{position:absolute; width:100%; height:100%; left:0; top:0; bottom:0;} 
 
\t .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;} 
 
\t .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;} 
 
\t .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;} 
 
\t .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; 
 
\t -moz-transition: all 0.5s ease; 
 
\t -ms-transition: all 0.5s ease; 
 
\t -o-transition: all 0.5s ease; 
 
\t transition: all 0.5s ease; 
 
}

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

;-)

источник

2016-07-13 10:57:48 user3173022

Спасибо за ответ, он начинает медленно, но, наконец, скорость увеличивается :( –

Вы можете использовать этот код дополняемого синтаксиса: http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp trey и попробуйте! :-) – user3173022

Или просто CSS3 и немного JQuery, чтобы знать, когда вы хотите, чтобы инициализировать анимации:

Demo:

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>

источник

2016-07-13 11:19:03 Gigi

Как сделать анимацию гладкой

ответ

Смежные вопросы