React Native SVG Animated 绘制动画

本文主要是介绍React Native SVG Animated 绘制动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 转自：React Native SVG描边动画
stroke属性
stroke 定义描边颜色
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>...<TouchableWithoutFeedbackonPress={this.changeStroke}><Svgheight="100"width="100"><G fill="none"><AnimatePathd={一坨路径}stroke="#0078FF"strokeWidth="3"strokeDasharray="28,215"strokeDashoffset={this.state.strokeDashOffset}/></G></Svg></TouchableWithoutFeedback></View>)}