介紹一個(gè)在Chrome 112上剛剛正式推出的 CSS 動(dòng)畫合成屬性：animation-composition

??https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition[1]??

日后非常有用的一個(gè)特性，快來(lái)了解一下吧

一、從 CSS 拋物線運(yùn)動(dòng)說(shuō)起

眾所周知，拋物線運(yùn)動(dòng)是一個(gè)水平方向上勻速、垂直方向上勻加速的合成運(yùn)動(dòng)

這個(gè)其實(shí)用 CSS 動(dòng)畫也很好實(shí)現(xiàn)，水平和垂直兩個(gè)方向的位移動(dòng)畫分別用不同的動(dòng)畫緩存函數(shù)

有興趣的可以參考張?chǎng)涡竦倪@篇文章：這回試試使用CSS實(shí)現(xiàn)拋物線運(yùn)動(dòng)效果[2]

這里簡(jiǎn)單介紹一下

實(shí)現(xiàn)這樣的效果需要一個(gè)嵌套結(jié)構(gòu)

<div class="ball-x">
  <div class="ball-y"></div>
</div>

然后里外設(shè)置不同的動(dòng)畫緩沖函數(shù)

.ball-x { 
  animation-timing-function: linear; /*勻速直線運(yùn)動(dòng)*/
}
.ball-y { 
  animation-timing-function: cubic-bezier(.55, 0, .85, .36);  /*大致勻加速運(yùn)動(dòng)*/
}

運(yùn)動(dòng)分解效果如下：

Kapture 2023-04-21 at 17.26.05

那么問(wèn)題來(lái)了，為啥這里需要用到兩層標(biāo)簽?zāi)兀績(jī)H僅為了分解水平運(yùn)動(dòng)和垂直運(yùn)動(dòng)嗎？如果只使用一層標(biāo)簽會(huì)怎么樣？

??????

這個(gè)稍后再說(shuō)

二、動(dòng)畫合成屬性

現(xiàn)在來(lái)介紹今天的主角。首先看語(yǔ)法，還是非常簡(jiǎn)單的

/* 單個(gè)值 */
animation-composition: replace; 
animation-composition: add;/*追加*/
animation-composition: accumulate;/*混合*/
/* 多個(gè)值，暫不討論 */
animation-composition: replace, add;
animation-composition: add, accumulate;
animation-composition: replace, add, accumulate;

主要是這 3 個(gè)關(guān)鍵詞：

• replace：覆蓋（默認(rèn)值）。動(dòng)畫會(huì)覆蓋原有屬性。
• add：追加。動(dòng)畫追加到原有屬性后面。
• accumulate：累加。動(dòng)畫會(huì)和原有屬性相同的部分進(jìn)行累加。

光看語(yǔ)法和描述可能不知道是做什么的，特別是add和accumulate，差異非常微妙，直接看一個(gè)例子。

假設(shè)有一個(gè)元素，默認(rèn)有一些樣式

div{
  transform-origin: 50% 50%;
 transform: translateX(50px) rotate(45deg);
}

然后，給一個(gè)動(dòng)畫，關(guān)鍵幀是這樣的

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

下面是 3 個(gè)關(guān)鍵詞的效果對(duì)比

Kapture 2023-04-21 at 18.58.23

demo參見(jiàn) https://codepen.io/web-dot-dev/pen/VwGRBVX[3]

可以從動(dòng)畫運(yùn)行的終點(diǎn)看出這幾種合成的差異。

第一個(gè)replace，也就是默認(rèn)效果。其實(shí)就是直接將transform中的translateX(50px) rotate(45deg)變成了translateX(100px)。

image-20230421192925447

第二個(gè)add。可以理解成直接在transform后追加，也就是最后變成了translateX(50px) rotate(45deg) translateX(100px)，等同于先向右移動(dòng)50px，然后旋轉(zhuǎn)45deg，再向右移動(dòng)100px。下面是拆解過(guò)程（注意旋轉(zhuǎn)軸）

image-20230421192859456

第三個(gè)accumulate。可以理解成將已有的translateX(50px)累加，最后結(jié)果是translateX(150px) rotate(45deg)

image-20230421194110419

怎么樣，這幾種差異明白了嗎？??

當(dāng)然這些動(dòng)畫合成都是針對(duì)于相同的屬性而言，對(duì)于不同的屬性，本來(lái)就沒(méi)有產(chǎn)生任何干擾，自然不會(huì)用到這個(gè)特性。

三、再來(lái)看拋物線運(yùn)動(dòng)

現(xiàn)在回過(guò)頭來(lái)看前面那個(gè)例子。如果只用一層標(biāo)簽如何實(shí)現(xiàn)？??

假設(shè)水平、垂直兩個(gè)方向的動(dòng)畫關(guān)鍵幀是這樣的

@keyframes ballMoveX {
    100%{
        transform: translateX(300px) 
    }
}
@keyframes ballMoveY {
 100% { 
        transform: translateY(300px)
    } 
}

然后小球?qū)⑦@兩個(gè)動(dòng)畫合起來(lái)

.ball{
    animation: 
    ballMoveX 1s linear infinite alternate, 
    ballMoveY 1s cubic-bezier(.55, 0, .85, .36) infinite alternate;
}

可以得到一個(gè)很奇怪的動(dòng)畫

Kapture 2023-04-21 at 19.44.49

原因其實(shí)是這兩個(gè)屬性沖突了，后面的動(dòng)畫覆蓋了前面的，導(dǎo)致動(dòng)畫的結(jié)束點(diǎn)其實(shí)是translateY(300px)

像這種情況下，用動(dòng)畫合成屬性就非常合適了

.ball{
    ...
   animation-composition: add; /*accumulate也行*/
}

add和accumulate都行，因?yàn)閠ranslateX和translateY并不能累加，只能追加。

效果如下

Kapture 2023-04-21 at 19.49.14

這樣就得到了正常的拋物線運(yùn)動(dòng)了

完整代碼可以查看以下任意鏈接：

• CSS animation-composition (juejin.cn)[4]
• CSS animation-composition (runjs.work)[5]
• CSS animation-composition (codepen.io)[6]

四、兼容性和總結(jié)

提一下兼容性。這方面 Safari居然跑在了前頭，然后Chrome也是最近得到了正式支持，F(xiàn)irefox目前仍然是實(shí)驗(yàn)支持，不過(guò)離正式支持也不遠(yuǎn)了。也就是說(shuō)這個(gè)特性以后一定會(huì)全兼容，也不用擔(dān)心學(xué)著學(xué)著突然都放棄了。兼容性列表如下：

image-20230422113128869

相信大家已經(jīng)對(duì)動(dòng)畫合成有了一定的了解，下面總結(jié)一下要點(diǎn)：

可以用一杯水來(lái)做比方

1. replace：替換。將這杯水倒掉，然后倒進(jìn)一杯油
2. add：追加（疊加）。在這杯水上倒入一些油，油覆蓋在了水上
3. accumulate：累加（混合）。在這杯水倒入奶茶，里面都有水，混合在了一起