Vue 3 , Vueuse , CSSを用いたマウス追跡眼球

導入
このブログでは、Vue 3、Vueuse、CSSのスプリンクルを使用してマウスの目を追跡する必要があります.この目を引くコンポーネントは、将来のプロジェクトに風変わりな追加を行います.
まず目を壊しましょう、私の名前はTaliesinです、そして私は働くPixelhop . 私はハロウィーンの特別なプロジェクトのためにこれを作ったtrick-or-treat .
あなたがコード全体の例であなたの目を得たいと思うならば、それを見つけてくださいhere .
読者はVUE 3の組成のAPIを使用して基本的な理解をお勧めしますまた、ommetaphobiaと誰かに推薦されていない場合やひどい目のパンに対して何かを持っている場合.それで、我々が目に目を見るならば、つまずきましょう.

概要
だから、夏の目に、これは動作するために、我々は片面に瞳を持つ目のSVGを持っている必要があります.次に、変換回転プロパティを設定してマウスの方向にマウスを向けるように設定します.

プロジェクト設定
あなたがすでにプロジェクトと目SVG準備ができているならば、あなたは次のセクションに目を転がすことができます.しかし、あなたがエイリアンと呼ばれるエイリアンと目を逸しているような場合は、ここで私はちょうど基本的なVue 3プロジェクトを設定し、我々が作っているの基礎を設定する.
まず最初に、基本的なVue 3プロジェクトを設定します.これを行う最も簡単な方法は、NPXとVue CLIを以下のコマンドを実行することです.

npx @vue/cli create mouse-tracking-eye

デフォルトのVue

依存関係マネージャを選択します( NPMを使っています).
cd フォルダにインストールし、依存関係をインストールする

cd mouse-tracking-eye/ && npm i

Vue Cliが私たちに必要としないことを与えるすべてのビットを取り除くことができます.まず、コンポーネントと資産のフォルダを削除します.それからApp.vue , 我々はそれが私たちを与えるすべての基本的なものを削除する必要があります.あなたは、テンプレート、スクリプトとスタイルタグでちょうど残っています.
私は、使用しています<script setup> あなたが読むことができる構文here とタイプスクリプトなぜだから.

<!-- App.js -->
<template>
</template>

<script lang="ts" setup>
</script>

<style>
</style>

今、私たちは、テンプレートを目にする必要がある、私は私のハロウィーンプロジェクトのために使用SVGを使用しています.divを加えて、それのクラスを与えてくださいcontainer , 次に、SVGを容器の中にペーストします.

<!-- App.ts > temaplate -->
<div class="container">
  <svg
    viewBox="0 0 33 33"
    fill="none"
  >
      ...
  </svg>
</div>

目を中心にして、黒い背景を加えるので、目はCSSのビットで目立ちます.

/* App.js > style */

