最新消息:

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

其它教程 Jorkin 671浏览

前言

大家在用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中单元格的虚线框动态效果