了解一下全新的 CSS 動畫合成屬性 Animation-Composition

作者：XboxYan 2023-04-23 09:01:43

開發(fā) 前端

為啥這里需要用到兩層標(biāo)簽?zāi)兀績H僅為了分解水平運(yùn)動和垂直運(yùn)動嗎？如果只使用一層標(biāo)簽會怎么樣？

介紹一個在Chrome 112上剛剛正式推出的 CSS 動畫合成屬性：animation-composition。

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

日后非常有用的一個特性，快來了解一下吧

一、從 CSS 拋物線運(yùn)動說起

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

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

有興趣的可以參考張鑫旭的這篇文章：這回試試使用CSS實(shí)現(xiàn)拋物線運(yùn)動效果[2]。

這里簡單介紹一下。

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

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

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

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

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

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

這個稍后再說。

二、動畫合成屬性

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

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

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

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

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

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

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

然后，給一個動畫，關(guān)鍵幀是這樣的。

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

下面是 3 個關(guān)鍵詞的效果對比。

demo參見 https://codepen.io/web-dot-dev/pen/VwGRBVX[3]。

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

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

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

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

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

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

三、再來看拋物線運(yùn)動

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

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

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

然后小球?qū)⑦@兩個動畫合起來。

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

可以得到一個很奇怪的動畫。

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

像這種情況下，用動畫合成屬性就非常合適了。

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

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

效果如下：

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

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

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)支持，不過離正式支持也不遠(yuǎn)了。也就是說這個特性以后一定會全兼容，也不用擔(dān)心學(xué)著學(xué)著突然都放棄了。兼容性列表如下：

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

可以用一杯水來做比方

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

參考資料

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

[2]這回試試使用CSS實(shí)現(xiàn)拋物線運(yùn)動效果: https://www.zhangxinxu.com/wordpress/2018/08/css-css3-拋物線動畫/。

[3]https://codepen.io/web-dot-dev/pen/VwGRBVX: https://codepen.io/web-dot-dev/pen/VwGRBVX。

[4]CSS animation-composition (juejin.cn): https://code.juejin.cn/pen/7224474156631326775。

[5]CSS animation-composition (runjs.work): https://runjs.work/projects/2ff7e7d8c5454f37。

[6]CSS animation-composition (codepen.io): https://codepen.io/xboxyan/pen/bGmByXN。

責(zé)任編輯：姜華來源：前端偵探

CSS 動畫合成