|
|
|
|
|
本文給大家介紹10款用SVG蒙版制作的圖片轉(zhuǎn)場(chǎng)/過(guò)渡動(dòng)畫(huà),并分析如何實(shí)現(xiàn)它們。
示例分析
首先看簡(jiǎn)單示例。
它的結(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)下,線條不可見(jiàn),因?yàn)?code>stroke-width: 0。為了使筆畫(huà)在動(dòng)畫(huà)過(guò)程中充當(dāng)蒙版的可見(jiàn)區(qū)域,將它們?cè)O(shè)置為白色stroke: #FFF
。還設(shè)置了將幀厚度增加到 300 的動(dòng)畫(huà)。
如果你把mask
拉出來(lái),它會(huì)是這樣的:
僅顯示白色區(qū)域下方的內(nèi)容。線條按筆劃放大并顯示其下方的內(nèi)容。
使用mask="url(#m-line)"
屬性通過(guò) CSS 將遮罩應(yīng)用于形狀:mask: url(#m-line);
多種蒙版動(dòng)畫(huà)效果
了解這種面罩的工作原理,可以做出許多其他選擇。
從中心簡(jiǎn)單展開(kāi):
以一個(gè)角度展開(kāi):
使用圖案制作蒙版
使用圖案可以制作帶圖案的蒙版。
單元格:
菱形:
圖案可以用最少的形狀獲得有趣的結(jié)果,但如果在蒙版內(nèi)定義多個(gè)形狀并分別為它們?cè)O(shè)置動(dòng)畫(huà),則可以使其變得更加有趣。
在這種情況下,mask
中的路徑不一定必須是直線:
一般來(lái)說(shuō),這些不一定是線條:
注意問(wèn)題
首先,IE 不支持 SVG 元素動(dòng)畫(huà)。
其次,是性能問(wèn)題。據(jù)我所知,SVG 元素動(dòng)畫(huà)目前尚未被瀏覽器優(yōu)化,因此謹(jǐn)慎地使用動(dòng)畫(huà) SVG 是有意義的。
不必出于實(shí)際目的使用此類蒙版,但我認(rèn)為在它們的幫助下,將有可能創(chuàng)建壯觀的滑塊和照片庫(kù)。
總結(jié)
本文介紹了9款用SVG蒙版制作的圖片轉(zhuǎn)場(chǎng)/過(guò)渡動(dòng)畫(huà),并進(jìn)行了簡(jiǎn)單的制作說(shuō)明,希望你喜歡。
相關(guān)文章