SVG定义

摘自维基百科：可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。

这些概念性的东西就不多讲了，感兴趣的自行去网络查找，或者参考文章末尾给出的链接。

SVG path 命令

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

比如：M5 8 L100 0的意思是：
移动到 point(5, 8) → 连线到point(100,0)

我们使用react-native-svg在react-native中实现如下的效果：

进度条效果图

直线进度条效果图

直线进度条 + 动画

// 1，假设进度是0～100
// 2，线条的长度是 215（215 = 225 - 5 * 2）

let AnimatedPath = Animated.createAnimatedComponent(Path);
export default class AwesomeProject extends Component {
    constructor(props)
    {
        super(props);
        this.state = {
            lineFillAnimation: new Animated.Value(0),
        };
        // 这里是动画的映射关系
        this.lineAnimation = this.state.lineFillAnimation.interpolate({
            inputRange: [
               0,
               100
            ],
            outputRange: [
               `M5 8 l0 0`,
               `M5 8 l215 0`,
            ]
         });
    }
    componentDidMount()
    {
        this.startAnimation();
    }
    startAnimation()
    {
        this.state.lineFillAnimation.setValue(0);

        Animated.spring(
            this.state.lineFillAnimation,
            {
                toValue: 50,  // 设置进度值，范围：0～100
                friction: 5,   // 动画摩擦力
                tension: 35 // 动画张力
            }
        ).start();
    }
    render() {
        return (
            <View style={styles.container}>
                <Svg height="16" width="225">
                    <G fill="none" stroke="#3d5875">
                        <Path strokeLinecap="round" strokeWidth="8" d="M5 8 l215 0" />
                    </G>
                    <G fill="none" stroke="#00e0ff">
                        <AnimatedPath strokeLinecap="round" strokeWidth="8" d={this.lineAnimation}/>
                    </G>
                </Svg>
            </View>
        );
    }
}

圆形进度条

圆形进度条 + 动画

let AnimatedCircle = Animated.createAnimatedComponent(Circle)

export default class AwesomeProject extends Component {
    constructor(props)
    {
        super(props);
        this.state = {
            circleFillAnimation: new Animated.Value(0)
        };
        this.dasharray = [Math.PI * 2 * 42];
        // 这里是动画的映射关系
        this.circleAnimation = this.state.circleFillAnimation.interpolate({
            inputRange: [
               0,
               100,
            ],
            outputRange: [
                this.dasharray[0],
                0
            ]
         });
    }
    componentDidMount()
    {
        this.startAnimation();
    }
    startAnimation()
    {
        this.state.circleFillAnimation.setValue(0);
        Animated.spring(
            this.state.circleFillAnimation,
            {
                toValue: 80,  // 设置进度值，范围：0～100
                friction: 5,     // 动画摩擦力
                tension: 35   // 动画张力
            }
        ).start();
    }
    render() {
        return (
            <View style={styles.container}>
                <Svg
                    height="100"
                    width="100">
                    <Circle
                        cx="50"
                        cy="50"
                        r="42"
                        stroke="#3d5875"
                        strokeWidth="8"
                        fill="transparent"
                    />
                    <AnimatedCircle
                        cx="50"
                        cy="50"
                        r="42"
                        origin="50,50"
                        rotate="-90"
                        stroke="#00e0ff"
                        strokeWidth="8"
                        strokeLinecap="round"
                        fill="transparent"
                        strokeDasharray={this.dasharray} strokeDashoffset={this.circleAnimation}
                    />
                </Svg>
            </View>
        );
    }
}