jQuery の単純なアニメーション メソッドと、jQuery のアニメーション メソッドを使用した回転関数を使用して、動くdiv ("#box").
function AnimateRotate(d, div, del){
var elem = $(div);
$({deg: 0}).delay(del).animate({deg: d}, {
duration: 2000,
step: function(now){
elem.css({
transform: "rotate(" + now + "deg)"
});
}
});
}
...
AnimateRotate(360, "#box", 0)
$("#box").animate(
{
top : "400px",
left : "400px",
width : "250px",
height : "120px"
},2000, function() {.....
これは完全に機能しdivますが、元の場所から新しく設定された場所に移動するだけです。
らせん状の動きをしたいので、ある場所、別の場所、別の場所、別の場所に移動するにはdivが必要です....
これを行うために、私は試しました：
AnimateRotate(360, "#box", 0)
$("#box").animate(
{
top : "400px",
left : "400px",
width : "250px",
height : "120px"
},2000, function() {
AnimateRotate(360, "#box", 0)
$("#box").animate(
{
top : "200px",
left : "200px",
width : "250px",
height : "100px"
},2000, function() {.....
など、約6か所の異なる場所があるまで続きます。しかし、各アニメーションの間には、基本的にアニメーション全体を台無しにする少しの一時停止があります。
私が知りたいのは、この一時停止を防ぐ方法があるかどうかです。
そうでない場合、このタイプのアニメーションを行うためのより良い方法はありますか? div を完全に失い、他のタイプのシェイプ アニメーションを使用することを意味する場合でも。
これにアプローチする最善の方法を教えてください。
回答ありがとうございます。