1

私はまったく新しいのでcanvas、それを使ってオブジェクトをアニメートします。少し調べてみましたが(たとえば、RaphaelJSを見つけました)、「モーフィング」サークルを作成する方法に関する一般的な回答やチュートリアルは見つかりませんでした。

ここに画像の説明を入力してください

ここに投稿した画像は、私がやりたいことです。を介してアニメーション化され、輪郭をわずかにモーフィングするone円を作成したいと思います。endlesslyrandomizer

これはこのフォーラムの「本当の」質問ではないかもしれませんが、誰かがそのようなことを行う方法についていくつかのヒントやコツを提供できるかどうか疑問に思います。

「そのようなことをする方法」とは、実際に円をモーフィングする方法について話していることです。ランダム化された関数の影響を受けるエッジに沿って数十のアンカーポイントを持つ円を「数学的に」作成する必要がありますか?

私はこれについていくつかの最初の助けを本当に感謝します。

前もって感謝します。

4

3 に答える 3

3

円は、4 つの 3 次曲線 (各 4 分の 1 と接線上のコントロール ポイントに 1 つ - コントロール セグメントの正しい長さをグーグルで検索するか、自分で計算する -ここを参照) によって合理的にうまく近似できます。ウォブリング効果を得るために小さな半径。

于 2012-11-11T09:39:53.223 に答える
1

ランダム化された関数の影響を受けるエッジに沿って数十のアンカーポイントを持つ円を「数学的に」作成する必要がありますか?

はい、そうですが、「数十」を作成する必要はありません。

.bezierCurveTo()および関数は.quadraticCurveTo()、制御点間の滑らかな補間曲線を提供するのに便利です。

于 2012-11-11T09:39:36.043 に答える
0

ラスター画像を使用できる場合は、すべてのポイントに対して、sin 関数を使用して x 軸に沿って移動できます。y 軸に沿って同じ関数を実行できますが、代わりに単純にピクセルを移動する代わりに、ピクセルを 2 倍にすることができます。これにより、モーフィング円が得られますが、他の形状でも機能します。

于 2012-11-11T09:42:32.120 に答える