vue でタッチ スクリーンをサポートする 3D ボールを実装する方法

モバイルデバイスの普及が続く中、多くのWebサイトがジェスチャー操作の最適化に注目し始めています。 Vue.js は、レスポンシブ UI を簡単に実装できる人気の JavaScript ライブラリです。 Vue アプリケーションでは、サードパーティのライブラリを使用して、タッチ スクリーンをサポートする 3D ボールを実装できます。この記事では、Vue アプリケーションでこのライブラリを使用する方法と、ボールの回転方向を変更する方法を説明します。

準備

まず、Vue CLI を使用して新しい Vue アプリケーションを作成する必要があります。 Vue CLI ドキュメントのガイダンスに従って、新しい Vue アプリケーションを作成できます。プロジェクトを作成するときに、デフォルトのテンプレートを使用するか、手動で構成するかを選択できます。手動構成を選択した場合は、Vue Router と Vuex がインストールされていることを確認してください。

プロジェクトを作成した後、次のコマンドを使用して関連する依存ライブラリをインストールする必要があります:

npm install --save gsap vue-touch-3d-ball

Gsap は JavaScript アニメーション ライブラリ、Vue Touch 3D Ball は Vue コンポーネント ライブラリ、 Vue で使用 タッチ スクリーンをサポートするアプリで 3D ボールを作成します。

ボールの作成

アプリケーションのエントリ コンポーネントで、vue-touch-3d-ball をインポートし、このコンポーネントのコンポーネント リストに追加する必要があります。さらに、このコンポーネントでボールの回転方向を制御するオブジェクトを作成します。

<template>
  <div class="app">
    <touch-3d-ball
      ref="ball"
      :colors="colors"
      :radius="200"
      :speed="0.008"
      :span="1"
      @dragover="dragover"
    />
  </div>
</template>

<script>
import { Touch3DBall } from 'vue-touch-3d-ball'

export default {
  name: 'App',
  components: {
    Touch3DBall
  },
  data() {
    return {
      direction: {
        x: -1,
        y: -1
      }
    }
  },
}
</script>

このコンポーネントでは、ボールのパラメータを Touch3DBall コンポーネントに渡します。ボールをドラッグすると、コンポーネントはドラッグオーバー イベントを起動します。このイベントを使用して、ボールの回転方向を変更します。

回転方向の変更

ドラッグオーバー イベント ハンドラーで、基本的な動きの方向を確認し、ボールの回転方向を変更します。 TweenMax ライブラリの to メソッドを使用して、ボールのプロップを更新します。ボールの方向を更新するコードは次のとおりです。

<script>
export default {
  name: 'App',
  components: {
    Touch3DBall
  },
  data() {
    return {
      direction: {
        x: -1,
        y: -1
      }
    }
  },
  methods: {
    dragover({ direction }) {
      const { x, y } = direction
      if (x > 0) {
        this.direction.x = 1
      } else if (x < 0) {
        this.direction.x = -1
      }
      if (y > 0) {
        this.direction.y = 1
      } else if (y < 0) {
        this.direction.y = -1
      }

      TweenMax.to(this.$refs.ball, 0.5, {
        direction: this.direction
      })
    }
  }
}
</script>

上記のコードでは、下層の移動方向を確認し、必要に応じて方向を変更します。次に、TweenMax.to メソッドを使用して、ボールの方向プロップの値を更新します。 TweenMax ライブラリを使用すると、Vue アプリケーションでの TweenMax の使用が非常に便利になります。このライブラリは npm 経由でインストールできます。

概要

この記事では、vue-touch-3d-ball ライブラリを使用して Vue アプリケーションで 3D ボールを作成する方法と、ボールの回転方向を変更する方法を学びました。ボール 。 Vue.js について詳しく知りたい場合は、公式ドキュメントを参照してください。ご質問やご提案がございましたら、以下のコメント欄でお知らせください。

以上がvue でタッチ スクリーンをサポートする 3D ボールを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。