本文，我們將一起學(xué)習(xí)，使用純 CSS，實(shí)現(xiàn)如下所示的動(dòng)畫效果：

上面的動(dòng)畫效果，非常有意思，核心有兩點(diǎn)：

• 小球隨機(jī)做 X、Y 方向的直線運(yùn)動(dòng)，并且能夠?qū)崿F(xiàn)碰撞到邊界的時(shí)候，實(shí)現(xiàn)反彈效果
• 小球在碰撞邊界的瞬間，顏色發(fā)生隨機(jī)的變化

嗯？很有意思的效果?？瓷先?，我們好像使用 CSS 實(shí)現(xiàn)了碰撞檢測(cè)。

然而，實(shí)際情況真的是這樣嗎？讓我們一起一探究竟！

實(shí)現(xiàn) X 軸方向的運(yùn)動(dòng)

這里其實(shí)我們并沒有實(shí)現(xiàn)碰撞檢測(cè)，因?yàn)樾∏蚝托∏蛑g接觸時(shí)，并沒有發(fā)生碰撞效果。

我們只實(shí)現(xiàn)了，小球與邊界之間的碰撞反應(yīng)。不過這里，也并非碰撞檢測(cè)，我們只需要設(shè)置好單個(gè)方向的運(yùn)動(dòng)動(dòng)畫，并且設(shè)置 animation-direction: alternate; 即可！

下面，我們一起來實(shí)現(xiàn)單個(gè)方向上的運(yùn)動(dòng)動(dòng)畫：

<div></div>

div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #0cf;
    animation: horizontal 3s infinite linear alternate;
}
@keyframes horizontal {
    from { 
        left: 0;
    }
    to { 
        left: calc(100vw - 100px);
    }
}

簡(jiǎn)單解讀一下：

• 元素設(shè)置為 position: absolute 絕對(duì)定位，利用 left 進(jìn)行 X 軸方向的運(yùn)動(dòng)
• 我們讓元素 div 運(yùn)動(dòng)的距離為 left: calc(100vw - 100px)，元素本身的高寬都是 100px，因此相當(dāng)于運(yùn)動(dòng)到屏幕的最右側(cè)
• 動(dòng)畫設(shè)置了 alternate 也就是 animation-direction: alternate; 的簡(jiǎn)寫，表示動(dòng)畫在每個(gè)循環(huán)中正反交替播放

這樣，我們就巧妙的實(shí)現(xiàn)了，在視覺上，小球元素移動(dòng)到最右側(cè)邊界時(shí)，回彈的效果：

如法炮制 Y 軸方向的運(yùn)動(dòng)

好，有了上面的鋪墊，我們只需要再如法炮制 Y 軸方向的運(yùn)動(dòng)即可。

利用元素的 top 進(jìn)行 Y 軸方向的運(yùn)動(dòng)：

div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #0cf;
    animation: 
        horizontal 3s infinite linear alternate,
        vertical 3s infinite  linear alternate;
}
@keyframes horizontal {
    from { 
        left: 0;
    }
    to { 
        left: calc(100vw - 100px);
    }
}
@keyframes vertical {
    from { 
        top: 0;
    }
    to { 
        top: calc(100vh - 100px);
    }
}

我們?cè)黾恿艘粋€(gè) vertical 3s infinite linear alternate Y 軸的運(yùn)動(dòng)動(dòng)畫，實(shí)現(xiàn)小球從 top: 0 到 top: calc(100vh - 100px); 的運(yùn)動(dòng)。

這樣，我們就成功的得到了 X、Y 兩個(gè)方向上的小球運(yùn)動(dòng)，它們疊加在一起的效果如下：

顏色的變化可以忽略，GIF 錄制問題。

當(dāng)然，此時(shí)的問題在于，缺少了隨機(jī)性，小球的始終在左上和右下角之間來回運(yùn)動(dòng)。

為了解決這個(gè)問題，我們需要添加一定的隨機(jī)性，這個(gè)問題也要解決，我們只需要讓兩個(gè)方向上運(yùn)動(dòng)時(shí)間不一致即可。

我們修改一下代碼，讓 X、Y 軸的運(yùn)動(dòng)時(shí)長(zhǎng)不一致即可：

div {
    position: absolute;
    // ...
    animation: 
        horizontal 2.6s infinite linear alternate,
        vertical 1.9s infinite  linear alternate;
}

如此一來，整體的效果就好上了不少，由于整個(gè)動(dòng)畫是無限反復(fù)進(jìn)行的，隨著時(shí)間的推進(jìn)，整個(gè)動(dòng)畫呈現(xiàn)出來的就是無序、隨機(jī)的運(yùn)動(dòng)：

使用 transform 替代 top、left

當(dāng)然，上面的效果基本上沒有什么太大的問題了，但是代碼層面不夠優(yōu)雅，主要有兩點(diǎn)問題：

