2020-05-19
一、傳統(tǒng)的轉(zhuǎn)場動(dòng)畫
傳統(tǒng)轉(zhuǎn)場動(dòng)畫就是滑來滑去，淡入淡出這些。
時(shí)代在召喚，技術(shù)在發(fā)展，可以試一試使用一些新的轉(zhuǎn)場動(dòng)畫了。
二、規(guī)則的單個(gè)圖形擴(kuò)展動(dòng)效
這里先介紹使用clip-path輕松實(shí)現(xiàn)轉(zhuǎn)場動(dòng)效。
只要不要兼容IE瀏覽器，clip-path的兼容性可以非常放心的使用。然后目前clip-path在實(shí)際項(xiàng)目中應(yīng)用的時(shí)候，還需要加上-webkit-私有前綴，本文所有相關(guān)的演示代碼主要是為了示意歷，因此并沒有加上，需要注意下。
1. 圓形效果
實(shí)時(shí)如下，可以看到每一個(gè)圖片每4秒就圓形剪裁呈現(xiàn)，click或者h(yuǎn)over小圓點(diǎn)可以快速體驗(yàn)切換效果：
呈現(xiàn)相關(guān)CSS代碼如下：
.in {
animation: clipCircleIn .6s;
}
@keyframes clipCircleIn {
0% {
clip-path: circle(0 at 50% 50%);
}
100% {
clip-path: circle(200px at 50% 50%);
}
}
使用的是clip-path中的circle方法，語法是：
circle(半徑 at 圓心坐標(biāo))
圓心默認(rèn)是50% 50%也就是元素的中心，因此，這里的css代碼也可以簡化成：
.in {
animation: clipCircleIn .6s;
}
@keyframes clipCircleIn {
0% { clip-path: circle(0); }
100% { clip-path: circle(200px); }
}
原理很簡單：動(dòng)畫0%開始時(shí)候圓的剪裁半徑是0，于是整個(gè)圖像元素都不可見；動(dòng)畫100%結(jié)束的時(shí)候，圓的剪裁半徑是200像素，于是整個(gè)圖像元素就可見了。clip-path屬性是支持CSS animation動(dòng)畫的，因此可以看到一個(gè)圖片元素從0到有，圓形呈現(xiàn)的效果。
使用也很簡單，在需要呈現(xiàn)的元素上添加類名.in就可以了，不僅可以寫在圖片元素上，任意的<div>, 甚至整個(gè)<body>頁面都可以。
完整代碼，包括HTML和JavaScript可以狠狠地點(diǎn)擊這里獲?。篊SS clip-path圓形轉(zhuǎn)場動(dòng)畫demo
2. 三角效果
除了圓形，實(shí)現(xiàn)多邊形的轉(zhuǎn)場效果，例如三角形，實(shí)時(shí)效果如下：
相關(guān)CSS代碼如下：
.in {
animation: clipTriangleIn .6s;
}
@keyframes clipTriangleIn {
0% {
clip-path: polygon(50% 50%, 49% 51%, 51% 51%);
}
100% {
clip-path: polygon(50% -100%, -100% 150%, 200% 150%);
}
}
polygon方法可以用來剪裁多邊形，其函數(shù)值就是一個(gè)一個(gè)的點(diǎn)坐標(biāo)，最終呈現(xiàn)的圖形就是這些點(diǎn)連起來的圖形。更詳細(xì)的內(nèi)容可以參考我之前的文章：“CSS3 clip-path polygon圖形構(gòu)建與動(dòng)畫”，這里不展開。
這里使用的是百分比值，只要你的元素的高寬比例不是很懸殊，上面的CSS參數(shù)足矣應(yīng)付，否則需要你自己調(diào)整一下三角形三個(gè)點(diǎn)的坐標(biāo)位置，但有一點(diǎn)是肯定的，那就是這三個(gè)點(diǎn)一定需要在元素區(qū)域的外面，這樣才能將整個(gè)圖形元素剪裁在里面。
所使用的HTML和JavaScript代碼和上面的圓形效果是一模一樣的，下面的所有clip-path案例這部分代碼也都是一樣的啊，不一樣的就是CSS。
可以狠狠地點(diǎn)擊這里獲取完整代碼：CSS clip-path三角轉(zhuǎn)場動(dòng)畫demo
3. 帶圓角的矩形效果
效果如下：
這里的效果是借助clip-path中的inset方法。在clip-path的這個(gè)方法函數(shù)中，inset是最難理解的，因?yàn)楹蚦lip屬性的rect()參數(shù)含義容易弄混淆，語法如下：
inset(距離元素上邊緣距離 距離元素右邊緣距離 距離元素下邊緣距離 距離元素左邊緣距離 round 圓角大小)
這里使用的CSS動(dòng)畫代碼是：
.in {
animation: clipRectIn .6s;
}
@keyframes clipRectIn {
0% {
clip-path: inset(50% round 10% 50%);
}
100% {
clip-path: inset(0% round 0);
}
}
inset()里面的距離參數(shù)可以是1~4個(gè)，圓角也是1~4個(gè)，且都支持百分比，非常強(qiáng)大。以上CSS代碼適用于任何元素類似的轉(zhuǎn)場效果，無需任何坐標(biāo)參數(shù)調(diào)整。
可以狠狠地點(diǎn)擊這里獲取完整代碼：CSS clip-path帶圓角的矩形轉(zhuǎn)場動(dòng)畫demo
4. 菱形效果
效果如下：
使用的是polygon方法繪制的四邊形，相關(guān)CSS如下：
.in {
animation: clipDiamondIn .6s;
}
@keyframes clipDiamondIn {
0% {
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
100% {
clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
}
}
和三角一樣，最終的剪裁坐標(biāo)需要在元素的外面。
可以狠狠地點(diǎn)擊這里獲取完整代碼：CSS clip-path菱形鉆石形轉(zhuǎn)場動(dòng)畫demo
5. 十字星到矩形效果
我們還可以polygon()方法繪制更為復(fù)雜的圖形，例如下面要展示的十字星擴(kuò)展轉(zhuǎn)場效果：
相關(guān)CSS如下：
.in {
animation: clipRectSpIn .6s;
}
@keyframes clipRectSpIn {
0% {
clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);
}
100% {
clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
}
}
如果你想把這個(gè)demo效果用在自己的項(xiàng)目中，可以狠狠地點(diǎn)擊這里復(fù)制完整代碼：CSS clip-path十字星轉(zhuǎn)場動(dòng)畫demo
6. 扇形展開效果
我們還可以給動(dòng)畫增加更多的關(guān)鍵點(diǎn)，而實(shí)現(xiàn)更豐富的動(dòng)畫效果，例如下面的扇形展開：
相關(guān)CSS如下：
.in {
animation: clipSectorIn .6s linear;
}
@keyframes clipSectorIn {
0% {
clip-path: polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%, 50% 0%);
}
50% {
clip-path: polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);
}
100% {
clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
}
}
您可以狠狠地點(diǎn)擊這里：CSS clip-path扇形展開轉(zhuǎn)場完整demo
三、不規(guī)則的單個(gè)圖形擴(kuò)展動(dòng)效
不是所有的圖形都能夠使用clip-path繪制出來的，如果我們希望我們的這種過場動(dòng)畫里面所中展開這種圖形更具有個(gè)性些，也是有方法可以實(shí)現(xiàn)的，就是借助CSS mask遮罩。
關(guān)于CSS遮罩，強(qiáng)烈推薦我之前爆肝寫的這篇文章：“CSS遮罩CSS3 mask/masks詳細(xì)介紹”。
這里我們直接進(jìn)入效果。
1. 帶圓角的五角星擴(kuò)展
實(shí)時(shí)效果如下：
實(shí)現(xiàn)方法
準(zhǔn)備一個(gè)五角星圖像作為遮罩背景圖，推薦使用SVG格式圖像，例如下面這個(gè)：
五角星SVG圖像
然后CSS動(dòng)畫代碼這樣（這里省略了mask的-webkit私有前綴）：
.in {
mask: url(./star.svg) no-repeat center;
mask-size: 300% 300%; /* Safari沒有這個(gè)類似“初始化”的東西居然無效 */
animation: maskStarIn 1s both;
}
@keyframes maskStarIn {
from { mask-size: 0 0; }
to { mask-size: 300% 300%; }
}
實(shí)現(xiàn)原理
很好理解，一開始通過設(shè)置mask-size屬性讓用來遮罩圖像的尺寸是0，因此圖像完全不可見；動(dòng)畫結(jié)束的時(shí)候，設(shè)置的遮罩尺寸足夠大，圖像完全顯示，擴(kuò)展動(dòng)畫效果即實(shí)現(xiàn)。
完整代碼
您可以狠狠地點(diǎn)擊這里獲取完整代碼：CSS mask星星轉(zhuǎn)場動(dòng)畫demo
2. 愛心放大過場動(dòng)畫
既然使用圖像作為擴(kuò)展的形狀，那我們可以實(shí)現(xiàn)的圖形動(dòng)畫效果可以說是無限的，例如整一個(gè)愛心放大效果：
和五角星放大代碼幾乎一模一樣，就使用的遮罩圖形不同，這里使用的是這個(gè)：
愛心SVG圖像
CSS代碼：
.in {
mask: url(./heart.svg) no-repeat center;
mask-size: 200% 300%; /* Safari沒有這個(gè)類似“初始化”的東西居然無效 */
animation: maskHeartIn 1s both;
}
@keyframes maskHeartIn {
from { mask-size: 0 0; }
to { mask-size: 200% 300%; }
}
您可以狠狠地點(diǎn)擊這里獲取完整代碼：CSS mask愛心轉(zhuǎn)場動(dòng)畫demo
四、平鋪圖形的展示動(dòng)效
上面介紹的都是單個(gè)圖形的呈現(xiàn)效果，如果我想實(shí)現(xiàn)多個(gè)圖形同時(shí)出現(xiàn)的效果，類似于百葉窗效果又該如何實(shí)現(xiàn)呢？
可以試試使用“變量種子計(jì)數(shù)器”實(shí)現(xiàn)。
1. 圓點(diǎn)百花齊放效果
實(shí)時(shí)效果如下，Chrome和Android下可見：
如果Safari等瀏覽器訪問，可以點(diǎn)擊這里在下方顯示GIF錄屏效果。
實(shí)現(xiàn)的原理其實(shí)并不難，關(guān)鍵是活用CSS變量，CSS代碼如下（-webkit私有前綴省略）：
.in {
mask: radial-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
mask-size: 40px 40px;
animation: seed 1s;
}
@keyframes seed {
0%{--seed:0}1%{--seed:1}2%{--seed:2}3%{--seed:3}...98%{--seed:98}99%{--seed:99}100%{--seed:100}
}
也就是我們直接用CSS3 radial-graident繪制一個(gè)徑向漸變，然后這個(gè)徑向漸變的實(shí)色半徑和變量--seed關(guān)聯(lián)，而變量--seed通過animation關(guān)鍵幀的設(shè)置從0~100變化，于是，配合mask-size尺寸控制，最終形成了很小小圓圈一起綻放的轉(zhuǎn)場效果。
如果對上面所說的原理還不是很理解，可以看看我之前一篇文章：“使用變量種子計(jì)數(shù)器擴(kuò)展CSS動(dòng)畫更多可能性”。
您也可以狠狠地點(diǎn)擊這里學(xué)習(xí)完整代碼：CSS圓點(diǎn)綻放轉(zhuǎn)場動(dòng)畫demo
2. 三角斜切效果
上面使用的是徑向漸變，換成使用線性漸變可以有其他的效果，例如這個(gè)案例就是使用右上角45度的斜向漸變實(shí)現(xiàn)：
如果上面的圖片slide效果沒有酷酷的動(dòng)效，可以點(diǎn)擊這里在下方顯示GIF錄屏效果。
CSS代碼如下（-webkit私有前綴省略）：
.in {
mask: linear-gradient(135deg, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
mask-size: 40px 40px;
animation: seed .6s;
}
@keyframes seed {
0%{--seed:0}1%{--seed:1}2%{--seed:2}...99%{--seed:99}100%{--seed:100}
}
原理和上面的圓點(diǎn)綻放效果是一樣的，區(qū)別在于漸變的類型不同。
您可以狠狠地點(diǎn)擊這里學(xué)習(xí)完整代碼：CSS三角齊刷刷轉(zhuǎn)場動(dòng)畫demo
3. 百葉窗效果
如果我們的線性漸變是水平方向的，則可以有百葉窗效果：
如果沒有動(dòng)效可以點(diǎn)擊這里在下方顯示錄屏GIF。
CSS代碼如下（-webkit私有前綴省略）：
.in {
mask: linear-gradient(to right, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
mask-size: 20px;
animation: seed .6s;
}
@keyframes seed {
0%{--seed:0}1%{--seed:1}2%{--seed:2}...99%{--seed:99}100%{--seed:100}
}
您可以狠狠地點(diǎn)擊這里：CSS百葉窗效果轉(zhuǎn)場動(dòng)畫demo
4. 車輪轉(zhuǎn)動(dòng)效果
這個(gè)是使用錐形漸變實(shí)現(xiàn)的效果。
如果沒有動(dòng)效可以點(diǎn)擊這里在下方顯示錄屏GIF。
CSS代碼如下（-webkit私有前綴省略）：
.in {
mask: conic-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
mask-size: 40px 40px;
animation: seed .6s;
}
@keyframes seed {
0%{--seed:0}1%{--seed:1}2%{--seed:2}...99%{--seed:99}100%{--seed:100}
}
您可以狠狠地點(diǎn)擊這里：CSS車輪轉(zhuǎn)場動(dòng)畫demo
由于mask的漸變背景也是支持無限累加的，因此，如果我們把背景圖形進(jìn)行多背景組合，不難想象還會(huì)有更多精彩的切換效果出現(xiàn)，這里就不一一展示。
五、其它嘗試：濾鏡與轉(zhuǎn)場動(dòng)效
除了clip-path剪裁和mask遮罩，我們還可以嘗試使用filter實(shí)現(xiàn)一些轉(zhuǎn)場切換效果，比如亮度、灰度、模糊等。
我專門做了demo頁面給大家體驗(yàn)下，您可以狠狠的點(diǎn)擊這里：CSS濾鏡與圖片切換動(dòng)畫demo
這個(gè)demo 3個(gè)濾鏡效果三合一，您可以點(diǎn)擊上方單選體驗(yàn)不同濾鏡的切換效果：
圖像亮度變化中
不過，對于這種幻燈片場景，使用濾鏡實(shí)現(xiàn)的過場效果的舒適度還不如上面的圖形切換。不過濾鏡過場效果在有些場合還是挺有用的。例如在“CSS scroll-snap滾動(dòng)事件停止及元素位置檢測”這篇文章中的這個(gè)demo頁面的灰度變化效果就很酷很合適，因?yàn)榭梢詫?shí)時(shí)看到前后兩個(gè)元素的狀態(tài)變化。而這里的元素都是上下層疊，于是濾鏡當(dāng)開始動(dòng)畫的時(shí)候，原本的元素是看不見的，因此，視覺上的動(dòng)畫就不連貫，從而顯得不舒服。
使用實(shí)現(xiàn)實(shí)現(xiàn)轉(zhuǎn)場也很簡單，拿亮度舉例，CSS代碼如下：
.in {
animation: brightnessIn .6s;
}
@keyframes brightnessIn {
0% { filter: brightness(5); }
100% { filter: brightness(1); }
}
也就是從很亮變成正常亮度。
六、不僅僅是轉(zhuǎn)場，顯隱交互亦可
實(shí)際上本文介紹所有這些動(dòng)畫效果，不僅僅可以適用于轉(zhuǎn)場，元素顯示隱藏也是可以的使用這些動(dòng)畫效果的。
舉個(gè)例子，彈框的出現(xiàn)，平時(shí)彈框出現(xiàn)，我們要么是淡入，要么是scale放大?，F(xiàn)在，不妨試試“比心”呈現(xiàn)效果。
您可以狠狠地點(diǎn)擊這里：dialog彈框愛心放大出現(xiàn)demo
點(diǎn)擊頁面的綠色按鈕，就可以看到類似下圖的彈框出現(xiàn)效果了：
愛心與彈框的出現(xiàn)
其他很多交互效果例如下拉框的出現(xiàn)，側(cè)邊欄的展開與收起，以及那種整頁翻屏效果，都非常使用本文介紹的這些全新的轉(zhuǎn)場動(dòng)畫，大膽使用吧。
七、關(guān)于密集型轉(zhuǎn)場動(dòng)效及結(jié)語
類似百葉窗，圓點(diǎn)綻放這樣的密集型的平鋪效果是最酷的，因?yàn)槠渌胤胶苌倏吹?。但有個(gè)致命的問題那就是Safari瀏覽器目前并不支持“動(dòng)畫種子變量”，也就意味著蘋果手機(jī)上沒有動(dòng)畫效果。
但是這并不表示我們就無法使用，兩種可行策略：
一種是漸進(jìn)增強(qiáng)，如果大家在Safari下訪問過類似百葉窗這樣的demo頁面，會(huì)發(fā)現(xiàn)slide圖片一個(gè)一個(gè)切換效果完全是正常的，就是沒有動(dòng)畫而已，也就是功能完全正常，因此，我們是可以Chrome和Android設(shè)備酷酷的動(dòng)畫過場效果，Safari普通變化效果。
一種是優(yōu)雅降級。例如圓點(diǎn)綻放效果，Safari瀏覽器就借助mask-size動(dòng)畫實(shí)現(xiàn)一個(gè)圓點(diǎn)擴(kuò)散效果，至于Chrome瀏覽器則可以很多個(gè)點(diǎn)點(diǎn)一起綻放，我們做一點(diǎn)瀏覽器的區(qū)別處理即可。
當(dāng)然，我也會(huì)繼續(xù)研究如何讓Safari下也能實(shí)現(xiàn)平鋪風(fēng)格的轉(zhuǎn)場動(dòng)畫效果的。
另外，本文所有的廣告滾動(dòng)相關(guān)代碼都是原生語法，大家可以直接Copy去使用。本來想借助Shadow DOM把各個(gè)動(dòng)畫效果以Web Components形式集成，一看這時(shí)間點(diǎn)，算了算了，扛不住了，以后吧，總有機(jī)會(huì)的。
責(zé)任編輯：中山網(wǎng)站建設(shè)
【網(wǎng)訊網(wǎng)絡(luò)】國家高新技術(shù)企業(yè)》十一年專注軟件開發(fā)，網(wǎng)站建設(shè)，網(wǎng)頁設(shè)計(jì)，APP開發(fā)，小程序，微信公眾號開發(fā)，定制各類企業(yè)管理軟件（OA、CRM、ERP、OMS訂單管理系統(tǒng)、WMS進(jìn)銷存管理軟件等)！服務(wù)熱線：0760-88610046、13924923903，http://www.denorpool.com
*請認(rèn)真填寫需求，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
