科幻游標

酷酷的科幻游標 (⌐■_■)b

提示

此元件針對滑鼠設計，建議使用電腦或可以使用滑鼠的裝置瀏覽。

技術關鍵字

名稱	描述
Anime.js	輕量級 JavaScript 動畫函式庫
Pointer 事件	偵測滑鼠或觸控點移動、點擊、懸停等等事件，取得座標、目標等等資訊
JS 動畫	基於 JavaScript 實現的動畫，達成更複雜、精準的動畫控制，常見套件有 GSAP、anime.js 等
Document activeElement	取得目前擁有焦點的元素
Document elementFromPoint()	取得指定座標位置最上層的元素

使用範例

基本用法

根據觸碰元素變換樣式

顯示游標

POINTER

NOT_ALLOWED

WAIT

<template>
  <div class="font-orbitron w-full flex flex-col select-none gap-4 py-10">
    <div class="flex flex-col items-center justify-center gap-[6vh]">
      <base-checkbox
        v-model="visible"
        :label="t('showCursor')"
        class="cursor-pointer border border-l-4 p-4"
      />

      <div class="card bg-pointer cursor-pointer p-4">
        POINTER
      </div>

      <div class="card bg-not-allowed cursor-not-allowed p-4">
        NOT_ALLOWED
      </div>

      <div class="card cursor-wait border-x-[2px] border-sky-400/50 px-1">
        <div class="h-full w-full flex flex-center bg-sky-300/50 p-4 px-8">
          WAIT
        </div>
      </div>
    </div>

    <cursor-futuristic
      v-if="visible"
      class="z-[9999]"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import BaseCheckbox from '../../base-checkbox.vue'
import CursorFuturistic from '../cursor-futuristic.vue'

interface Props {
  visible?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  visible: true,
})

const visible = ref(props.visible)

const { t } = useI18n()
</script>

<style lang="sass" scoped>
.card
  font-weight: 700
  transition-duration: 0.3s
  &:hover
    opacity: 0.3

.bg-pointer
  color: light-dark(#111, #FFF)
  background-color: light-dark(#FFF, #222)
  $bg-color: light-dark(#EEE, #555)
  background-image: linear-gradient(45deg, $bg-color 25%, transparent 25%, transparent 75%, $bg-color 75%, $bg-color), linear-gradient(45deg, $bg-color 25%, transparent 25%, transparent 75%, $bg-color 75%, $bg-color)
  background-size: 10px 10px
  background-position: 0 0, 5px 5px
.bg-not-allowed
  color: light-dark(#7f1d1d, #e83a3a)
  background: repeating-linear-gradient(135deg, light-dark(#ffadad, #6b2828) 0 10px, light-dark(#FFF, #222) 10px 20px)
</style>

查看程式碼收合程式碼

原理

特別利用了 anime.js v4 的 createAnimatable，這個功能可以保證你不斷重複呼叫同一個動畫元素時，不但能流暢轉換，更不會讓動畫重疊導致關鍵幀錯位。

大家可以試試看讓游標在不同的樣式間快速變化，可以發現游標動畫不只非常流暢，還不會卡在某個關鍵幀上。◝( •ω• )◟

anime.js v4 的 createAnimatable 和 Vue 的響應式系統真的是天作之合，有機會來寫一篇文章分享分享。♪( ◜ω◝و(و

原始碼

元件原始碼cursor-futuristic/範例原始碼cursor-futuristic/examples/

API

Props

interface Props {
  state?: `${CursorState}`;
}