誰もこの種のゴム状効果のアルゴリズムを知っていますか？

Question

私はいくつかのアニメーションをやっており、ウェブ上にthisのようなものを実装したいと思います。私はHTMLキャンバスがこの種の仕事をすることができると考えていました。私は画像の一部を拡大縮小することができるからです。私はアルゴリズムを実際に動作させるだけでいいです。

効果は弾力性があります。ウィンドウが小さければ、復元時のウィンドウの弾力性が大きくなります。私は、Web画像でこの作業を行うことができると考えていました。ユーザーが画像をクリックすると、スケーリングの退屈な方法ではなく、このような効果でスケールされます。

これはubuntuです。実際にアニメーションをどのように実装しているかをソースコードで確認できます。しかし、私はそれを見つける場所を知らない。または、私はちょうどPHP、javascriptを理解しているので、私はLinuxで書かれたコードを理解していません。基本的に私はソフトウェア開発者ではありません。私の中心的な専門知識はウェブ開発です。

http://www.youtube.com/watch?v=hgQP-aFragQ

Answer 1

あなたはあなたのためにこれをやろうとしているWebベースのソリューションを見つけるつもりはありません。このようなことが必要な場合は、Webページに埋め込まれた別のメディアボックスで実行されるフラッシュやその他のアプリケーション（LenniはJavaに言及されている）になければなりません。

人々は大きな派手なアニメーションを望んでいない。「退屈な」ものがもっと使いやすくなったら、はるかに良いと思う。

Answer 2

私は、あなたの最善の策はJohn ResigのProcessing.jsを見ていると思います。

処理はJava用のアニメーション言語です。ジョンはそれをキャンバスを使ってブラウザに移植しました。

Answer 3

最初に私はここで実際に使用されているアルゴリズムについてはわかりません。

しかし、私はポイントのグリッド（例えば10x10）を作成することでこれを攻撃します。各ポイントは減衰されたスプリングによって隣接しています。エッジ/コーナーポイントをバネ付きのスクリーンに固定することは価値があるかもしれません。

グリッドを変形させ（スプリングを伸ばして圧縮する）、スプリングレスポンスをモデリングすると、示されているような興味深い効果が得られます。アニメーションが予測可能な場合は、ポイントをあらかじめ計算されたパスに沿って高速アニメーションにすることができるように、パターンを記録することができます。

次に、イメージを分割してグリッドにマップする方法を理解する必要があります。サーバ上でをにするほうが良いでしょうが、キャンバスを使用するとクライアントがそれを行うことができます。

svg & vmlはプラグインなしで動作し、コードに似ていますが、十分にイメージの変形がないとは思いません。しかし、無制限に（そしてすばやく）拡大縮小したり回転したりすることができます.2つのセル画像ポイントを4つすべてではなくグリッドに固定するだけで、興味深いアニメーションが得られます。

減衰されたスプリングをモデル化する方法については、各ポイントの質量（どれぐらいの重さ）、スプリングが各ポイントにどれくらいの力を及ぼしているかを記録する必要があります（圧縮/伸張のスカラーそれはベクトルである）と点上の減衰力（点の速度の二乗に対する抵抗力）である。

確かに、物理的なモデリングですが、かなり可能です。

応答が遅くなることがあります。特にIEで。キャンバスにはIEでプラグインが必要なので、キャンバスを使用すると、IEの人々はそれを見ません。 SVGはIE以外のほとんどすべてで動作しますが、同様のVMLを持っています。 http://raphaeljs.com/は利用可能なものを使用するライブラリです。これはチューニングに挑戦するでしょう:)

これを行うが、それは常にクロムで最高に見える、V8のjavascriptエンジンは、この種の作業のために他のすべてを凌駕する。 IEは最も遅いjavascriptエンジンを持っています。