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>
                ...
                <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>
        )
    }