.conatainer {
  background-color: black;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eye {
  height: 3rem;
}
body {
  margin: 0;
  height: 100vh;
}

spec tacular!さて、プロジェクトを実行する場合は、画面の中央と黒の背景に目があるはずです.

マウス追跡機能
このセクションは、マウスに続く目を得ることに集中します.
前述のように、私たちはvueuseライブラリを使用します.Vuuseは、これを簡素化するいくつかの機能を持つVue 3のための超便利な機能ライブラリです.インストールしましょう:

npm i @vueuse/core

我々は我々のアプリに必要な機能をインポートし、我々も同様にVueから必要な機能をインポートする可能性があります.

<!-- App.vue > script -->
import {
  useMouse, useWindowSize, debouncedWatch, throttledWatch,
} from '@vueuse/core';
import {
  ref, onMounted,
} from 'vue';

目の目は、今我々は、これらのインポートを得た、我々はそれらを使用して起動することができます.我々が使用する最初の2つはuseMouse and useWindowSize .useMouse マウス位置のxとyを返し、useWindowSize …を返すあなたは、ウィンドウのサイズの幅と高さを推測した.
インポートの下で次のように追加します.

// App.vue > script
const { x: mouseX, y: mouseY } = useMouse();
const { width, height } = useWindowSize();

次に、スクリーン上の目の位置を取得する必要があります.それで、それはこれのようです.

<!-- App.vue > template -->
<svg
  ref="eye"
  viewBox="0 0 33 33"
  fill="none"
>
...
</svg>

そして今、スクリプトでそれを参照することができます、我々はちょうどその値としてNULLでref変数を加える必要があります.

// App.vue > script
const eye = ref(null as Element | null);

side note :通常のスクリプトタグ内でsetup関数を使用している場合は、戻り値のオブジェクトにrefを追加してください.
目の位置を参照

// App.vue > script
const eyeLocation = ref<DOMRect | undefined>(undefined);

ここでは、私は目の位置をonMounted 関数はVueから以前にインポートします.

// App.vue > script
onMounted(() => {
  eyeLocation.value = eye?.value?.getBoundingClientRect();
}); 

また、画面サイズが変更されたときに目の位置を設定したい場合は、これはどこに移動する可能性がありますので、目を移動します.これを達成するためにdebounceWatchここで何が起こるかを要約する我々は、ウィンドウの高さと幅の変更を見ていると変更のために、それを行うときには、債務関数を実行しています.

// App.vue > script
debouncedWatch([width, height], () => {
  eyeLocation.value = eye?.value?.getBoundingClientRect();
}, { debounce: 200 });

グレート、今我々は今、我々はその場所に目を持っているボールを圧延し、実際に目を移動させてみましょう.

// App.vue > script
const rotationDegrees = ref(0);

throttledWatch([mouseX, mouseY], ([x, y]) => {
  if (eyeLocation.value) {
    const radianDegrees = Math.atan2(x - eyeLocation.value.right, y - eyeLocation.value.top);
    rotationDegrees.value = radianDegrees * (180 / Math.PI) * -1 + 180;
  }
}, { throttle: 1000 / 60 });

それで、あなたがこのようなもののために目をされるならば、あなたはそれを理解することができます、しかし、あなたが盲目のバンビのようで、目の鹿がないならば.心配するな何が起こっているかを簡単に要約します
まず、refを定義するrotationDegrees これは我々の目を回転させる必要がある程度の数になります.次に、我々はthrottledWatch マウスの位置を監視し、rotationDegrees .
まず、それはradianDegrees 使用Math.atan2 機能続きを読むhere . 基本的に、それは目の位置とマウスの間にラジアンを受け取る.私は目の上部と右の場所を使用していますが、あなたの目の瞳孔が指している場所に応じて、別の場所を使用する必要があります.その後、我々は目を回転させるために使用できる程度にラジアンを変換します.
この関数は、毎秒60回に絞られます.
今、私たちがする必要があるのは、変換を回転させるプロパティをSVGに設定することです.

<!-- App.vue > temaplate -->
<svg
  ref="eye"
  :style="`transform: rotate(${rotationDegrees - 40}deg) translateZ(0)`"
  viewBox="0 0 33 33"
  fill="none"
>
...
</svg>

サイドノート:あなたが目を正確に左または右を指していない場合は、いくつかの程度を追加または減算することによって行ったことを行う必要があります.

結論
我々はマウントされ、画面サイズの変更に目の位置を取得しているので、画面上の任意の場所に目を置くことができる、それはまだ動作します.
私はあなたがこのミニチュートリアルを楽しんで、あなたはいくつかの楽しいプロジェクトを作成することができます願っています.お気軽にあなたの作品を送ってください.私は彼らを目にするのが大好きだ.あなたの連絡先の詳細を見つけることができますhttps://www.pixelhop.io/contact/ .
あなたが元の目を見て興味があるならば、私は作りました、そして、我々のハロウィン特別プロジェクトはここでそれをチェックします:https://trick-or-treat.pixelhop.io/ .
私たちの新しいブログのためにあなたの目は皮をむいてくださいhttps://www.pixelhop.io/writing/ または、我々の会報にサインアップしてください.
では後で👋