《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>"
本文的动画是为当前的圆形特殊定制,因此无法像前期那样替换图标样式。