• 元素移動(dòng)使用的是 top 和 left，性能相對(duì)較差，需要使用 transform 進(jìn)行替代
• 代碼中 hardcode 了 100px，由于 DEMO 中小球的大小是 100px x 100px，并且在動(dòng)畫的代碼中也使用了 100px 這個(gè)值進(jìn)行了運(yùn)動(dòng)終態(tài)的計(jì)算，因此如果想修改小球的元素大小，需要改動(dòng)地方較多

上述兩個(gè)問題，使用 transform: translate() 都可以解決，但是我們?yōu)槭裁匆婚_始不用 transform 呢？

我們來嘗試一下，使用 transform 替代 top、left：

div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #0cf;
    animation: 
        horizontal 2.6s infinite linear alternate,
        vertical 1.9s infinite  linear alternate;
}
@keyframes horizontal {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100vw - 100%)); }
}
@keyframes vertical {
    from { transform: translateY(0); }
    to { transform: translateY(calc(100vh - 100%)); }
}

上述代碼中，我們使用了 transform 替代 top、left 運(yùn)動(dòng)。并且，將動(dòng)畫代碼中的 100px 替換成了 100%，這一點(diǎn)的好處是，在 transform: translate 中，100% 表示的是元素本身的高寬，這樣，當(dāng)我們改變?cè)乇旧淼拇笮r(shí)，就無需再改變 @keyframes 中的代碼，通用性更強(qiáng)。

我們來看看修改后的效果：

有點(diǎn)問題！預(yù)想中的效果并沒有出現(xiàn)，整個(gè)動(dòng)畫只有 Y 軸方向上的動(dòng)畫效果。

這是什么原因呢？

其本質(zhì)在于，定義的 vertical 1.9s infinite linear alternate 的垂直方向的動(dòng)畫效果覆蓋了在其之前定義的 transform: translateX(calc(100vw - 100%)) 動(dòng)畫效果。

說人話就是 X、Y 軸的動(dòng)畫都使用了 transform 屬性，兩者之間造成了沖突。

使用 animation-composition 進(jìn)行動(dòng)畫合成

在之前，這種情況基本是無解的，常見的解決方案就是：

• 解法一：使用 top、left 替代 transform
• 解法二：多一層嵌套，將一個(gè)方向的動(dòng)畫拆解到元素的父元素上

不過，到今天，這個(gè)問題有了更好的解法！也就是 CSS animation 家族中的新屬性 —— animation-composition。

這是一個(gè)非常新的屬性，表示動(dòng)畫合成屬性，從 Chrome 112 版本開始支持。

有三種不同的取值：

{
    animation-composition: replace;        // 表示動(dòng)畫值替換
    animation-composition: add;              // 表示動(dòng)畫值追加
    animation-composition: accumulate; // 表示動(dòng)畫值累加
}

本文不會(huì)詳細(xì)介紹 animation-composition，感興趣的可以看看 MDN 的屬性介紹或者 XBOXYAN 大佬的這篇文章css簡(jiǎn)單動(dòng)畫之transition屬性詳解

這里，基于上面的代碼，我們只需要再多設(shè)置一個(gè) animation-composition: accumulate 即可解決問題：

div {
    animation: 
        horizontal 2.6s infinite linear alternate,
        vertical 1.9s infinite  linear alternate;
    animation-composition: accumulate;
}

此時(shí)，我們就能通過一個(gè)元素，利用 transform 得到 X、Y 兩個(gè)方向位移動(dòng)畫的合成效果，也就是我們想要的效果：

使用 steps 實(shí)現(xiàn)顏色切換

解決了位移動(dòng)畫的問題，我們就只剩下最后一個(gè)問題了，如何在碰撞的瞬間，實(shí)現(xiàn)顏色的切換？

這里也非常好解決，由于我們是知道每一輪 X、Y 方向上的動(dòng)畫時(shí)長(zhǎng)的，那我們只需要在每次這個(gè)結(jié)點(diǎn)上，切換一次顏色即可。

并且，由于顏色不是過渡變換，而是直接的跳變，所以，我們需要用到 animation 中的 animation-timing-function: steps()，也就是步驟緩動(dòng)函數(shù)。

對(duì) animation-timing-function: steps() 還不太了解的，可能需要先補(bǔ)一補(bǔ)基礎(chǔ)，可以看看這一篇文章：深入淺出 CSS 動(dòng)畫

舉個(gè)例子，假設(shè) X 方向上，單次的動(dòng)畫時(shí)長(zhǎng)為 3s，那我們可以設(shè)置一個(gè) steps(10) 的顏色動(dòng)畫，總時(shí)長(zhǎng)為 30s，這樣，每隔 3s 就會(huì)觸發(fā)一次 steps() 步驟動(dòng)畫，顏色的變化就能夠和小球與邊界的碰撞動(dòng)畫發(fā)生在同一時(shí)刻。

