1

「ペリクル」はiPhoneの動きをすべて含む長い画像であるため、「映画」として機能するコードを作成しました。映画のような動きの感覚を作り出すために、このコードはbackgroundPositionYに500pxを追加し、 30ミリ秒待ってからこのプロセスを再開します。

メカニズムは単純ですが、コードが長すぎます。特に、別の関数を追加するために使用される関数.toggle（）を使用する場合は、別のクリックを行うと反対のアニメーションが作成されます。

/*animate*/
screen.toggle(function(e){
    var mov = 0;
    function cicloIphone(){
        if(mov>6000){
            mov=0;
        };
        iphone.css('backgroundPosition', '0 -'+mov+'px');
        mov += 500;

        if(mov<6000){
            window.setTimeout(function(){
                cicloIphone();
            }, 30);
        };
    };
    var timeoutIphone = window.setTimeout(function(){
        cicloIphone();
    },0);
},function(e){
    var mov = 5500;
    function cicloIphone(){
        if(mov>6000){
            mov=0;
        };
        iphone.css('backgroundPosition', '0 -'+mov+'px');
        mov -= 500;

        if(mov<6000){
            window.setTimeout(function(){
                cicloIphone();
            }, 30);
        };
    };
    var timeoutIphone = window.setTimeout(function(){
        cicloIphone();
    },0);
});

関数animate（）を使用して合成したいのですが、30msごとに500pxから1000pxにジャンプしないため、効果を再現したくありませんが、流動性が高すぎて、ピクセルごとにピクセルが増えます。

/*animate synthesized*/
screen.toggle(
    function(e){iphone.stop(true,true).animate({
        'backgroundPositionX':'0px',
        'backgroundPositionY':'-5500px'
    },3000)},function(e){iphone.stop(true,true).animate({
        'backgroundPositionX':'0px',
        'backgroundPositionY':'0px'
    },3000);
});
4

2 に答える 2

1

animate()は非常に複雑で柔軟な関数です。動作に必要な 3 つの情報を提供できるため、要件を満たしています。

  • アニメーション化するプロパティ、
  • 目標値、
  • アニメーションの長さ。

したがって、何を変更し、どこに移動し、そこに移動するのにどれくらいの時間がかかるかを認識していますが、デフォルトの場合、実際の移動方法は要件を満たしていません。ただし、カスタム イージング関数animate()を提供する限り、この状況での使用に問題はありません。

$.extend($.easing, {
    movie: function(current, elapsed, start, delta, duration) {
        // Returns the completion ratio as a float in the [0..1] range.
        // (elapsed / duration) would be linear, so build discrete steps
        // by "snapping" elapsed to 30 ms intervals.
        return (Math.floor(elapsed / 30) * 30) / duration;
    }
});

これで、次のように記述できます。

screen.toggle(function() {
    iphone.stop(true, true).animate({
        backgroundPositionY: "-5500px"
    }, 330, "movie");
}, function() {
    iphone.stop(true, true).animate({
        backgroundPositionY: "0px"
    }, 330, "movie");
});

そして、30ミリ秒ごとに330ミリ秒の間、個別のステップで背景画像をアニメーション化する必要があります。これは、探している効果のようです。

于 2012-07-29T14:13:28.253 に答える
0

このトリックは、(IE7/9、Firefox 3.6、Opera、Safari Google Chrome) との完全な互換性に役立ちます。この jQuery 拡張機能http://bit.ly/bZzOC8を使用しました。これにより、適切なbackgroundPosition:'(0 -5550)'の関数 .animate() で 2 つの値を使用できるようになりました。残念ながら、ie7 と ie8 にはバグがあり、拡張機能がありません動作しないので、ie 条件if($.browser.msie)を使用し、backgroundPositionY と backgroundPositionX を分離する値を使用しました。このルールのみを使用する場合は、Opera と fireFox では動作しないことを知っておく必要があります。したがって、このコードですべてのブラウザをカバーします。

if($.browser.msie){
    screen.toggle(function(){
            iphone.stop(true,true).animate({
                backgroundPositionY:'-5500',
                backgroundPositionX:'0'
            },330,'movie');
        },function(){
            iphone.stop(true,true).animate({
                backgroundPositionY:'0',
                backgroundPositionX:'0'
            },330,'movie');
        }
    );
}
else{
    screen.toggle(function(){
            iphone.stop(true,true).animate({
                backgroundPosition:'(0 -5500)'
            },330,'movie');
        },function(){
            iphone.stop(true,true).animate({
                backgroundPosition:'(0 0)'
            },330,'movie');
        }
    );
}
于 2012-07-31T13:48:49.440 に答える