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

上面的動畫效果，非常有意思，核心有兩點：

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

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

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

實現(xiàn) X 軸方向的運動

這里其實我們并沒有實現(xiàn)碰撞檢測，因為小球和小球之間接觸時，并沒有發(fā)生碰撞效果。

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

下面，我們一起來實現(xiàn)單個方向上的運動動畫：

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

簡單解讀一下：

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

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

如法炮制 Y 軸方向的運動

好，有了上面的鋪墊，我們只需要再如法炮制 Y 軸方向的運動即可。

利用元素的 top 進行 Y 軸方向的運動：

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

我們增加了一個 vertical 3s infinite linear alternate Y 軸的運動動畫，實現(xiàn)小球從 top: 0 到 top: calc(100vh - 100px); 的運動。

這樣，我們就成功的得到了 X、Y 兩個方向上的小球運動，它們疊加在一起的效果如下：

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

當然，此時的問題在于，缺少了隨機性，小球的始終在左上和右下角之間來回運動。

為了解決這個問題，我們需要添加一定的隨機性，這個問題也要解決，我們只需要讓兩個方向上運動時間不一致即可。

我們修改一下代碼，讓 X、Y 軸的運動時長不一致即可：

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

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

使用 transform 替代 top、left

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

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

上述兩個問題，使用 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 運動。并且，將動畫代碼中的 100px 替換成了 100%，這一點的好處是，在 transform: translate 中，100% 表示的是元素本身的高寬，這樣，當我們改變元素本身的大小時，就無需再改變 @keyframes 中的代碼，通用性更強。

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

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

這是什么原因呢？

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

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

使用 animation-composition 進行動畫合成

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

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

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

這是一個非常新的屬性，表示動畫合成屬性，從 Chrome 112 版本開始支持。

有三種不同的取值：

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

本文不會詳細介紹 animation-composition，感興趣的可以看看 MDN 的屬性介紹或者 XBOXYAN 大佬的這篇文章css簡單動畫之transition屬性詳解

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

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

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

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

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

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

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

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

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

那如何快速實現(xiàn)顏色的變化呢？利用 filter: hue-rotate() 即可快速實現(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) 的改變，實現(xiàn)顏色的變化，觀察下面的動圖，理解 steps(5) 的作用。

• animation: colorChange 10s linear infinite 表示背景動畫的過渡變化
• animation: colorChange 10s steps(5) infinite，這里表示 10s 的動畫分成 5 步，每兩秒，會觸發(fā)一次動畫：

效果如下：

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

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，上面，我們就把整個效果的完整原理剖析了一遍。

掌握了整個原理之后，我們就可以把這個效果應(yī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，實現(xiàn)了圖片顏色的變化。

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

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

OK，我們再進一步，基于上面的效果，我們可以實現(xiàn)各種有趣的粒子效果，如果同時讓頁面存在 1000 個粒子呢？

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

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

最后

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

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

最新評論