React Native SVG描边动画

Posted 2023-03-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React Native SVG描边动画相关的知识，希望对你有一定的参考价值。

参考技术A

stroke属性

stroke 定义描边颜色

strokeWidth 定义描边的宽度

创建虚线时候用到的属性：

strokeDasharray 创建虚线

strokeDashoffset 虚线的位移

描边动画

有足够长的空白，控制位移，让空白的位置移动，实线的位置就会慢慢显示出来。
假设灰色区域宽度300：

如果strokeDashoffset从300到0连续变化，就是描边了

有一小段实线在奔跑

有足够长的空白，有一小段实线，改变strokeDashoffset控制空白的移动

如果strokeDashoffset从20到320连续变化，会看到小段实线从右向左滑动过来。画曲线就可以跑曲线了。

在react-native里，可以用animated改变strokeDashoffset的值来做动画。
另：类似sketch等软件可以绘矢量图并存成svg格式，基本上改改就能用了比较方便。

使用react-native里的ART的话，strokeDasharray和strokeDashoffset写在strokeDash属性里。
一个不是例子的栗子:

以上是关于React Native SVG描边动画的主要内容，如果未能解决你的问题，请参考以下文章