轉自：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：

如果strokeDashoffset從300到0連續變化，就是描邊了

有一小段實線在奔跑

有足夠長的空白，有一小段實線，改變strokeDashoffset控制空白的移動

如果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>
        )
    }