Recreate pralle Lockerung mit Feder

Question

Blick durch velocity.js Changelog Lockerung Ich lese:

... 2) Die Rückseite, bounce, und elastische Easing wurden entfernt. Verwenden Sie stattdessen Federphysik. ...

Ich habe mich gefragt, ob es eine einfache Möglichkeit, den easeOutBounce Effekt zu erstellen, die mit jQuery animieren mit der spring Lockerung zur Verfügung steht, dass benutzerdefinierte Parameter akzeptiert?

Standardmäßig können Sie die spring Lockerung wie folgt verwendet werden:

$('.ball').velocity({ top: ['200px', 'spring']}, { duration: 2000 }); 

Die Feder Lockerung kann angepasst werden, indem [tension, friction] Angabe statt vorbei gerade die Lockerung Schlüsselwort spring. So können Sie tun:

$('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 }); 

ich Fehler zu verstehen, welche Reibung und Spannungswerte zu verwenden, um ein easeOutBounce easing zu erreichen. Ich versuche, den Ball zurückspringen zu lassen, wenn er 200px erreicht - aber stattdessen agiert er als eine "lose" Feder, die unter die Bodenlinie geht, anstatt zu springen.

Ist dies auf einfache Weise möglich mit velocity.js nur, so dass ich keine benutzerdefinierten Beschleunigungsfunktionen selbst implementieren muss?

$('button').on('click', function(){ 
 
    $('.ball').css('top', '120px'); 
 
    $('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 }); 
 
});

.display { 
 
    width: 240px; 
 
    height: 280px; 
 
    position: relative; 
 
    border: 1px solid #000; 
 
} 
 
.ball { 
 
    position: absolute; 
 
    top: 120px; 
 
    left: 40px; 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
.ball:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 100%; 
 
    background: red; 
 
} 
 
.ground { 
 
    position: absolute; 
 
    top: 220px; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 1px; 
 
    background: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script> 
 

 
<button>Throw ball</button> 
 
<div class="display"> 
 
    <div class="ball"></div> 
 
    <div class="ground"></div> 
 
</div>

Answer 1

Als der Typ, der in Geschwindigkeit half Schaffung Lockerung, ich verstehe es nicht möglich Bounce und elastisch Easing mit ihm zu schaffen. Aber wenn du Julian (den Erfinder von Velocity) fragst, wird er wahrscheinlich sagen, dass es dir besser geht, wenn die Feder leichter wird als mit Bounce.

Nachdem dies gesagt wurde, ist es am besten, diese Lockerungen selbst auf Velocity zu registrieren. Sehen Sie sich die Erklärungen unten auf this thread an.