卡卡網(wǎng)

本文給大家介紹10款用SVG蒙版制作的圖片轉(zhuǎn)場(chǎng)/過(guò)渡動(dòng)畫，并分析如何實(shí)現(xiàn)它們。

示例分析

首先看簡(jiǎn)單示例。

demodownload

它的結(jié)構(gòu)如何？

SVG： 

<mask id="m-lines">
  <line x1="0" y1="0" x2="100%" y2="100%" class="elem-mask"/>
  <line x1="0" y1="100%" x2="100%" y2="0%" class="elem-mask"/>
</mask>

里面有兩條線。我沒(méi)有使用path，因?yàn)樗荒芙o出百分比坐標(biāo)。

線條的 CSS： 

$mask-time: 7s;

.elem-mask {
  stroke: #FFF;
  stroke-width: 0;
  animation: stroke-width $mask-time infinite;
}

@keyframes stroke-width {
  50% {
      stroke-width: 300;
  }
}

在初始狀態(tài)下，線條不可見，因?yàn)?code>stroke-width: 0。為了使筆畫在動(dòng)畫過(guò)程中充當(dāng)蒙版的可見區(qū)域，將它們?cè)O(shè)置為白色stroke: #FFF。還設(shè)置了將幀厚度增加到 300 的動(dòng)畫。

如果你把mask拉出來(lái)，它會(huì)是這樣的： 

demodownload

僅顯示白色區(qū)域下方的內(nèi)容。線條按筆劃放大并顯示其下方的內(nèi)容。

使用mask="url(#m-line)"屬性通過(guò) CSS 將遮罩應(yīng)用于形狀：mask: url(#m-line);

多種蒙版動(dòng)畫效果

了解這種面罩的工作原理，可以做出許多其他選擇。

從中心簡(jiǎn)單展開： 

demodownload

以一個(gè)角度展開：

demodownload

使用圖案制作蒙版

使用圖案可以制作帶圖案的蒙版。

單元格： 

demodownload

菱形：

demodownload

圖案可以用最少的形狀獲得有趣的結(jié)果，但如果在蒙版內(nèi)定義多個(gè)形狀并分別為它們?cè)O(shè)置動(dòng)畫，則可以使其變得更加有趣。

demodownload

在這種情況下，mask中的路徑不一定必須是直線：

demodownload

一般來(lái)說(shuō)，這些不一定是線條：

demodownload

注意問(wèn)題

首先，IE 不支持 SVG 元素動(dòng)畫。

其次，是性能問(wèn)題。據(jù)我所知，SVG 元素動(dòng)畫目前尚未被瀏覽器優(yōu)化，因此謹(jǐn)慎地使用動(dòng)畫 SVG 是有意義的。

不必出于實(shí)際目的使用此類蒙版，但我認(rèn)為在它們的幫助下，將有可能創(chuàng)建壯觀的滑塊和照片庫(kù)。 

總結(jié)

本文介紹了9款用SVG蒙版制作的圖片轉(zhuǎn)場(chǎng)/過(guò)渡動(dòng)畫，并進(jìn)行了簡(jiǎn)單的制作說(shuō)明，希望你喜歡。

相關(guān)文章

• SVG實(shí)現(xiàn)的網(wǎng)頁(yè)氣泡動(dòng)畫效果
• 教你用illustrator把PNG圖片轉(zhuǎn)換為SVG含path路徑文件
• [教程]如何用illustrator創(chuàng)建SVG圖像并在網(wǎng)頁(yè)上使用
• SVG代碼優(yōu)化工具，優(yōu)化后體積減少60%
• 純CSS+SVG創(chuàng)建有趣的動(dòng)畫復(fù)選框checkbox
• 一個(gè)具有鼠標(biāo)懸停動(dòng)畫效果的SVG復(fù)選框checkbox
• 8款SVG創(chuàng)建的動(dòng)畫checkbox多選框和radio單選框
• SVG圖標(biāo)對(duì)比圖標(biāo)字體的5大優(yōu)點(diǎn)
• SVG圖標(biāo)：icon-home【代碼】

• 逾千個(gè)SVG/PNG常用矢量圖標(biāo)(含HTML代碼)免費(fèi)下載
• 簡(jiǎn)化svg文件中的對(duì)象可減小文件大小，6mb減到700kb
• 使用Inkscape優(yōu)化SVG，文件從1600kb減到16kb
• 減小SVG體積的5個(gè)技巧，網(wǎng)頁(yè)加載時(shí)間從10秒降到2秒
• 詳細(xì)介紹CSS+SVG創(chuàng)建圓圈/圓環(huán)動(dòng)畫
• [實(shí)例]純 CSS SVG 畫圓/圓環(huán)/圓弧動(dòng)畫
• 比較和了解何時(shí)使用SVG與何時(shí)使用Canvas
• 圖片SVG、PNG、JPEG、GIF有什么不同？
• SVG圖片對(duì)比PNG、JPEG的5大優(yōu)點(diǎn)

標(biāo)簽: SVG  SVG蒙版  SVG動(dòng)畫  動(dòng)畫  輪播