炫彩粒子輪播 carousel

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

靈感來自 Envato 的這個輪播。

技術關鍵字

名稱	描述
Vue Transition	內建元件，可以處理單個項目的進出動畫
Babylon.js	3D 引擎
WebGPU	現代網頁圖形 API，WebGL 繼任者
粒子系統	產生大量小物件的系統，常用於模擬煙霧、火焰、雨雪等效果
Canvas getImageData	取得指定 Canvas 區域的像素資料
Memoization	藉由快取 function 計算結果，提高性能，避免重複計算
物理模擬	模擬真實世界物理現象，如重力、碰撞、速度等物理效果

使用範例

基本用法

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

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">
                努力讀取中
              </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="上一張"
          class="flex-1"
          @click="carouselRef?.prev()"
        />
        <base-btn
          label="下一張"
          class="flex-1"
          @click="carouselRef?.next()"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
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',
]
</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

原始碼

元件

、範例

API

Props

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

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

Emits

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

Methods

defineExpose({
  next,
  prev,
})