專(zhuān)欄前文《Power BI 異常指標(biāo)閃爍提示》介紹了使用CSS動(dòng)畫(huà)驅(qū)動(dòng)任意SVG圖標(biāo)閃爍，對(duì)異常指標(biāo)進(jìn)行突出提示，《Power BI異常指標(biāo)閃爍提示（2）》介紹了SMIL動(dòng)畫(huà)的版本，以上兩文均是驅(qū)動(dòng)矢量圖形進(jìn)行閃爍，本文講解像素圖形閃爍。

像素圖形存量要比矢量圖形多的多，每天手機(jī)都會(huì)拍攝無(wú)數(shù)的像素圖形。Power BI使用像素圖形的場(chǎng)景有產(chǎn)品照片、人物頭像、地理空間、周邊裝飾等等。鑒于網(wǎng)絡(luò)狀況不一定穩(wěn)定，一般推薦使用本地的像素圖形，黃老師開(kāi)發(fā)了本地照片轉(zhuǎn)base64工具，方便我們?cè)赑ower BI使用。

那么像素圖形如何閃爍？基礎(chǔ)動(dòng)畫(huà)原理和前文沒(méi)什么不同，只是細(xì)節(jié)略作調(diào)整。下圖將base64產(chǎn)品照片放在條件格式圖標(biāo)，對(duì)毛利貢獻(xiàn)為負(fù)數(shù)的產(chǎn)品施加了閃爍效果：

如果用CSS施加動(dòng)畫(huà)，動(dòng)畫(huà)代碼和《Power BI 異常指標(biāo)閃爍提示》保持一致，只是施加對(duì)象由path變?yōu)閕mage：

在SVG的image標(biāo)簽引用base64圖片，然后按條件顯示動(dòng)畫(huà)：

把加了動(dòng)畫(huà)的圖片度量值放入條件格式圖標(biāo)，效果即呈現(xiàn)。如果不用CSS，SMIL動(dòng)畫(huà)也可以達(dá)到完全一樣的效果，attributeName為opacity，從1到0變化，repeatCount設(shè)置為indefinite，無(wú)限循環(huán)。

動(dòng)畫(huà)效果不僅僅適用于表格矩陣條件格式圖標(biāo)，新卡片圖也可使用。