老板要求我實現一只碎片化效果的鳥，難得倒我？

作者：前端之神 2024-08-06 16:23:12

開發

老板要求我實現每一只動物都是一塊一塊碎片組成的，并且每一次切換的時候，碎片都有一種重組動畫效果，實現起來不難，分享給大家。

老板：別人有的，我們也要有！

效果如下，每一只動物都是一塊一塊碎片組成的，并且每一次切換的時候，碎片都有一種重組動畫效果，如下：

實現起來不難，分享給大家！

一探究竟

進到這個網站中看，可以看到每一只動物都是由無數個碎片DOM節點疊加而成的，而這些碎片是怎么畫的呢，可以看出用了兩個樣式：

clip-path：碎片形狀的繪制
background-color：碎片背景顏色

如果對 clip-path 這個樣式感興趣的，可以去 MDN 文檔上看~

碎片數據獲取

既然我們知道了這些動物是由碎片疊加而來，那么我們可以去獲取每一個碎片的 clip-path、background-color，并存入到一個數組中。

這對于我們前端來說并非難事，只需要通過 DOM 操作即可收集數據，代碼如下：

將上面代碼復制到網站的控制臺中去進行運行，即可或者這只動物的所有碎片的數據：

接著你如果想獲取多個動物的碎片數據，無非就是切換一個動物，就執行一下這段代碼，這樣就可以獲取到很多只動物的碎片數據了~

我將這些數據集合收集到 data.json 文件中：

動物繪制

有了數據之后我們就可以開始繪制動物了，只需要通過簡單的循環以及樣式賦值，即可繪制成功

切換動畫

接下來需要完成動畫切換，以及切換動畫，其實也不難，只需要給每個碎片加上過渡動畫，并且增加一個按鈕實現數據索引切換即可：

完整源碼

獲取碎片數據代碼：

let shards = document.querySelectorAll('.shard')
const res = []
shards.forEach(ele => {
    const allStyles = window.getComputedStyle(ele)
    res.push({
        clipPath: allStyles.getPropertyValue('clip-path'),
        backgroundColor: allStyles.getPropertyValue('background-color')
    })
})
console.log(JSON.stringify(res))

<template>
  <Button @click="changeAnimal">切換</Button>
  <div class="animal-container">
    <template v-for="(item, index) in currentData" :key="index">
      <div
        class="clip-item"
        :style="{
          backgroundColor: item.backgroundColor,
          clipPath: item.clipPath,
          transitionDelay: `${index * 15}ms`,
        }"
      ></div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import data from './data.json';

const currentIndex = ref(0);
const currentData = ref(data[0]);
const length = data.length;
const changeAnimal = () => {
  currentIndex.value++;
  //   索引到最后了，重置為 0
  if (currentIndex.value >= length) {
    currentIndex.value = 0;
  }
  currentData.value = data[currentIndex.value];
};
</script>

<style scoped lang="less">
.animal-container {
  width: 800px;
  height: 600px;
  position: relative;

  .clip-item {
    position: absolute;
    width: 100%;
    height: 100%;

    // 動畫過渡效果
    transition-property: all;
    transition-duration: 1000ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}
</style>

責任編輯：趙寧寧來源：前端之神

前端 DOM 開發