重新創建反彈彈簧寬鬆

通過velocity.js的changelog找我讀寬鬆：重新創建反彈彈簧寬鬆

... 2）背部，彈跳和彈漸變效果已被刪除。改爲使用彈簧物理學的。 ...

我想知道是否有重新創建效果可與jQuery使用spring寬鬆動畫什麼簡單的辦法，接受自定義參數？

默認情況下，你可以使用spring寬鬆如下：

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

彈簧寬鬆可以通過指定[tension, friction]，而不是通過剛剛緩和關鍵字spring定製。所以，你可以這樣做：

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

我不理解摩擦和緊張的哪些值，以實現easeOutBounce easing使用。我試圖在球達到200px時使球彈跳 - 但是它會作爲一個「鬆散的」彈簧，在地面線以下而不是彈跳。

這是可以用velocity.js只用做一個簡單的方法，所以我不需要自己實現自定義緩動函數嗎？

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

來源

2014-09-29 easwee

作爲，幫助創建在速度趨於緩和，我知道這是不可能的創建反彈和彈性的漸變效果與它的人。但是如果你問Julian（Velocity的創造者），他可能會說你的春季寬鬆比反彈更好。

話雖如此，你最好的選擇是在Velocity上自己註冊這些緩和。查看this thread底部的解釋。

來源

2014-09-30 10:21:55 ydaniv

感謝您的信息 - 這正是我最終做的 - 使用jQuery UI反彈並將其擴展到速度。我只是感到困惑，因爲changelog有點像春天寫的，用自定義參數代替反彈效果 - 它不會因爲物理效果不同而產生反彈效果。 – easwee 2014-09-30 14:08:00

重新創建反彈彈簧寬鬆

回答

相關問題