炫彩粒子輪播 carousel

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

靈感來自 Envato 的這個輪播。

使用範例

基本用法

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

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,
})