javascript – 动画的react-native-svg短划线长度

在使用setNativeProps方法之前,我能够成功动画一些svg元素,但这次使用短划线长度失败了,下面是一个演示当前行为的gif(圆圈在接收到新道具时从完全变为半满)：

本质上我试图动画这个变化,而不是只是轻弹,下面是这个矩形进度条的完整源,基本的想法是使用Circle和strokeDasharray为了显示循环进度,它接收currentExp和nextExp作为字符的值经验,以计算他们到达下一个lvl之前剩余的百分比.

组件使用非常标准的元素集,除了样式的样式和样式组件库中的少量维度/动画和颜色道具.

注意：项目从expo.io导入此库,但它基本上是react-native-svg

import React,{ Component } from "react";
import PropTypes from "prop-types";
import styled from "styled-components/native";
import { Animated } from "react-native";
import { Svg } from "expo";
import { colour,dimension,animation } from "../Styles";

const { Circle,Defs,LinearGradient,Stop } = Svg;

const SSvg = styled(Svg)`
  transform: rotate(90deg);
  margin-left: ${dimension.ExperienceCircleMarginLeft};
  margin-top: ${dimension.ExperienceCircleMarginTop};
`;

class ExperienceCircle extends Component {
  // -- prop validation ----------------------------------------------------- //
  static propTypes = {
    nextExp: PropTypes.number.isrequired,currentExp: PropTypes.number.isrequired
  };

  // -- state --------------------------------------------------------------- //
  state = {
    percentage: new Animated.Value(0)
  };

  // -- methods ------------------------------------------------------------- //
  componentDidMount() {
    this.state.percentage.addListener(percentage => {
      const circumference = dimension.ExperienceCircleRadius * 2 * Math.PI;
      const dashLength = percentage.value * circumference;
      this.circle.setNativeProps({
        strokeDasharray: [dashLength,circumference]
      });
    });
    this._onAnimateExp(this.props.nextExp,this.props.currentExp);
  }

  componentwillReceiveProps({ nextExp,currentExp }) {
    this._onAnimateExp(currentExp,nextExp);
  }

  _onAnimateExp = (currentExp,nextExp) => {
    const percentage = currentExp / nextExp;
    Animated.timing(this.state.percentage,{
      tovalue: percentage,duration: animation.duration.long,easing: animation.eaSEOut
    }).start();
  };

  // -- render -------------------------------------------------------------- //
  render() {
    const { ...props } = this.props;
    // const circumference = dimension.ExperienceCircleRadius * 2 * Math.PI;
    // const dashLength = this.state.percentage * circumference;
    return (
      <SSvg
        width={dimension.ExperienceCircleWidthHeight}
        height={dimension.ExperienceCircleWidthHeight}
        {...props}
      >
        <Defs>
          <LinearGradient
            id="ExperienceCircle-gradient"
            x1="0"
            y1="0"
            x2="0"
            y2={dimension.ExperienceCircleWidthHeight * 2}
          >
            <Stop
              offset="0"
              stopColor={`rgb(${colour.lightGreen})`}
              stopOpacity="1"
            />
            <Stop
              offset="0.5"
              stopColor={`rgb(${colour.green})`}
              stopOpacity="1"
            />
          </LinearGradient>
        </Defs>
        <Circle
          ref={x => (this.circle = x)}
          cx={dimension.ExperienceCircleWidthHeight / 2}
          cy={dimension.ExperienceCircleWidthHeight / 2}
          r={dimension.ExperienceCircleRadius}
          stroke="url(#ExperienceCircle-gradient)"
          strokeWidth={dimension.ExperienceCircleThickness}
          fill="transparent"
          strokeDasharray={[0,0]}
          strokeLinecap="round"
        />
      </SSvg>
    );
  }
}

export default ExperienceCircle;

更新：扩展讨论和更多示例(针对不同元素的类似方法)可通过发布到react-native-svg repo的问题获得：https://github.com/react-native-community/react-native-svg/issues/451