javascript - jqueryモーフィング画像効果

Question

私はこれが不可能だと確信していますが、. . .

jqueryでモーフィング効果を取得しようとしています(フラッシュ画像回転子のこのページのように-> http://www.sikids.com )。または、少なくとも非常によく似た効果です。jquery UI にはいくつかのモーフィング効果があることがわかりましたが、それを見つけることができませんでした。これは私たちのクライアントにとって重要なことなので、できるだけ近い効果があれば最高です。

Answer 1

同様に遅くなる可能性がありますが、キャンバスを必要としない別のオプションは、1x1 ピクセル画像を使用してピクセレーション アルゴリズムを記述することです。

最初のステップは、画像を 32 色のパレットに縮小することです。

次に、ピクセル化の開始レベルで画像をパレットにマップします。たとえば、画像が 100px x 200px で、最初のレベルのピクセル化が 50 x 100 のグリッドである場合、画像を 50x100 = 5000 に置き換え、<IMG>それぞれをカラー パレットの背景画像に置き換えます。

これはサーバー側で行う必要があり、次のように変換される javascript 配列として渡されます<IMG>。

image1 = [3, 4, 1, 2, ...];

次のようになります。

<div id="image1Pixelation">
  <img src="image1_3.png" width="2px" height="2px"/>
  <img src="image1_4.png" width="2px" height="2px"/>
  <img src="image1_1.png" width="2px" height="2px"/>
  <img src="image1_2.png" width="2px" height="2px"/>
  ...
</div>

次に、javascript で の一部を拡大し、一部の<IMG>を削除してグリッドを縮小し、<IMG>停止倍率に達するまで続けます。

次に、それを高倍率の新しい画像に置き換え、新しい画像のアルゴリズムを逆にします。

Answer 2

MorpherJSと呼ばれるJavaScriptライブラリは、この目的のために開発されました。これは完全にクライアント側のJavaScriptです。MorpherJSのいくつかのデモはここにあります。HTMLキャンバス要素を使用して、モーフィング画像アニメーションを表示します。

Answer 3

不可能ではありませんが、遅くなる可能性があります。

画像データを取得して変換するには、canvas を使用する必要があります。this SO answerとthis pluginを確認してください。これにより、作業が簡単になります。私はそのプラグインを使用していないので、IE では追加のキャンバス プラグインを含める必要があるかもしれません。