Ricrea rimbalzo facilitando con molla allentamento

Question

Osservando attraverso velocity.js changelog ho letto:

... 2) La parte posteriore, rimbalzo, e interpolazioni elastici sono stati rimossi. Utilizzare invece la fisica della molla . ...

Mi chiedevo se c'è un modo semplice per ricreare l'effetto easeOutBounce che è disponibile con jQuery animare utilizzando il spring easing, che accetta parametri personalizzati?

Per impostazione predefinita è possibile utilizzare il spring easing come segue:

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

La molla facilitando può essere personalizzato specificando [tension, friction] invece di passare semplicemente la parola chiave facilitando spring. Così si può fare:

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

sto riuscendo a capire quali valori di attrito e tensione da utilizzare al fine di ottenere un easeOutBounce easing. Sto cercando di far rimbalzare la palla quando raggiunge 200px, ma invece agisce come una molla "libera", andando al di sotto della linea di terra invece di rimbalzare.

È possibile farlo in modo semplice con velocity.js solo, quindi non è necessario implementare funzioni di andamento personalizzate da solo?

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

Essendo il ragazzo che ha aiutato a creare quella allentamento nel Velocity, ho capito che non è possibile creare rimbalzo e easing elastiche con esso. Ma se chiederai a Julian (creatore di Velocity) probabilmente dirà che stai meglio con un allentamento primaverile che con rimbalzo.

Detto questo, la soluzione migliore è registrarsi da soli su Velocity. Controlla le spiegazioni nella parte inferiore di this thread.