卡卡網(wǎng)

本文給大家介紹10款用SVG蒙版制作的圖片轉(zhuǎn)場/過渡動畫，并分析如何實(shí)現(xià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>

里面有兩條線。我沒有使用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)蒙版的可見區(qū)域，將它們設(shè)置為白色stroke: #FFF。還設(shè)置了將幀厚度增加到 300 的動畫。

如果你把mask拉出來，它會是這樣的： 

demodownload

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

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

多種蒙版動畫效果

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

從中心簡單展開： 

demodownload

以一個角度展開：

demodownload

使用圖案制作蒙版

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

單元格： 

demodownload

菱形：

demodownload

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

demodownload

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

demodownload

一般來說，這些不一定是線條：

demodownload

注意問題

首先，IE 不支持 SVG 元素動畫。

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

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

總結(jié)

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

相關(guān)文章

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

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

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