React Native SVG Animated 绘制动画

转自：React Native SVG描边动画
stroke属性

stroke 定义描边颜色

[code]stroke="#0078ff"

strokeWidth 定义描边的宽度

strokeWidth="3"

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

// 假设一个‘空格’5像素，一个‘_’5像素

strokeDasharray="5"
// 看到的是 _ _ _ _ 即5像素实线，5像素空白，5像素实线，.... 循环

strokeDasharray="5,10"
// 看到的是 _  _  _  _  5像素实线，10像素空白...循环

strokeDashoffset 虚线的位移

strokeDasharray="5"
strokeDashoffset="1"
// 看到的第一个_会往左边挪动1像素

描边动画
有足够长的空白，控制位移，让空白的位置移动，实线的位置就会慢慢显示出来。
假设灰色区域宽度300：
Untitled 3.png
如果strokeDashoffset从300到0连续变化，就是描边了
有一小段实线在奔跑
有足够长的空白，有一小段实线，改变strokeDashoffset控制空白的移动
Untitled 2.png如果strokeDashoffset从20到320连续变化，会看到小段实线从右向左滑动过来。画曲线就可以跑曲线了。
跑个栗子在react-native里，可以用animated改变strokeDashoffset的值来做动画。
另：类似sketch等软件可以绘矢量图并存成svg格式，基本上改改就能用了比较方便。

rn

npm install --save react-native-svg

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

import {
Animated
...
} from 'react-native';

import Svg, {
G,
Path
} from 'react-native-svg';

// 注意要用 Animated.createAnimatedComponent 让组件可动画化
let AnimatePath = Animated.createAnimatedComponent(Path);

...
constructor (props) {
super(props);

this.state = {
strokeDashOffset: new Animated.Value(38)
}
}

changeStroke = () => {
// 使用炫酷的animated让小线段愉悦的奔跑��
Animated.spring(
this.state.strokeDashOffset,
{
toValue: 243
}
).start();
};

render () {

return (
<View>
...
<TouchableWithoutFeedback
onPress={this.changeStroke}
>
<Svg
height="100"
width="100"
>
<G fill="none">
<AnimatePath
d={一坨路径}
stroke="#0078FF"
strokeWidth="3"strokeDasharray="28,215"
strokeDashoffset={this.state.strokeDashOffset}
/>
</G>
</Svg>
</TouchableWithoutFeedback>
</View>
)
}