快捷導(dǎo)航

Vue + AnimeJS實(shí)現(xiàn)3d輪播圖的詳細(xì)代碼

更新時(shí)間：2024年01月25日 10:51:35 作者：Kakarotto

輪播圖在開(kāi)發(fā)中是經(jīng)常用到的,3D輪播圖是其中最常用的一種,所以在這篇文章中將給大家介紹Vue + AnimeJS實(shí)現(xiàn)3d輪播圖,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下

基礎(chǔ)布局

首先需要設(shè)置輪播容器中的子元素位于3D容器中，這是需要設(shè)置transform-style。transform-style有兩個(gè)值，flat：設(shè)置元素的子元素位于該元素的平面中、preserve-3d：設(shè)置元素的子元素位于3D空間中。

與之對(duì)應(yīng)的還需要設(shè)置perspective，指與z=0平面的距離實(shí)現(xiàn)3d效果的輪播圖主要需要?jiǎng)討B(tài)修改transform中translateX，rotateY，scale以及每個(gè)圖片的層級(jí)、透明度。

由上圖可知，縮放比例、層級(jí)、透明度三個(gè)屬性中間值最大，然后兩邊的值逐級(jí)遞減。在X軸上的偏移值是以中間圖片為基準(zhǔn)向左（逐級(jí)遞減）、向右偏移（逐級(jí)遞增）。Y軸上的旋轉(zhuǎn)以中間圖片為基準(zhǔn)左邊順時(shí)針旋轉(zhuǎn)，右邊逆時(shí)針旋轉(zhuǎn)。

這里輪播圖為無(wú)限輪播效果，處理方式是在初始化的時(shí)候保存上述五個(gè)參數(shù)，因?yàn)樵趺囱h(huán)，固定位置對(duì)應(yīng)的五個(gè)參數(shù)是相同的，在切換的時(shí)候就不需要重新計(jì)算。

因?yàn)槭褂玫氖莢ite，獲取靜態(tài)文件資源的時(shí)候需要使用new URL()方法來(lái)實(shí)現(xiàn)資源的引用。初始化代碼如下：

<div style="display: flex; align-items: center; justify-content: center">
  <el-icon size="30" @click="clickArrow('left')"><ArrowLeft /></el-icon>
  <div class="carousel-wrapper" ref="carouselRef">
    <div
      v-for="(carousel, index) in carouselList"
      :key="carousel.id"
      :data-base-id="carousel.id"
      class="item"
      :style="computedStyle(index)"
    >
      <img :src="carousel.url" />
    </div>
  </div>
  <el-icon size="30" @click="clickArrow('right')"><ArrowRight /></el-icon>
</div>

const carouselList = ref([
  {
    id: 1,
    url: new URL('../../assets/images/1.jpg', import.meta.url).href
  },
  {
    id: 2,
    url: new URL('../../assets/images/2.jpg', import.meta.url).href
  },
  {
    id: 3,
    url: new URL('../../assets/images/3.jpg', import.meta.url).href
  },
  {
    id: 4,
    url: new URL('../../assets/images/4.jpg', import.meta.url).href
  },
  {
    id: 5,
    url: new URL('../../assets/images/5.jpg', import.meta.url).href
  }
])

const carouselRef = ref()
type CarouseInfo = {
  x: number[]
  y: number[]
  z: number[]
  opacity: number[]
}
const carouselInfo = reactive<CarouseInfo>({
  x: [],
  y: [],
  z: [],
  opacity: []
})

const baseParams = {
  x: 150,
  xOffset: -300,
  y: -25,
  yOffset: 50,
  opacity: 0.6,
  opacityOffset: 0.2
}

const computedStyle = (i: number) => {
  const { opacity, opacityOffset, xOffset, yOffset } = baseParams
  let z = 0
  let opacityNum = 0
  let x = i * baseParams.x + xOffset
  let y = i * baseParams.y + yOffset
  const centerIndex = (carouselList.value.length - 1) / 2

  if (i <= centerIndex) {
    z = i * 5
    opacityNum = i * opacityOffset + opacity
  } else {
    const baseIndex = i - centerIndex * (i - centerIndex)
    z = baseIndex * 5
    opacityNum = baseIndex * opacityOffset + opacity
  }
  carouselInfo.x.push(x)
  carouselInfo.y.push(y)
  carouselInfo.z.push(z)
  carouselInfo.opacity.push(opacityNum)
  return {
    transform: `translateX(${x}px) rotateY(${y}deg) scale(${opacityNum})`,
    zIndex: z,
    opacity: opacityNum
  }
}

.carousel-wrapper {
  width: 900px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transform-style: preserve-3d;
  overflow: hidden;
  perspective: 1000px;
}
.item {
  position: absolute;
  user-select: none;
}

輪播

在項(xiàng)目初始化時(shí)保存了初始化參數(shù)，點(diǎn)擊左側(cè)按鈕時(shí)，分別獲取保存的五個(gè)參數(shù)中的第一個(gè)，然后放到數(shù)組中的末尾，點(diǎn)擊右側(cè)按鈕時(shí)，分別獲取五個(gè)參數(shù)中的最后一個(gè)，放到數(shù)組中的最前面，代碼如下：

const switchPosition = (val: number[], type = 'right') => {
  const target = type === 'right' ? val.shift() : val.pop()
  type === 'right' ? val.push(target!) : val.unshift(target!)
  return val
}

為了更好的處理動(dòng)畫(huà)，這里使用animejs處理，根據(jù)點(diǎn)擊之后的參數(shù)，重新遍歷dom節(jié)點(diǎn)，修改每個(gè)dom的偏移值、旋轉(zhuǎn)角度、縮放比例、透明度，因?yàn)闆](méi)有在animejs中找到設(shè)置層級(jí)的屬性，所以這里使用原生設(shè)置層級(jí)。代碼如下：

const clickArrow = (arrowType: string) => {
  const x = switchPosition(carouselInfo.x, arrowType)

  const y = switchPosition(carouselInfo.y, arrowType)
  const z = switchPosition(carouselInfo.z, arrowType)
  const opacity = switchPosition(carouselInfo.opacity, arrowType)

  Array.from(carouselRef.value.children).forEach((item, index) => {
    ;(item as HTMLDivElement).style.zIndex = z[index].toString()
    anime({
      targets: item as HTMLDivElement,
      translateX: x[index],
      rotateY: y[index],
      scale: opacity[index],
      opacity: opacity[index],
      easing: 'linear'
    })
  })
}

至此，一個(gè)能夠循環(huán)的3D輪播圖就完成了。代碼示例如下：

https://stackblitz.com/edit/vitejs-vite-1mgsdu?file=src%2Fassets%2Fimages%2F4.jpg

以上就是Vue + AnimeJS實(shí)現(xiàn)3d輪播圖的詳細(xì)代碼的詳細(xì)內(nèi)容，更多關(guān)于Vue AnimeJS3d輪播圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: