快速注册

Power BI像素图形闪烁效果

W 2023-08-23 05:15:25 陕西

《Power BI 异常指标闪烁提示》介绍了使用CSS动画驱动任意SVG图标闪烁，对异常指标进行突出提示，《Power BI异常指标闪烁提示（2）》介绍了SMIL动画的版本，以上两文均是驱动矢量图形进行闪烁，本文讲解像素图形闪烁。

像素图形存量要比矢量图形多的多，每天手机都会拍摄无数的像素图形。Power BI使用像素图形的场景有产品照片、人物头像、地理空间、周边装饰等等。鉴于网络状况不一定稳定，一般推荐使用本地的像素图形，黄老师开发了本地照片转base64工具，方便我们在Power BI使用，参考：Power BI本地图片显示最佳解决方案

那么像素图形如何闪烁？基础动画原理和前文没什么不同，只是细节略作调整。下图将base64产品照片放在条件格式图标，对毛利贡献为负数的产品施加了闪烁效果：

如果用CSS施加动画，动画代码和《Power BI 异常指标闪烁提示》保持一致，只是施加对象由path变为image：

<style>

@keyframes wujunmin {

0% { opacity: 1; }

50% { opacity: 0; }

100% { opacity: 1; }

}

image {

animation: wujunmin 1s infinite;

}

</style>

在SVG的image标签引用base64图片，然后按条件显示动画：

"<svg>" &

if ( [指标] <0, css代码 ) & "

<imagexlink:href='base64图片列'/>

</svg>"

把加了动画的图片度量值放入条件格式图标，效果即呈现。如果不用CSS，SMIL动画也可以达到完全一样的效果，attributeName为opacity，从1到0变化，repeatCount设置为indefinite，无限循环。

动画效果不仅仅适用于表格矩阵条件格式图标，新卡片图也可使用。

本文配套pbix源文件在我的知识星球下载。知识星球《Power BI SVG图表开发：从基础到实战》视频课程已更新超过60节，使用DAX+SVG即可在Power BI中自由设计图表，满足业务需求，摆脱束缚。

《Power BI新卡片图高级应用》视频教程针对Power BI 2023年6月推出的新卡片图进行讲解（不了解新卡片图参考此文：Power BI可视化的巅峰之作：新卡片图），目前在知识星球连载中，以下是已更新目录：

回应转发赞收藏

W (陕西西安)

零售管理和数据分析微信公众号、知乎、B站: wujunmin 著作《Power BI商...

Power BI像素图形闪烁效果

W的最新日记 · · · · · · ( 全部 )

热门话题 · · · · · · ( 去话题广场 )