塞滿嘴包裝器

讓粉紅惡魔來幫你吃掉畫面上的一切。( ͡• ͜ʖ ͡• )

在《星之卡比 探索發現》中，卡比不只可以吃掉敵人，還可以吃掉各類物品，例如汽車、自動販賣機等等。

粉紅惡魔再度進化惹！ᕕ( ﾟ ∀。)ᕗ

不得不說這個能力看起來真的有夠ㄎㄧㄤ，玩得時候笑到不行。

技術關鍵字

名稱	描述
Anime.js	輕量級 JavaScript 動畫函式庫
SVG	可在 DOM 中使用的圖形格式，適合複雜圖形和動畫，配合 Vue v-bind 可以實現基於資料的動態效果
SVG Mask	SVG 遮罩效果，用於控制元素的顯示區域，可以實現複雜的形狀切割和遮罩

使用範例

基本用法

改變 isMouthful 參數即可召喚粉紅惡魔卡比來幫你吃掉畫面上的東西。

召喚卡比

🐟

鱈魚

一隻熱愛程式的魚，但是沒有手指可以打鍵盤，更買不到能在水裡用的電腦。
( ´•̥̥̥ ω •̥̥̥` )

<template>
  <div class="w-full flex flex-col items-center justify-center gap-10 p-6">
    <wrapper-kirby-mouthful-mode :is-mouthful="isMouthful">
      <div class="example-ctrl flex flex-col gap-4">
        <base-checkbox
          v-model="isMouthful"

          :label="t('summonKirby')"
        />
      </div>
    </wrapper-kirby-mouthful-mode>

    <wrapper-kirby-mouthful-mode
      :is-mouthful="isMouthful"
      :body-rounded="9999"
      :mouth-rounded="9999"
    >
      <img
        src="/low/profile.webp"
        alt=""
        class="w-60 border-[0.5rem] border-white rounded-full object-cover shadow-xl"
      >
    </wrapper-kirby-mouthful-mode>

    <wrapper-kirby-mouthful-mode :is-mouthful="isMouthful">
      <div class="relative overflow-hidden border rounded bg-slate-300/50 dark:bg-slate-700/50 p-6">
        <div class="icon">
          <div class="fish">
            🐟
          </div>
        </div>

        <div class="text-center text-xl font-bold">
          {{ t('codfish') }}
        </div>

        <div class="mt-2">
          {{ t('codfishDescription') }}<br>( ´•̥̥̥ ω •̥̥̥` )
        </div>
      </div>
    </wrapper-kirby-mouthful-mode>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

import BaseCheckbox from '../../base-checkbox.vue'
import WrapperKirbyMouthfulMode from '../wrapper-kirby-mouthful-mode.vue'

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

<style scoped lang="sass">
.icon
  position: absolute
  right: 0rem
  bottom: 0rem
  font-size: 14rem
  line-height: 10rem
  filter: brightness(0)
  transform: translate(14%, 60%) rotate(10deg)
  opacity: 0.04
  .fish
    animation: float 3s infinite ease-in-out

@keyframes float
  0%, 100%
    transform: translate(0%)
  50%
    transform: translate(-5%, 2%) rotate(5deg)
</style>

查看程式碼收合程式碼

卡比小夥伴

調整顏色，讓卡比的朋友們一起大吃特吃吧！ლ（´∀`ლ）

塞滿嘴

塞滿嘴

塞滿嘴

塞滿嘴

<template>
  <div class="w-full flex flex-col items-center justify-center gap-10 example-wrap py-10">
    <div class="flex items-center border border-gray-200 rounded rounded-xl p-4 sm:p-10">
      <input
        v-model="mainColor"
        type="color"
      >

      <input
        v-model="blushColor"
        type="color"
      >

      <wrapper-kirby-mouthful-mode
        is-mouthful
        :main-color="mainColor"
        :blush-color="blushColor"
        :body-rounded="9999"
        class="ml-10"
      >
        <div
          class="rounded px-8 py-11"
          v-text="t('mouthful')"
        />
      </wrapper-kirby-mouthful-mode>
    </div>

    <wrapper-kirby-mouthful-mode
      v-for="item, i in list"
      :key="i"
      is-mouthful
      v-bind="item"
      :body-rounded="9999"
      :mouth-rounded="9999"
      @mouseenter="onMouseenter(item)"
      @mouseleave="onMouseleave(item)"
    >
      <div
        class="rounded px-8 py-11 text-xl"
        v-text="t('mouthful')"
      />
    </wrapper-kirby-mouthful-mode>
  </div>
</template>

<script setup lang="ts">
import type { Writable } from 'type-fest'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import WrapperKirbyMouthfulMode from '../wrapper-kirby-mouthful-mode.vue'

type Param = Writable<InstanceType<typeof WrapperKirbyMouthfulMode>['$props']>

const { t } = useI18n()

const mainColor = ref('#FF9DC0')
const blushColor = ref('#FF639B')

const list = ref<Param[]>([
  {
    isMouthful: true,
    mainColor: '#ffea08',
    blushColor: '#fcb423',
  },
  {
    isMouthful: true,
    mainColor: '#5fd42c',
    blushColor: '#378c12',
  },
  {
    isMouthful: true,
    mainColor: '#f72a2a',
    blushColor: '#8f003e',
  },
])

function onMouseenter(param: Param) {
  param.isMouthful = false
}
function onMouseleave(param: Param) {
  param.isMouthful = true
}
</script>

查看程式碼收合程式碼

原理

使用 SVG 繪製卡比主體，透過 anime.js 控制動畫。

📚 anime.js

這裡使用了 SVG Mask 的技巧，切割出卡比的嘴巴，實現卡比吃掉元素的效果。

原始碼

元件原始碼wrapper-kirby-mouthful-mode/範例原始碼wrapper-kirby-mouthful-mode/examples/

API

Props

interface Props {
  /** 是否塞滿嘴 */
  isMouthful?: boolean;
  /** 卡比皮膚的厚度。單位 px
   *
   * @default 10
   */
  thickness?: number;
  /** 主色 */
  mainColor?: string;
  /** 腮紅顏色 */
  blushColor?: string;
  /** 身體圓角 */
  bodyRounded?: number;
  /** 嘴巴圓角 */
  mouthRounded?: number;
}