0

ここで行っているのは、divコンテナを片側から中央にアニメーション化することです。矢印をもう一度クリックすると、画面の外に移動します。divには、ぼかしバージョンと通常の2つの画像も含まれています。これらの画像は、移動中に切り替わり、モーションブラーのように見えます。最新のChromeおよびFirefoxブラウザーではすべてが良好に見えますが、Safariではかなり途切れがちです。

私はjavascriptアニメーションがヒットまたはミスの試みであることを知っていますが、私が今持っているものを最適化する方法があるかどうか知りたいです。さらに、私が達成しようとしていることは、css3アニメーションを使用して達成できますか？私は、css3がハードウェアGPUを使用しているため、大きな速度低下を排除していると信じています。

var cupcakeArray = new Array(new Array("Cupcake_01_blur.png","Cupcake_01.png"));


function loadCupCake(ini,direction){
    /*Set directional variables*/
    var dir = direction;
    var start;
    var end;

    var stageWidth = $('div#cupcakeStage').width(); //gets the current stage width 
    var centrepos = (stageWidth/2) - (743/2);


    if(dir == "left"){
        start = stageWidth;
        end = 0-743;
    }else if(dir == "right"){
        start = 0-743;
        end = stageWidth;
    }


    /*Remove the current cupcake in the centre*/
                    $('div.current-cupcake').removeClass('current-cupcake').addClass('remove-cupcake');

    $("div.remove-cupcake").animate({"left": end+'px'},{duration:500,easing:"easeOutQuart",complete: function() {
      $(this).remove();
    }});
    $("div.remove-cupcake img#img_blur").animate({opacity:1},{duration:100,easing:"easeOutQuart"});
    $("div.remove-cupcake img#img_normal").animate({opacity:0},{duration:300,easing:"easeOutQuart"});




    //preload images
    var num_loaded = 0;

    var $fragment;
    var $innerfrag;
    var img=[];

    $fragment = $('<div class="preload-cupcake" style="position: relative; left:'+start+'px;"/>');

    for(var i=0;i<2;i++){
        img[i] = new Image();

        img[i].onload = function(){
            num_loaded++;

            if(num_loaded == 1){
                $innerfrag = $('<img id="img_blur" src="'+this.src+'" alt=""/>');
                $fragment.append($innerfrag);
            }

            if(num_loaded == 2){
                $innerfrag = $('<img id="img_normal" src="'+this.src+'" alt=""/>');
                $fragment.append($innerfrag);

                $('div#cupcakeStage').append($fragment);

                $('div.preload-cupcake').removeClass('preload-cupcake').addClass('current-cupcake');

                $("div.current-cupcake").animate({"left": centrepos+"px"},{duration:400,easing:"easeOutQuart"});
                $("div.current-cupcake img#img_blur").animate({opacity:0},{duration:700,easing:"easeOutQuart"});
                $("div.current-cupcake img#img_normal").animate({opacity:1},{duration:700,easing:"easeOutQuart",complete: function() {

                }});


            }

        }

        img[i].src = cupcakeArray[ini][i];

    }


}
4

1 に答える 1

3

無料の jquery CSS3 アニメーション プラグイン Transit をダウンロードします。アニメーションに CSS3 を使用し、サポートしていないブラウザーでアニメーションするフォールバックがあります。

http://ricostacruz.com/jquery.transit/

また、アニメーションのキューイングと完全な機能もサポートしています。

于 2012-10-24T14:01:21.830 に答える