那如何快速實(shí)現(xiàn)顏色的變化呢？利用 filter: hue-rotate() 即可快速實(shí)現(xiàn)顏色的變化。

理解一下下面的代碼：

<div class="normal"></div>
<div class="steps"></div>

div {
    width: 200px;
    height: 200px;
    background: #fc0;
}
.normal {
    animation: colorChange 10s linear infinite;
}
.steps {
    animation: colorChange 10s steps(5) infinite;
}
@keyframes colorChange {
    100% {
        filter: hue-rotate(360deg);
    }
}

這里，我們用 filter: hue-rotate(360deg) 的改變，實(shí)現(xiàn)顏色的變化，觀察下面的動(dòng)圖，理解 steps(5) 的作用。

• animation: colorChange 10s linear infinite 表示背景動(dòng)畫的過渡變化
• animation: colorChange 10s steps(5) infinite，這里表示 10s 的動(dòng)畫分成 5 步，每?jī)擅耄瑫?huì)觸發(fā)一次動(dòng)畫：

效果如下：

理解了這一步，我們就可以把顏色的變化，也一起疊加到上述的小球變化中：

div {
    animation: 
        horizontal 2.6s infinite linear alternate,
        vertical 2s infinite  linear alternate,
        colorX 26s infinite steps(10),
        colorY 14s infinite steps(7);
    animation-composition: accumulate;
}
@keyframes horizontal {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100vw - 100%)); }
}
@keyframes vertical {
    from { transform: translateY(0); }
    to { transform: translateY(calc(100vh - 100%)); }
}
@keyframes colorX {
    to {
        filter: hue-rotate(360deg);
    }
}
@keyframes colorY {
    to {
        filter: hue-rotate(360deg);
    }
}

這樣，我們就成功的得到了題圖中的效果：

完整的代碼，你可以戳這里：Random Circle Path

應(yīng)用于圖片效果、應(yīng)用與多粒子效果

OK，上面，我們就把整個(gè)效果的完整原理剖析了一遍。

掌握了整個(gè)原理之后，我們就可以把這個(gè)效果應(yīng)用于不同場(chǎng)景中。

譬如，假設(shè)我們有這么一張圖片：

基于上面的效果，稍加改造，我們就可以得到類似的如下效果：

<div></div>

div {
    width: 220px;
    height: 97px;
    background: linear-gradient(#f00, #f00), url(https://s1.ax1x.com/2023/08/15/pPQm9oT.jpg);
    background-blend-mode: lighten;
    background-size: contain; 
    animation: horizontal 3.7s infinite -1.4s linear alternate,
            vertical 4.1s infinite -2.1s linear alternate,
            colorX 37s infinite -1.4s steps(10),
            colorY 28.7s infinite -2.1s steps(7);
    animation-composition: accumulate;
}
@keyframes horizontal {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100vw - 100%)); }
}
@keyframes vertical {
    from { transform: translateY(0); }
    to { transform: translateY(calc(100vh - 100%)); }
}
@keyframes colorX {
    to {
        filter: hue-rotate(2185deg);
    }
}
@keyframes colorY {
    to {
        filter: hue-rotate(1769deg);
    }
}

效果如下：

上面的 DEMO 是基于元素背景色的，本 DEMO 是基于圖片的，因此這里多了一步，利用 mix-blend-mode，實(shí)現(xiàn)了圖片顏色的變化。

完整的代碼，你可以戳這里：CodePen Demo -- Random DVD Path

實(shí)現(xiàn)多粒子碰撞

OK，我們?cè)龠M(jìn)一步，基于上面的效果，我們可以實(shí)現(xiàn)各種有趣的粒子效果，如果同時(shí)讓頁(yè)面存在 1000 個(gè)粒子呢？

下面是我使用 CSS-Doodle 實(shí)現(xiàn)的純 CSS 的粒子效果，其核心原理與上面的保持一致，只是添加了更多的隨機(jī)性：

Amazing！是不是非常有趣，整個(gè)效果的代碼基于 CSS-doodle 的語(yǔ)法，不超過 40 行。完整的代碼，你可以戳這里：CSS Doodle - CSS Particles Animation

最后

總結(jié)一下，本文介紹了如何巧妙的利用 CSS 中的各種高階技巧，組合實(shí)現(xiàn)類似于碰撞場(chǎng)景的動(dòng)畫效果。創(chuàng)建出了非常有趣的 CSS 動(dòng)畫，期間各種技巧的組合運(yùn)用，值得好好琢磨學(xué)習(xí)。

到此這篇關(guān)于使用CSS實(shí)現(xiàn)碰撞檢測(cè)效果的文章就介紹到這了,更多相關(guān)css碰撞檢測(cè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論