この弾性アニメーション効果の振幅を大きくするにはどうすればよいですか？

Question

Raphael.jsを使用して、SVGサークルの半径をホバーにアニメーションします。私はライブラリが提供する在庫elasticの効果が好きですが、振幅を増やしたいと思います。つまり、円を育てるときに円を大きくして収縮させます。余分なスピードではなく、大きくなり、小さくなるエフェクトが実行されるとき。

私はelastic機能をコピーしsuper_elasticと改名し、ここでそれをいじってきた：

http://jsfiddle.net/ryWH3/

私は機能がどのように動作するか分からないので、私はちょうどその数値いじりてきました値は何が起こるか見る。これまでのところ、私は自分の望むことをするようなものは見つけていません。誰もが私が探していることをする可能性のある機能（または別の機能）を変更することをお勧めできますか？

ありがとうございます！

---

UPDATE：回答について

ありがとう！申し訳ありませんが、私はこれを非常にうまく説明していないかもしれません。私は、「もっと大きくなり、小さくなる」という声明が特に誤解を招いていたと推測しています。

rプロパティは、アニメーションの実行後にサークルの最終半径に影響することがわかりました。私がやろうとしているのは、elasticアニメーションをより大きな振幅で「バウンス」させることです。つまり、アニメーションは引き続きサークル用に設定した値のrと同じですが、elasticのトランジションをもっと劇的にしたいと思います。トランジション中にサークルをもっともっと積極的に拡大したり縮小したりしてください最終的に値rに到着します。これを行うには、効果をより劇的にするために、elastic関数で使用されている式を変更する必要があると仮定しています。

うまくいけばそれは意味があります - 例を示すことなく説明するのは難しいですが、例があればこの質問を投稿する必要はありません。 ;-)

Answer 1

OK、ここでは新しい答えがあります。イージング（増幅）の効果を拡大するには、イージング結果にこのような乗数を掛ける必要があります。

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) 

あなたは初めに大きなスイングのより、最後に小さな揺れの少ないを見

Answer 2

上にカーソルを置くと円が大きくなるようにするには、上に移動したホバリング半径を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()メソッドのパラメータで行われます。

アニメーションを遅くしたい場合は、アニメーションの時間を増加させる（animate()も大きな数字に2つの1000引数を作る。あなたがアニメーションをスピードアップしたい場合は、あなたがそれらの二つの数字を小さくする。これらの数値が小さいほど、アニメーションの実行時間が短いことを意味します（より速いことを意味します）。