JavaScript を使用して移動オブジェクト コードを実装する

インタラクティブ アニメーションの主な目標は、ほとんどのユーザー インタラクションがマウスとタッチ スクリーンを通じて実現されるスムーズなユーザー エクスペリエンスを作成することです。

このブログ投稿では、ドラッグやスロー効果など、オブジェクトを移動するための JS の一般的な使用法をいくつか共有したいと思います。

1. マウス イベント

を使用すると、マウス クリック イベントを 2 つのイベント (マウス ダウン イベントとボタン アップ イベント) に分解できます。通常、これら 2 つのイベントは同時に発生します。ただし、マウスを押した後、しばらくマウスが移動してからポップアップする場合があります。この操作はドラッグと呼ばれます。つまり、押し、移動し、放します。

キャンバス アニメーションでは、マウス イベントは HTML DOM ツリー上のキャンバス要素によってのみキャプチャできます。そのため、マウス イベントがキャンバス上のどこで発生するかを手動で計算し、キャンバスに描画される要素で発生するかどうかを判断する必要があります。物体に。注意が必要なマウス イベントは、mousedown、mousemove、mouseup です。具体的な詳細については、関連ブログ記事「JavaScript アニメーションの詳細解説 (1) - ループとイベント監視」を参照してください。

2. タッチ イベントの使用

タッチ スクリーン デバイスの普及により、ユーザーのタッチ イベントをアニメーションでキャプチャする必要が生じる可能性があります。タッチ スクリーンとマウスは異なるデバイスですが、幸いなことに、DOM ツリーでのタッチ イベントのキャプチャはマウス イベントのキャプチャとそれほど変わりません。

マウスイベントmousedown、mousemove、mouseupに対応するタッチイベントは、それぞれtouchstart、touchend、touchmoveです。

指とマウスの使用の大きな違いは、マウスは常に画面上に表示されますが、指は常に接触しているわけではないことです。一般的なアプローチは、カスタム属性 isPressed を導入して、画面に触れている指があるかどうかを知らせることです。具体的な詳細については、関連ブログ記事「JavaScript アニメーションの詳細解説 (1) - ループとイベント監視」を参照してください。

3. ドラッグ イベント

ドラッグ イベントには、マウスを押す、移動、放すという 3 つのサブイベントが含まれます。マウス ポインタの位置に追従してオブジェクトの座標位置を継続的に更新することで、キャンバス要素上でオブジェクトをドラッグできます。 さらに、マウスが現在押されているかどうかを示すためにカスタム属性 isPressed が必要です。デフォルト値は false で、マウスがアップ状態であることを意味します。実装コードには次のプロセスが含まれます:

1. マウスダウン イベントをキャプチャし、現在のマウスがオブジェクト内にあるかどうかを判断します。オブジェクト内でマウスが押された場合、isPressed = true に設定します

2. マウス移動イベントをキャプチャし、isPressed = true であることをハンドラーで判断し、オブジェクトの位置を追跡するようにオブジェクトの座標位置を常に更新することでオブジェクトをシミュレートします。マウスのドラッグ効果

3. Mouseup イベントをキャプチャし、isPressed を false に設定します。

JavaScript コードは次のとおりです。バグってるよ！ドラッグすると、ボールの中心がマウスの位置にあることがすぐにわかります。特に、マウスがボールの端をクリックすると、ボールの中心がマウス カーソルの位置に突然ジャンプすることがわかります。の上。明らかに、これは少し唐突に思えます。

少し改善することができます:

マウスが押されたときの現在のマウス位置とボールの中心点の間のオフセットを記録します

<canvas id="canvas" width="400" height="400"></canvas>

マウスが移動したら、現在の位置からそれを減算します。マウスのマウスが押されたときに記録されるオフセット

// 创建画球函数
function Ball() {
    this.x = 0;
    this.y = 0;
    this.radius = 20;
    this.fillStyle = "#f85455";
    this.draw = function(cxt) {
        cxt.fillStyle = this.fillStyle;
        cxt.beginPath();
        cxt.arc(this.x, this.y, this.radius,  0, 2 * Math.PI, true);
        cxt.closePath();
        cxt.fill();
    }
}
// 获得当前鼠标位置
function getMouse(ev) {
    var mouse = {
        x: 0,
        y: 0
    };
    var event = ev || window.event;
    if(event.pageX || event.pageY) {
        x = event.x;
        y = event.y;
    }else {
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        x = event.clientX + scrollLeft;
        y = event.clientY + scrollTop;
    }
    mouse.x = x;
    mouse.y = y;

    return mouse;
}

var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        ball = new Ball(),
        mouse = {x: 0, y: 0},
        isPressed = false;
ball.x = 20;
ball.y = 20;

// 渲染小球
ball.draw(context);

// 小球拖拽事件
canvas.addEventListener("mousedown", mouseDown, false);
canvas.addEventListener("mousemove", mouseMove, false);
canvas.addEventListener("mouseup", mouseUp, false);

function mouseDown(ev) {
    // 判断当前鼠标是否在小球内
    mouse = getMouse(ev);
    if(Math.pow(mouse.x - ball.x, 2) + Math.pow(mouse.y - ball.y, 2) <= Math.pow(ball.radius, 2)) {
        isPressed = true;
    }
}

function mouseMove(ev) {
    if(isPressed) {
        mouse = getMouse(ev);

        ball.x = mouse.x;
        ball.y = mouse.y;
        context.clearRect(0, 0, canvas.width, canvas.height);
        ball.draw(context);
    }
}

function mouseUp(ev) {
    // 标示鼠标弹起事件
    isPressed = false;
}

4. 投げイベント

投げをアニメーションで表現するには？マウスを使用してオブジェクトを選択し、ドラッグして特定の方向に移動します。マウスを放した後、オブジェクトはドラッグした方向に移動し続けます。

オブジェクトを投げる場合、ドラッグプロセス中にオブジェクトの速度ベクトルを計算する必要があり、オブジェクトを放すときにこの速度ベクトルをオブジェクトに割り当てる必要があります。実際、ドラッグ中にオブジェクトの速度ベクトルを計算するプロセスは、オブジェクトに速度ベクトルを適用するプロセスとまったく逆です。速度ベクトルをオブジェクトに適用すると、オブジェクトの元の位置に速度が加算されて、オブジェクトの新しい位置が計算されます。この式は、

古い位置 + 速度ベクトル = 新しい位置

として記述できます。

速度ベクトル = 新しい位置 – 古い位置

。

スロー動作を実装するには、前のコードにいくつかの変更を加える必要があります。まず、マウスが押されているかどうかを確認し、押されている場合は、oldX 変数と oldY 変数を使用してボールの古い x 座標と y 座標の位置を保存し、ボールのドラッグ速度を更新します。

具体的な JavaScript コードは次のように実装されています:

// 记录鼠标按下时，鼠标与小球圆心的偏移量
dx = mouse.x - ball.x;
dy = mouse.y - ball.y;

このデモの境界判定にはまだいくつかのバグがあり、数日中に修正される予定です。

5. 概要

オブジェクトの移動イベントにはさまざまな形式の全体的な移動がありますが、それらは制御のために 3 つの別個のイベントに分解できます。マウス イベントはそれぞれ、mousedown とmousemove に対応します。 Mouseup は、タッチ イベントの touchstart、touchmove、および touchend にそれぞれ対応します。マウスポインターの位置に追従するようにオブジェクトの座標位置を常に更新することで、canvas 要素上でドラッグ アンド スローの効果を実現できます。

以上がJavaScript を使用して移動オブジェクト コードを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。