tái nảy giảm bớt với mùa xuân dịu

Question

Nhìn qua velocity.js changelog tôi đọc:

... 2) Mặt sau, thư bị trả lại, easing đàn hồi đã được gỡ bỏ. Sử dụng vật lý mùa xuân để thay thế. ...

tôi đã tự hỏi nếu có bất kỳ cách đơn giản để tái tạo các hiệu ứng easeOutBounce đó là có sẵn với jQuery động bằng cách sử dụng spring nới lỏng định, chấp nhận các thông số tùy chỉnh?

Theo mặc định, bạn có thể sử dụng spring nới lỏng định như sau:

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

Mùa xuân dịu thể được tùy chỉnh bằng cách xác định[tension, friction] thay vì đi qua chỉ là từ khóa nới lỏng spring. Vì vậy, bạn có thể làm:

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

Tôi không hiểu giá trị ma sát và sức căng để sử dụng để đạt được một easeOutBounce easing. Tôi đang cố gắng làm cho quả bóng nảy lên khi nó đạt đến 200px - nhưng thay vào đó nó hoạt động như một mùa xuân "lỏng lẻo", đi xuống dưới mặt đất thay vì nảy lên.

Điều này có thể thực hiện một cách đơn giản với velocity.js chỉ, vì vậy tôi không cần phải tự mình thực hiện các chức năng nới lỏng tùy chỉnh?

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

Là anh chàng đó đã giúp tạo ra rằng nới lỏng trong Velocity, tôi hiểu nó không thể tạo ra thư bị trả lại easing đàn hồi với nó. Nhưng nếu bạn hỏi Julian (người tạo ra Velocity), anh ta có lẽ sẽ nói rằng bạn tốt hơn với việc nới lỏng mùa xuân hơn là bị trả lại.

Có nói rằng, đặt cược tốt nhất của bạn là tự đăng ký các khoản tiết kiệm này trên Vận tốc. Xem phần giải thích ở cuối số this thread.