1

そのため、フラッシュ ウィジェットを HTML/CSS/JS に変換していますが、画像の中心方向のズーム効果をエミュレートする際に問題が発生しています。

したがって、現在、HTML には次のような構造があります。

<div id="outer">
  <img />
</div>

次のような CSS を使用します。

#outer{
  width: 690px;
  height: 440px;
  position: relative;
}
#outer img{
  width: 690px;
  height: 440px;
  position: absolute;
  top: 0px;
  left: 0px;
}

次に、jQuery で、ズーム効果を作成するためにこれを行っています。

$image = $("#outer img");
scale = 1.16;
var w = parseInt($image.data("width")); //Set earlier to 690px
var h = parseInt($image.data("height")); //Set earlier to 440px
$image
  .animate({
    width: w*scale,
    height: h*scale,
    left: -(((w*scale) - w)/2),
    top: -(((h*scale) - h)/2)
  }, 5000, "linear");

ここでjFiddle

私が見つけたこの特定の画像では少し見にくいですが、クライアントから提供された画像では (何らかの理由で) より簡単に確認できます。私が見ているのは、左/上/幅/高さの小数値が常に中央に配置されるのに十分なほど整列していないためであると思われるギザギザ/揺れ/ジッターの動きです。

これを行うためのより良い方法はありますか、それともより良い結果を生み出すイージング関数はありますか?

何かクリアできることがあれば、教えてください。

ありがとう！

編集：左/上が1減少するたびに幅/高さを2ずつ増加させて常に中央に保つイージング関数を書くことができるかどうか考え始めましたが、どうすればよいかわかりませんjQueryでそれを行う。step関数の引数をいじってみましたanimateが、左/上のプロパティを整数値(整数)だけで強制的に増減させる方法がわかりません...

4

3 に答える 3

6

いつでも CSS3 アニメーションを試すことができますが、IE9 ではサポートされていないという大きな問題があります...

ただし、かなりスムーズです。ここで結果を確認してください: http://jsfiddle.net/YSJQu/

#outer img {
    (...)
    animation:zoom 5s;
    -moz-animation:zoom 5s; /* Firefox */
    -webkit-animation:zoom 5s; /* Safari and Chrome */
    -o-animation:zoom 5s; /* Opera */
}

@keyframes zoom {
    from { transform:scale(1) }
    to { transform:scale(1.2) }
}
@-moz-keyframes zoom {
    from { -moz-transform:scale(1) }
    to { -moz-transform:scale(1.2) }
}
@-webkit-keyframes zoom {
    from { -webkit-transform:scale(1) }
    to { -webkit-transform:scale(1.2) }
}
@-o-keyframes zoom {
    from { -o-transform:scale(1) }
    to { -o-transform:scale(1.2) }
}
于 2013-01-12T01:43:25.733 に答える
2

HTMLではアニメーションは難しいテーマでした。一部のソリューションはデスクトップではスムーズに機能しますが、モバイルではそれほどスムーズに機能しません。その逆も同様です。ブラウザによっては、通常、パフォーマンスも異なります。

Flashのバックグラウンドをお持ちの場合は、 GSAPJSを簡単にお勧めします。jQueryよりもはるかに優れたパフォーマンスを発揮します。そのjavascriptベースであり、JSとASの両方でほぼ同じ構文を持っています。

また、優れた速度テストも提供します。たぶんあなたは試してみたいと思います。

于 2013-01-12T00:56:59.527 に答える
1

jsFiddle デモ2 番目の例

ズーム要件を処理する優れた jQuery ライブラリは.transit() pluginです。

$(".thumbnail-1").hover(
    function () {
     $(this).stop(true,true).transition({ scale: 1.3 });
  }, 
    function () {
    $(this).stop(true,true).transition({ scale: 1.0 });
  }
);
于 2013-01-12T02:06:20.577 に答える