前端每日實戰：144# 視頻演示如何用 D3 和 GSAP 創做一個集體舞動畫

效果預覽

按下右側的「點擊預覽」按鈕能夠在當前頁面預覽，點擊連接能夠全屏預覽。

https://codepen.io/comehope/pen/gdVObN

可交互視頻

此視頻是能夠交互的，你能夠隨時暫停視頻，編輯視頻中的代碼。

請用 chrome, safari, edge 打開觀看。

https://scrimba.com/p/pEgDAM/caRLack

源代碼下載

每日前端實戰系列的所有源代碼請從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，容器中包含 2 個子容器，.horizontal 表明水平的線段，.vertical 表明垂直的線段，每一個子容器中包含 4 個子元素：

<div class="container">
    <div class="horizontal">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="vertical">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
}

設置容器尺寸，其中 --side-length 是方陣的每一邊的元素數量：

.container {
    --side-length: 2;
    position: relative;
    width: calc(40px * calc(var(--side-length)));
    height: calc(40px * calc(var(--side-length)));
}

用 grid 佈局排列子元素，4 個元素排列成 2 * 2 的方陣：

.container .horizontal,
.container .vertical {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(var(--side-length), 1fr);
}

設置子元素的樣式，.horizontal 內的子元素是橫條，.vertical 內的子元素是豎條：

.container .horizontal span {
    width: 40px;
    height: 10px;
    background: #fff;
    margin: 15px 0;
}

.container .vertical span {
    width: 10px;
    height: 40px;
    background: #fff;
    margin: 0 15px;
}

至此，靜態佈局完成，接下來用 d3 批量處理子元素。
引入 d3 庫：

<script src="https://d3js.org/d3.v5.min.js"></script>

刪除掉 html 文件中的子元素 dom 節點，刪除掉 css 文件中聲明的 css 變量。
定義方陣每一邊的元素數量，並把這個數值賦給 css 變量：

const SIDE_LENGTH = 2;

let container = d3.select('.container')
    .style('--side-length', SIDE_LENGTH);

定義一個添加 span 子元素的函數，分別添加橫向和豎向的子元素：

function appendSpan(selector) {
    container.select(selector)
    .selectAll('span')
    .data(d3.range(SIDE_LENGTH * SIDE_LENGTH))
    .enter()
    .append('span');
}

appendSpan('.horizontal');
appendSpan('.vertical');

此時，佈局已改成動態的，能夠經過修改 SIDE_LENGTH 的值來建立不一樣邊長的方陣，好比如下語句將建立 5 * 5 的方陣：

const SIDE_LENGTH = 5;

接下來用 GSAP 建立動畫。（注：因 scrimba 在使用 gsap 時會崩潰，因此視頻演示採用 css 動畫，但 codepen 和 github 均採用 gsap 動畫）
引入 GSAP 庫：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

聲明動畫變量 animation，聲明表明 dom 元素的變量 $horizontalSpan 和 $verticalSpan：

let animation = new TimelineMax({repeat: -1});
let $horizontalSpan = '.container .horizontal span';
let $verticalSpan = '.container .vertical span';

先建立橫條的動畫，共分紅 4 步，每一個 to 語句的最後一個參數是步驟的名稱：

animation.to($horizontalSpan, 1, {rotation: 45}, 'step1')
    .to($horizontalSpan, 1, {x: '-10px', y: '-10px'}, 'step2')
    .to($horizontalSpan, 1, {rotation: 0, x: '0', y: '0', scaleY: 2, scaleX: 0.5}, 'step3')
    .to($horizontalSpan, 1, {rotation: 90, scaleY: 1, scaleX: 1}, 'step4')

再建立豎條的動畫，to 語句的步驟名稱與橫條的步驟名稱相同，以便與橫條保持動畫同步：

animation.to($verticalSpan, 1, {rotation: 45}, 'step1')
    .to($verticalSpan, 1, {x: '10px', y: '10px'}, 'step2')
    .to($verticalSpan, 1, {x: '0', y: '0', scaleX: 2, scaleY: 0.5}, 'step3')
    .to($verticalSpan, 1, {rotation: 90, scaleX: 1, scaleY: 1}, 'step4');

在動畫的末尾用時間尺度縮放函數讓動畫播放速度加快一倍：

animation.timeScale(2);

最後，把方陣的邊長改成 10，方陣越大就越有氣勢：

const SIDE_LENGTH = 10;

大功告成！