炫彩粒子輪播

會噴出超多彩色粒子的華麗輪播！੭ ˙ᗜ˙ )੭

靈感來自 Envato 的這個輪播。

技術關鍵字

名稱	描述
Vue Transition	內建元件，可以處理單個項目的進出動畫
Babylon.js	3D 引擎
粒子系統	產生大量小物件的系統，常用於模擬煙霧、火焰、雨雪等效果
Canvas getImageData	取得指定 Canvas 區域的像素資料
Memoization	藉由快取 function 計算結果，提高性能，避免重複計算
物理模擬	模擬真實世界物理現象，如重力、碰撞、速度等物理效果
Simplex Noise	改良版 Perlin Noise，計算更快且無方向性偏差，常用於程序化生成
Post-processing	增強渲染效果，例如：鏡頭模糊、顏色分割等等

使用範例

基本用法

切換圖片時，會產生對應圖片位置顏色的粒子

0

上一張下一張

<template>
  <div class="w-full flex flex-col gap-4">
    <div class="flex justify-center">
      <carousel-colorful-particles
        ref="carouselRef"
        v-slot="{ fps, isLoading }"
        :src-list
        class="aspect-video"
      >
        <div class="absolute left-0 top-0 p-4 text-white">
          {{ fps }}
        </div>

        <transition name="opacity">
          <div
            v-if="isLoading"
            class="absolute h-full w-full flex-center bg-black/50"
          >
            <div class="flex flex-col items-center gap-4">
              <div class="h-10 w-10 animate-spin border-4 border-white border-t-transparent rounded-full" />

              <span class="text-2xl text-white tracking-widest">
                {{ t('loading') }}
              </span>
            </div>
          </div>
        </transition>
      </carousel-colorful-particles>
    </div>

    <div class="w-full flex flex-col gap-4">
      <div class="w-full flex gap-4">
        <base-btn
          :label="t('prev')"
          class="flex-1"
          @click="carouselRef?.prev()"
        />
        <base-btn
          :label="t('next')"
          class="flex-1"
          @click="carouselRef?.next()"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import BaseBtn from '../../base-btn.vue'
import CarouselColorfulParticles from '../carousel-colorful-particles.vue'

const carouselRef = ref<InstanceType<typeof CarouselColorfulParticles>>()

const srcList = [
  '/low/painting-codfish-rain.webp',
  '/low/photography-magnificent-clouds-over-stone-coast.webp',
  '/low/photography-sparrow-on-streetlamp.webp',
  '/low/photography-afternoon-cicada-chirping.webp',
  '/low/photography-big-stupid-bird.webp',
  '/low/photography-ears-of-rice.webp',
  '/low/photography-fireworks.webp',
  '/low/photography-whispers-of-the-setting-sun.webp',
  '/low/photography-street-cat.webp',
  '/low/profile.webp',
]

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

<style scoped lang="sass">
.opacity
  &-enter-active, &-leave-active
    transition-duration: 0.4s
  &-enter-from, &-leave-to
    opacity: 0 !important
</style>

查看程式碼收合程式碼

原理

使用 babylon.js 的 ParticleSystem 並自定義 startPositionFunction 與 updateFunction

參考文件：Customizing Particles

原始碼

元件原始碼carousel-colorful-particles/範例原始碼carousel-colorful-particles/examples/

API

Props

interface Props {
  index?: number;
  srcList: string[];
  /** 轉場時間。單位 ms
   *
   * @default 4000
   */
  duration?: number;

  /** 不指定則所有效果輪流 */
  emitEffect?: EmitEffect;
}

Emits

const emit = defineEmits<{
  'update:index': [index: number];
}>()

Methods

interface Expose {
  next: () => void;
  prev: () => void;
}