使用feDisplacementMap+feImage濾鏡實現(xiàn)水波紋效果(計算動態(tài)值)

發(fā)布時間：2022-04-24 15:32:38 作者：潑墨作山水

這篇文章主要使用feDisplacementMap濾鏡實現(xiàn)水波紋效果(計算動態(tài)值),水波特效，是通過<feImage>標簽 x,y,width,height四個屬性和<feDisplacementMap>標簽scale動態(tài)變化實現(xiàn)，主要記錄動效過程中各點的計算，需要的朋友可以參考下

該文章已經講的特別細致了，該篇僅以此記錄動效過程中各點的計算。

1.feDisplacementMap

feDisplacementMap 實際上是一個位置替換濾鏡，就是改變元素和圖形的像素位置的。遍歷原圖形的所有像素點，使用feDisplacementMap重新映射替換一個新的位置，形成一個新的圖形。feDisplacementMap濾鏡在業(yè)界的主流應用是對圖形進行形變，扭曲，液化。

P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

· P'(x,y)指的是轉換之后的x, y坐標。
· x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5)指的是具體的轉換規(guī)則。
· XC(x,y)表示當前x,y坐標像素點其X軸方向上設置的對應通道的計算值，范圍是0~1。
· YC(x,y)表示當前x,y坐標像素點其Y軸方向上設置的對應通道的計算值，范圍是0~1。
· -0.5是偏移值，因此XC(x,y) - 0.5范圍是-0.5~0.5，YC(x,y) - 0.5范圍也是-0.5~0.5。
· scale表示計算后的偏移值相乘的比例，scale越大，則偏移越大。

再用一句話解釋就是，根據(jù)設定的通道顏色對原圖的x, y坐標進行偏移。

值	默認值	取值	說明
xChannelSelector	A	A or R or G or B	對應XC(x,y),表示X軸坐標使用的是哪個顏色通道進行位置偏移
yChannelSelector	A	A or R or G or B	對應YC(x,y),表示Y軸坐標使用的是哪個顏色通道進行位置偏移
color-interpolation-filters	linearRGB	linearRGB or sRGB	濾鏡對顏色進行計算時候采用的顏色模式類型
scale	0	可正可負	縮放比例通常使用正數(shù)值處理，值越大，偏移越大。
in	SourceGraphic	SourceGraphic，SourceAlpha，BackgroundImage, BackgroundAlpha，F(xiàn)illPaint，StrokePaint，以及自定義的濾鏡的原始引用	原始圖形
in2	元素的result屬性值	同in	用來映射的圖形

2.通過feDisplacementMap和feImage實現(xiàn)水波特效

實現(xiàn)水波效果通常使用下圖

<svg id='svg' width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="filter-ripple" primitiveUnits='objectBoundingBox'>
            <feImage id='feImage' result="pict2" xlink:href="上述圖片地址"  x="0" y="0" width="100%" height="100%"></feImage>
            <feDisplacementMap id='displacement-map' result='ok' scale="0" xChannelSelector="R" yChannelSelector="G" in2="pict2" in="SourceGraphic" color-interpolation-filters="sRGB"></feDisplacementMap>
            <feComposite operator="in" in2="pict2"></feComposite>
            <feComposite in2="SourceGraphic"></feComposite> //這個的目的是因為添加濾鏡的元素可見區(qū)域和feImage元素的大小一致。融合原有元素保證整個元素都可見
        </filter>
    </defs>
</svg>

水波特效，是通過<feImage>標簽 x,y,width,height四個屬性和<feDisplacementMap>標簽scale動態(tài)變化實現(xiàn)。
就像漣漪，以石子掉落處為中心，范圍由小擴大，起伏由強減弱。轉為代碼，也就是width,height由小變大，scale由大變小
根據(jù)點擊事件，可以計算出中心坐標（pointX，pointY）

在擴散過程中，中心坐標不變，x，y為圖片的起始坐標
pointX = width/2 + x ;pointY = height/2 + y => x = pointX - width/2; y = pointY - height/2
width，height，scale的最大值就可以根據(jù)需求來設置啦~