如何实现Excel中单元格的虚线框动态效果

前言

大家在用Excel复制时会看到单元格有一个顺时针的动态边框：

有时也会很想加在自己的原型里，可是怎么做呢？原生Axure实现起来不是很方便，那我们就换个思路，使用图片来代替一下，因为SVG图片有很强的动画优势，并且简单易修改。

教程

复制下面代码到记事本里

<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="#FFFFFF" stroke="#217346" stroke-width="5">
    <animate attributeName="stroke-dasharray" values="0,0,20,5;0,5,20,0;5,5,15,0;10,5,10,0;15,5,5,0;20,5,0,0" dur="1s"
      repeatCount="indefinite" />
  </rect>
</svg>

然后自己修改调整一下就可以了，其中：

fill 是 背景颜色
stroke 是 边框颜色
stroke-width 是边框线宽

然后保存为 filename.svg，注意：扩展名为SVG。在Axure里插入前面已保存的图片文件预览看效果。

其实直接粘贴代码到Axure里也可以的，软件会自动识别并转为图片。

使用方法

在图片上右键，选择“编辑文本”，就可以在图片上加入文字了，在中继器里的话，可以直接设置图片的文本。

预览地址：

https://usrsky.axshare.com/#id=vq83o1&g=1

如果觉得我的教程做的不错呢，欢迎关注、收藏、转发、捐赠，谢谢。

原文链接：如何实现Excel中单元格的虚线框动态效果

转载请注明：最InのAxure » 如何实现Excel中单元格的虚线框动态效果