0

jQuery Animateを使用して、画像にパンズーム効果を作成しています。全体として、2つの例外を除いてうまく機能します。

最初にアニメーションを開始し、壁にぶつかったように見えます。次にズームインを続けます。これを防ぎ、モーションを1つのスムーズなモーションにする方法はありますか。

2つ目は、特に最後の動きが少しぎくしゃくしていることです。これをスムーズにする方法はありますか？何らかの形のイージングを追加してみる必要がある場合は、ページでイージングを使用しています。（これはFirefoxとChromeでテストされており、どちらもぎくしゃくしています。）

これがアニメーションのjsFiddleです。

注：私はjQuery 1.8.3を使用しており、CSSを使用できますが、ブラウザー間の互換性のためにjQueryを使用しています。（残念ながら、私のユーザーの大部分はIEを使用しています。）

HTML

<div style="width:1140px; height:500px; overflow:hidden; text-align:center;">
    <img id="pan-zoom" style="width:900px; height:600px; position:relative; top:-80px; left:0;" alt="European Bee-eaters" src="http://upload.wikimedia.org/wikipedia/commons/9/96/Pair_of_Merops_apiaster_feeding.jpg" />
</div>

JS

$(window).load(function() {
    $('#pan-zoom').animate({
        width: '2141px',
        height: '1428px',
        top: '-200px',
        left: '-405px'
    }, 8000, function() {
            // Fade In Hidden DIV
    });
});
4

3 に答える 3

1

変化する

<div style="width:1140px; ...

に

<div style="width:900px; ...

ズームインする前に、画像を親の幅に合わせて拡大縮小します。これは、削除する効果です。

fiddeを更新しました。

編集：コメントされているように、または絶対位置。

于 2013-02-24T04:33:22.227 に答える
1

アニメーションを高速化すると、よりスムーズに表示されます。アニメーションが遅いほど、アニメーションの荒さが目立ちます。

イージングを線形に変更することも同様に役立つようです。デフォルトのイージング (スイング) の最後が遅いため、アニメーションの粗さが非常に目立ちます。以下のコードは線形イージングを使用しており、2 倍の速度で高速化されています (@loxxy が提案したように、外側の幅を 900px に変更しています)。

$(window).load(function() {
    $('#pan-zoom').animate({
        width: '2141px',
        height: '1428px',
        top: '-200px',
        left: '-405px'
    }, 4000, 'linear', function() {
        // Fade In Hidden DIV
    });
});

大規模なアニメーションをスムーズかつスローにすることは、WebGL などのハードウェア サポートによってのみ可能になる場合があります。それ以外は、スムーズかスローか、どちらか重要な方を選択してください。

于 2013-02-24T04:44:35.603 に答える
0

css 変換プロパティのスケール機能を使用すると、両方の問題が解決されます。jquery.animate関数はこれらと互換性がないと思います（ユーザーjqueryを使用してから長い間フォローアップしていませんでした）。jquery を使い続けたい場合は、プラグインを使用するか、プラグインを作成する必要があります。

フィドルでは、左、上、幅、および高さのプロパティを使用します。これは、webkit では特にぎくしゃくします。

Jquery 変換プラグインの上位 Google 結果: http://ricostacruz.com/jquery.transit/

于 2013-02-24T04:40:00.473 に答える