如何增加此彈性動畫效果的幅度？

我使用Raphael.js在懸停時爲SVG圓的半徑設置動畫。我喜歡圖書館提供的股票elastic效果，但我想要增加幅度 - 即讓圈子在徘徊時隨着更多趣味增長和縮小 - 而不是額外的速度，但要增大和縮小當效果運行時。如何增加此彈性動畫效果的幅度？

我複製了elastic功能，並更名爲super_elastic，並已與在這裏擺弄：

http://jsfiddle.net/ryWH3/

我不知道該函數是如何工作的，所以我剛剛被其數值修修補補值來看看會發生什麼。到目前爲止，我還沒有發現任何看起來像我想要的東西。任何人都可以推薦任何修改的功能（或完全不同的功能），可能會做我在找什麼？

謝謝！

UPDATE：

感謝您的答覆！對不起，我可能沒有解釋得很好。我猜測這個聲明「變大了，變小了」特別容易讓人誤解。

我知道r屬性影響動畫運行後圓的最終半徑;但是我試圖做的是讓elastic動畫以更大的幅度「反彈」。也就是說，雖然動畫仍然會以我爲圓圈設置的r相同的值開始和結束，但我希望elastic轉換更加戲劇化 - 在轉換過程中更加積極地擴大和縮小圓圈在抵達最後的r值之前。要做到這一點，我假設我需要修改elastic函數中使用的公式，以使效果更具戲劇性。

希望這是有道理的 - 這是很難解釋沒有示例，但如果我有一個例子，我不需要發表這個問題。 ;-)

來源

2011-12-31 Bungle

好的，根據您的說明，這裏有一個新的答案。要擴大緩動（放大）的效果，您需要將緩動結果乘以這樣的乘數。

return 6 * Math.pow(2, -10 * n) * Math.sin((n - .075) * (2 * Math.PI)/.3) + 1;

但是，當你這樣做時，你會發現大部分放大過快。小部分變慢，大部分變快。所以，更大的步伐需要改變。我的猜測（似乎工作）是將Math.sin()更改爲Math.cos()，因爲這改變了階段，它似乎工作，你可以看到這裏：http://jsfiddle.net/jfriend00/fuaNp/39/。

return 6 * Math.pow(2, -10 * n) * Math.cos((n - .075) * (2 * Math.PI)/.3) + 1;

要理解這個緩動函數的其他事情。此部分：

(2 * Math.PI)/.3

確定有多少次彈跳週期。倍數越大，它的反彈就越多（但反彈速度會越快）。倍數越小，反彈越少（反彈越慢）。

這部分：

Math.pow(2, -10 * n)

確定彈跳如何快速衰減，因爲該值變得更小的n值較大得到其否定其他乘法器當n變大。所以：

Math.pow(2, -5 * n)

使得衰減慢（你看到年初增加較大的波動，少較小的波動末

來源

2011-12-31 19:50:46 jfriend00

這是完美的！正是我在尋找的東西，我真的很感謝徹底的解釋 - 基於此，我可以稍微調整一下以獲得我想要的確切效果，非常感謝。 – Bungle 2011-12-31 23:11:57

爲了讓你的鼠標懸停在它上面的圓圈更大，你改變了我在此處調高到r: 100的半徑。爲了使小一圈，你從25更改初始大小和unhovered大小，像這樣小：

var paper = Raphael(0, 0, 300, 300), 
    circle = paper.circle(150, 150, 10); // <== change initial radius here to make it smaller 

circle.attr({ 
    'stroke': '#f00', 
    'stroke-width': 4, 
    'fill': '#fff' 
}); 
circle.hover(function() { 
    this.animate({ r: 100 }, 1000, 'super_elastic'); // <== change enlarged size here 
}, function() { 
    this.animate({ r: 10 }, 1000, 'super_elastic'); // <== change small size here 
}); 

// no changes made to the easing function 
Raphael.easing_formulas.super_elastic = function(n) { 
    if (n == !!n) { 
    return n; 
    } 
    return Math.pow(2, -10 * n) * Math.sin((n - .075) * (2 * Math.PI)/.3) + 1; 
};

你可以在這裏看到：http://jsfiddle.net/jfriend00/fuaNp/。

super_elastic()函數是緩動函數，它控制動畫在週期不同部分移動的速度。緩和不控制整體幅度。這是通過參數animate()方法完成的。

如果你想減慢動畫速度，你可以增加動畫的時間（使兩個1000參數爲animate()爲更大的數字，如果你想加快動畫速度，可以將這兩個數字縮小。數字越小意味着動畫的運行時間越短（這意味着更快）。

來源

2011-12-31 07:43:51 jfriend00

感謝您的回覆，請參見上述澄清我的更新！。 – Bungle 2011-12-31 18:37:21

如何增加此彈性動畫效果的幅度？

回答

相關問題