Wie man Animation glatt macht

Ich habe ein animiertes Logo erstellt, das nur auf Belastung angezeigt werden kann, was ich versuche zu erreichen ist Glätte, es muss einen Weg geben, es weicher zu machen, aber nicht sicher, wie, hier ist Mein Code in JSFiddle Wie man Animation glatt macht

Bitte helfen!

HTML-Code

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

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

und JS-Code ist

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

Quelle

2016-07-13 Sanjeev Kumar

Sie einige Lockerungen verwenden könnte, so dass die Animation nicht nur linear – Andrew

ist habe ich versucht, Lockerung Plugin hinzugefügt, aber keine Wirkung –

die Animation schon glatt ist, wenn Sie super glatt wollen, dann CSS-Animation verwenden oder ' requestAnimationFrame() ' –

Haben Sie verwenden swing statt linear. Überprüfen Sie diese 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();

Quelle

2016-07-13 11:02:59

Viel besser! scheint besser als linear zu sein –

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

;-)

Quelle

2016-07-13 10:57:48 user3173022

Danke für die Antwort, es beginnt langsam, aber bei letzter Geschwindigkeit erhöht :( –

Sie können diese comibinated Syntax-Code: http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp Trey, und versuchen Sie es! :-) – user3173022

Oder nur CSS3 und ein bisschen jQuery zu wissen, wann die Animation init wollen:

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>

Quelle

2016-07-13 11:19:03 Gigi

Wie man Animation glatt macht

Antwort

Verwandte Themen