javascript 要素の斜め移動

Question

実現したいこと

右に500px、下に300px、2秒かけて移動させたいです。

発生している問題・分からないこと

300pxで移動が止まってしまいます。

該当のソースコード

const element = document.getElementById("box");

        function slideAnimation(element, direction, distanceX, distanceY, duration) {
            let positionX = 0;
            let positionY = 0;

            function slide() {
                positionX += 1;
                positionY += 1;

                if (positionX < distanceX && positionY < distanceY) {
                    if (direction === "left") {
                        element.style.transform = `translateX(${-positionX}px)`;
                    } else if (direction === "right") {
                        element.style.transform = `translateX(${positionX}px)`;
                    }
                    
                    element.style.transform += `translateY(${positionY}px)`;
                } else {
                    clearInterval(intervalId);
                }
            }

            const intervalId = setInterval(slide, duration);
        }

        slideAnimation(element, "right", 500, 300, 2);

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

300pxで移動が止まってしまいChatGPTも使いましたが、修正できませんでした。
else if (direction === "right") {
element.style.transform = translateX(${positionX}px);
}
ここの部分に書き足すのでしょうか？

補足

if (direction === "left") {
element.style.transform = translateX(${-positionX}px);
上記の部分は必要なのでしょうか？

Answer 1

右に500px、下に300px、2秒かけて移動させたいです。

いまのままでは右方向と下方向は同じだけ進むこととなります。下の方で先に300pxに達してしまうので、右も300pxだけしか進みません。

どのように動かしたいのでしょうか？

---

状況によっては、CSSアニメーションを使うほうが妥当かもしれません。

Comments

[yuuuutaaa]

分かりづらくすみません。
クリックした時に指定したpxの分だけ右下に斜めに動かしたいです。

[maisumakun]

X座標とY座標を別に管理すると煩雑になるので、「進んだ割合」という1つの値だけを管理して、それからXYの各座標を算出しましょう。

[yuuuutaaa]

element.style.transform =`translateX(${currentTime * distance / duration}px)`
element.style.transform =`translateY(${currentTime * distance / duration}px)`
上のコードでXとYの進んだ割合を出すということでしょうか？

[maisumakun]

そうですね、開始時間を記録して、差分を取るコードは別途で必要となりますが、そんな感じです。

[yuuuutaaa]

色々と教えていただきありがとうございます。
教えていただいた内容でもう少し考えます。

Answer 2

既存の質問です。

javascriptのスライドアニメーション　右斜め下への移動について

スライドアニメーションで図形を斜めに移動させ、移動中に図形をクリックしても２重処理が起こらないようにflagで制御したい。

アニメーションで要素を動かしたい

JS:ボックススライド

Comments

[yuuuutaaa]

ご回答ありがとうございます。
貼っていただいたリンクですが確認しております。
ただ私が初学者でして既存の質問だと理解しづらく改めて質問いたしました。
理解できるよう精進します。