1

jquery animate を長時間使用すると、小さな変更のアニメーションが信じられないほどぎくしゃくすることに気付きました。これを修正する唯一の方法は、時間を大幅に短縮し、さらにスケーリングすることです。しかし、一部のプロジェクトでは、これは不可能です...

CSSトランジションについて調べてみました。そして、それはより良い結果を提供しませんでした。アニメーション自体は優れていましたが、Firefox はひどくぎくしゃくしていて、Chrome ではアニメーションの仕上げが滑らかではありませんでした。

私の質問はこれです.画像のスムーズなスケーリングを提供できるアニメーションエンジンを備えた他のライブラリはありますか? または、私が見逃しているテクニックはありますか？

これは私のアニメーションです:

$('.item a').mouseover(function(){
    //
        var this_img = $(this).find('.img_grayscale');
        var css_w = parseInt(this_img.attr("width"), 10);
        var css_h = parseInt(this_img.attr("height"), 10);
        // 10% of height and width calc here
        var css_p_w = css_w * 10 / 100;
        var css_p_h = css_h * 10 / 100;
        // 
        var css_top = -(css_p_h / 2);
        var css_left = -(css_p_w / 2);
    //
    this_img.stop().animate({ opacity:1 }, 100, function(){
        this_img.animate({width:css_w + css_p_w, height:css_h + css_p_h, top:css_top, left:css_left}, 1200, "linear");
    });
    //this_img.transitionStop().transition({ opacity:1 }, 100, function(){
    //  this_img.transition({ scale:1.05, rotate:0.02 }, 2500, "ease");
    //});
    //
}).mouseout(function(){
    //
        var this_img = $(this).find('.img_grayscale');
        var css_w = parseInt(this_img.attr("width"), 10);
        var css_h = parseInt(this_img.attr("height"), 10);
    //
    this_img.stop().animate({ width:css_w, height:css_h, top:"0", left:"0" }, 1200, "linear", function(){
        this_img.animate({ opacity:0 }, 100);
    });
    //this_img.transitionStop().transition({ scale:1 }, 2500, "ease", function(){
    //  this_img.transition({ opacity:0, rotate:0.02 }, 100)
    //});
    //
});

コメント アウトされた部分は jquery.transit プラグイン テストです。このプラグインは css3 トランジションを提供します。

実際の例: http://mac.idev.ge:800/test/ (ホバー画像)

4

2 に答える 2

1

シンプルな CSS トランジションを使用してみてはいかがでしょうか。ここにデモがあります。

<img src="some-image.jpg" />

CSS

img {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 100px;
    left: 100px;
    transition: all 0.2s linear;
}
img:hover {
    width: 440px;
    height: 330px;
    top: 85px;
    left: 80px;
}
于 2013-09-20T06:55:05.800 に答える
0

最も滑らかな外観と最高のパフォーマンスを得るには、css スケール変換を使用することを強くお勧めします。

ただし、注意すべき点がいくつかあります。一部のブラウザーは、賢く変換を最適化しようとしているようですが、その結果、画像のサイズが変更されるだけです。トリックは、小さな回転も適用することです。

-webkit-transform: scale(1.2, 1.2) rotate(0.1deg);
transform: scale(1.2, 1.2) rotate(0.1deg);

ここにデモがあります：http://jsfiddle.net/g2Qrv/

Chrome、FF、IE10、Opera、iOS の Safari でスムーズにスケーリングします。

于 2013-09-20T07:51:43.750 に答える