櫻吹雪

大家有看過新海誠的經典作品《秒速 5 公分》嗎？

聽說最近要重返大銀幕啦，有興趣的話推薦大家一起來胃痛一下。ᕕ( ﾟ ∀。)ᕗ（大誤

電影的場景真的很美，櫻花飄落的畫面真的如詩如畫。

配上山崎將義的《One more time, One more chance》，氣氛真的很到位，惆悵感滿滿。

分享一篇我覺得寫得很好的觀後感，內含據透，請自行斟酌。

現在讓我們在網頁上感受一下櫻花飄落的浪漫吧。(´,,•ω•,,)

使用範例

基本用法

設定基本參數。

數量: 500

重新產生

0

查看範例原始碼

<template>
  <div class="w-full flex flex-col gap-4 py-2">
    <div class="flex flex-col gap-2 border p-4">
      <div class="flex gap-6">
        <base-input
          v-model.number="quantity"
          type="range"
          :label="`數量: ${quantity}`"
          class="flex-1"
          :min="100"
          :step="1"
          :max="10000"
        />
      </div>

      <div
        class="w-full cursor-pointer select-none border rounded px-4 py-2 text-center"
        @click="refresh()"
      >
        重新產生
      </div>
    </div>

    <bg-sakura-fubuki
      v-slot="{ fps }"
      :key="key"
      :capacity="quantity"
      :particle-size="{ width: 1.05, height: 1.5 }"
      class="bg h-full w-full"
    >
      <div class="absolute left-0 top-0 p-4 opacity-40">
        {{ fps }}
      </div>
    </bg-sakura-fubuki>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BaseInput from '../../base-input.vue'
import BgSakuraFubuki from '../bg-sakura-fubuki.vue'

const quantity = ref(500)

const key = ref('')
function refresh() {
  key.value = Math.random().toFixed(5)
}
</script>

<style scoped lang="sass">
.text-layer
  background: linear-gradient(20deg, #def4ff, #FFF)
</style>

背景

啟用

查看範例原始碼

<template>
  <div class="w-full flex flex-col gap-4 py-2">
    <base-checkbox
      v-model="enable"
      label="啟用"
      class="border rounded p-4"
    />

    <transition name="opacity">
      <bg-sakura-fubuki
        class="left-0 top-0 z-50 h-full w-full duration-500 !fixed"
        :class="classes"
      />
    </transition>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import BaseCheckbox from '../../base-checkbox.vue'
import BgSakuraFubuki from '../bg-sakura-fubuki.vue'

const enable = ref(false)

const classes = computed(() => ({
  'opacity-0': !enable.value,
  'opacity-100': enable.value,
}))
</script>

<style scoped lang="sass">
</style>

原理

使用 babylon.js 產生實體粒子，才有辦法產生鏡頭特效。(≖‿ゝ≖)✧

原始碼

元件

、範例

API

Props

interface Props {
  /** 粒子貼圖 */
  particleSrc?: string;
  /** 粒子尺寸 */
  particleSize?: Record<'width' | 'height', number>;
  /** 粒子容量 */
  capacity?: number;
  /** 粒子移動速度。
   * - 正 x：往左
   * - 正 y：往上
   * - 正 z：射出螢幕方向
   */
  velocity?: Record<'x' | 'y' | 'z', number>;
}