0

要素を逆 U 字型に画面を飛び、連続的に回転させる方法はありますか? 私はスクリプトに取り組んでおり、この効果を作成する必要があります。画像は画面の左下隅から表示され、画面の高さの 50% を移動し、画面の右隅を通り抜けます。これを 1 分ごとに行う必要がありますが、setInterval を使用してこれを行うことができます。

私がやったこと：

var currWidth = $(window).width();
console.log(currWidth);

var startPos = -100;
var endPos = (currWidth + 100) + (startPos / 2);
console.log(endPos);
setInterval(
function(){
$('.bouquet').animate({left: endPos}, 3000);

var offset = $(e.target).offset();
    $('.bouquet').animate({'top':offset.top},600);
}, 10000
);

しかし、画面の左から右に移動するので、うまく動作しません。

4

1 に答える 1

0

まあ、これは簡単ではないでしょう。次のように、一度に 2 つのアニメーションを実行する必要があります。

//first half of the motion
setTimeout(function(){
    $('.bouquet').animate({left: endPos/2}, 3000,'<easing>');
},0);

setTimeout($('.bouquet').animate({top:offset.top}, 3000,'<easing>',function(){
    //on complete: other half of the motion
    setTimeout(function(){
        $('.bouquet').animate({left: endPos}, 3000,'<easing>');
    },0);
    setTimeout(function(){
        $('.bouquet').animate({top:offset.top}, 3000,'<easing>'
    }),0)
}),0)

左右の動きには 2 次関数を、上下の動きには 1 次関数を提供するイージング関数を使用します。それ以外の場合は単なる行になります...しかし、これらがどのイージングであるかはわかりません。誰かがそれを追加してください。2 つのsetTimeout関数がブロックされないようにする必要があるため、両方のアニメーションが同時に発生する必要があります。

[編集] ...わかりました、試してみましたが、1 つのオブジェクトに対して同時に複数のアニメーションを実行することは不可能のようです。しかし、私は別の可能な解決策を思いつきました:

http://jsfiddle.net/7AHLb/1

まだ完璧ではありませんが、少し遊んでみると役立つかもしれません。

于 2013-08-26T12:41:12.820 に答える