Power BI异常指标闪烁提示（2）
《Power BI 异常指标闪烁提示》介绍了使用CSS动画将任意图标设置成闪烁模式，以提示指标异常。本文继续这个话题，介绍几种SMIL动画的闪烁效果。至于什么是CSS，什么是SMIL，读者无需深究，只要复制代码能在Power BI复现即可。
本文的技巧既可以用在新卡片图（不了解新卡片图参考此文：Power BI可视化的巅峰之作：新卡片图），也可以用在表格矩阵条件格式图标。
把以下度量值中的增长率替换为你的指标使用，本文图标均来源于 https://github.com/n3r4zzurr0/svg-spinners
闪烁1 =
VAR icon = "<circle cx='12' cy='12' r='0' fill='red'><animate attributeName='r' calcMode='spline' dur='1.2s' values='0;11' keySplines='.52,.6,.25,.99' repeatCount='indefinite'/><animate attributeName='opacity' calcMode='spline' dur='1.2s' values='1;0' keySplines='.52,.6,.25,.99' repeatCount='indefinite'/></circle>"
RETURN
"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>" &
IF ([增长率]<0,icon) &"
</svg>"
对应动画度量值：
闪烁2 =
VAR icon = "<circle cx='12' cy='12' r='0' fill='red'><animate id='spinner_0Nme' begin='0;spinner_ITag.begin+0.4s' attributeName='r' calcMode='spline' dur='1.2s' values='0;11' keySplines='.52,.6,.25,.99' fill='freeze'/><animate begin='0;spinner_ITag.begin+0.4s' attributeName='opacity' calcMode='spline' dur='1.2s' values='1;0' keySplines='.52,.6,.25,.99' fill='freeze'/></circle><circle cx='12' cy='12' r='0' fill='red'><animate id='spinner_f83A' begin='spinner_0Nme.begin+0.4s' attributeName='r' calcMode='spline' dur='1.2s' values='0;11' keySplines='.52,.6,.25,.99' fill='freeze'/><animate begin='spinner_0Nme.begin+0.4s' attributeName='opacity' calcMode='spline' dur='1.2s' values='1;0' keySplines='.52,.6,.25,.99' fill='freeze'/></circle><circle cx='12' cy='12' r='0' fill='red'><animate id='spinner_ITag' begin='spinner_0Nme.begin+0.8s' attributeName='r' calcMode='spline' dur='1.2s' values='0;11' keySplines='.52,.6,.25,.99' fill='freeze'/><animate begin='spinner_0Nme.begin+0.8s' attributeName='opacity' calcMode='spline' dur='1.2s' values='1;0' keySplines='.52,.6,.25,.99' fill='freeze'/></circle>"
RETURN
"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>" &
IF ([增长率]<0,icon) &"
</svg>"
这个仅演示表格效果，新卡片图相同：
闪烁3 =
VAR icon = "<path d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z' transform='translate(12, 12) scale(0)' fill='red'><animateTransform attributeName='transform' calcMode='spline' type='translate' dur='1.2s' values='12 12;0 0' keySplines='.52,.6,.25,.99' repeatCount='indefinite'/><animateTransform attributeName='transform' calcMode='spline' additive='sum' type='scale' dur='1.2s' values='0;1' keySplines='.52,.6,.25,.99' repeatCount='indefinite'/><animate attributeName='opacity' calcMode='spline' dur='1.2s' values='1;0' keySplines='.52,.6,.25,.99' repeatCount='indefinite'/></path>"
RETURN
"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>" &
IF ([增长率]<0,icon) &"
</svg>"
闪烁4 =
VAR icon = "<path d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z' transform='translate(12, 12) scale(0)' fill='red'><animateTransform id='spinner_dYH2' begin='0;spinner_2BXs.end' attributeName='transform' calcMode='spline' type='translate' dur='1.2s' values='12 12;0 0' keySplines='.52,.6,.25,.99'/><animateTransform begin='0;spinner_2BXs.end' attributeName='transform' calcMode='spline' additive='sum' type='scale' dur='1.2s' values='0;1' keySplines='.52,.6,.25,.99'/><animate begin='0;spinner_2BXs.end' attributeName='opacity' calcMode='spline' dur='1.2s' values='1;0' keySplines='.52,.6,.25,.99'/></path><path d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z' transform='translate(12, 12) scale(0)' fill='red'><animateTransform id='spinner_novB' begin='spinner_dYH2.begin+0.2s' attributeName='transform' calcMode='spline' type='translate' dur='1.2s' values='12 12;0 0' keySplines='.52,.6,.25,.99'/><animateTransform begin='spinner_dYH2.begin+0.2s' attributeName='transform' calcMode='spline' additive='sum' type='scale' dur='1.2s' values='0;1' keySplines='.52,.6,.25,.99'/><animate begin='spinner_dYH2.begin+0.2s' attributeName='opacity' calcMode='spline' dur='1.2s' values='1;0' keySplines='.52,.6,.25,.99'/></path><path d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z' transform='translate(12, 12) scale(0)' fill='red'><animateTransform id='spinner_2BXs' begin='spinner_dYH2.begin+0.4s' attributeName='transform' calcMode='spline' type='translate' dur='1.2s' values='12 12;0 0' keySplines='.52,.6,.25,.99'/><animateTransform begin='spinner_dYH2.begin+0.4s' attributeName='transform' calcMode='spline' additive='sum' type='scale' dur='1.2s' values='0;1' keySplines='.52,.6,.25,.99'/><animate begin='spinner_dYH2.begin+0.4s' attributeName='opacity' calcMode='spline' dur='1.2s' values='1;0' keySplines='.52,.6,.25,.99'/></path>"
RETURN
"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>" &
IF ([增长率]<0,icon) &"
</svg>"本文的动画是为当前的圆形特殊定制，因此无法像前期那样替换图标样式。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2023-08-17，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
腾讯云 BI
腾讯云 BI（Business Intelligence，BI）提供从数据源接入、数据建模到数据可视化分析全流程的BI能力，帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计，使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程，并支持报表的分享、推送等企业协作场景。