7

最初に見てみましょう：

ここに画像の説明を入力してください

猫は曲線のxに移動する必要があります。（矢印を参照）

猫がxに当たると、10秒間留まり、その後、猫は再びoに戻り、カーブを描き、繰り返します。

私はこのコードでそれを試しました：

function curve() {
    $('#cat').delay(10000).animate({top: '-=20',left: '-=20'}, 500, function() {
        $('#cat').delay(10000).animate({top: '+=20', left: '+=20'}, 500, function() {
            curve();
        });
    });
}

curve();

しかし、猫は次のように動いています。

ここに画像の説明を入力してください

猫をこのようなカーブで動かす方法はありますか？

4

3 に答える 3

1

複合運動を行うことで、イージングを使用してそれを達成できます。

function curve () {
    $('#cat').delay(10000).animate({top: "+=20px", left: "+=20px"}, {
      duration: 500, 
      specialEasing: {top: 'easeOutQuad', left: 'easeInQuad'}, 
      complete: function () { 
        $('#cat').animate({top: "-=20px", left: "+=20px"}, {
          duration: 500, 
          specialEasing: {top: 'easeInQuad', left: 'easeOutQuad'},
          complete: function() {
            // repeat the other way around.
          }});
      }
    });
}

jQueryのドキュメントによると、jQuery 1.4以降で機能し、言及されているイージングにはjQuery UIが必要です（ただし、Effect Coreモジュールのみ）。各.animate()呼び出しは完全な円のパスの4分の1を占め、逆easeInQuad対easeOutQuadはパスを新しい位置にまっすぐではなく円形のパスのように見せます。

于 2011-11-22T21:11:17.980 に答える
1

http://tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect/

「jqueryラジアルモーション」をグーグルで検索してこれを見つけました

于 2011-11-22T20:51:14.300 に答える
0

2021年の最新の答え。これにjQueryを使用する必要はありません。しかし、私はあなたがしたいと思っていると思います。次のように、popmotion（週に60万ダウンロード）のようなトレンディなnpmライブラリをjQueryと組み合わせて使用​​できます。

// poo.el.animate({top: footerTop - horsePooHeight})

// your imports may vary - I'm using Angular, popmotion focuses more on Vue and React
import { cubicBezier } from 'popmotion'
declare const popmotion: any
const {tween, easing} = popmotion

const fling = cubicBezier(0, .42, 0, 1)
tween({from: 100, to: 200, duration: 400, ease: fling}).start((v) => $(el).css('top', v))
tween({from: 100, to: 300, duration: 400, ease: easing.linear}).start((v) => $(el).css('left', v))

ここで、elはjQuery要素です。

朗報です。それは、カーブを可能にすることで、イージングの点で全世界により多くの力を手に入れました。悪いニュースはもう少し複雑ですが、上記のコードを理解できれば問題ありません。

PS私はpopmotionがjQueryで使用されるべきだと言っているのではありません。私はそれができると言っているだけです。

PPS JESUSがあなたを愛していることを決して忘れないでください：D

PPPS jQueryは単純なアニメーションには適していますが、このような質問に関心がなく、jQueryアニメーションライブラリが更新されていないことは、jQuery自体がより複雑なアニメーションでは機能しないことを証明しています。

于 2021-05-18T21:32:05.590 に答える