Question

嘿大家我试图达到类似的效果：https://kimmobrunfeldt.github.io/progressbar.js （圈一）

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

基本上我正在尝试动画这个更改，而不是只是轻弹，下面是这个矩形进度条的完整来源，基本的想法是使用Circle和strokeDasharray以显示循环进度，它会收到currentExp和nextExp作为角色体验的值，以便在它们到达下一个lvl之前计算剩余百分比。

组件使用非常标准的元素集，除了样式和styled-components样式库中的少量维度/动画和颜色道具外。

注意：项目正在从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

，可以进行扩展讨论和更多示例（适用于不同元素的类似方法）

Answer 1

当您知道SVG输入如何工作时，实际上非常简单，反应原生SVG（或SVG输入，一般来说，它不能与角度一起工作）的问题之一，所以当你想要在圆上工作你需要将角度转换为它所需的输入，这可以通过简单地编写一个函数来完成（你必须记住或完全理解转换是如何工作的，这是标准）：

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
        var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

        return {
            x: centerX + (radius * Math.cos(angleInRadians)),
            y: centerY + (radius * Math.sin(angleInRadians))
        };
    }

然后你添加另一个函数，它可以以正确的格式给你道具：

function describeArc(x, y, radius, startAngle, endAngle){

        var start = polarToCartesian(x, y, radius, endAngle);
        var end = polarToCartesian(x, y, radius, startAngle);

        var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

        var d = [
            "M", start.x, start.y,
            "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
        ].join(" ");

        return d;
    }

现在很棒，你有一个函数（describeArc），它为你提供描述你的路径所需的完美参数（一个圆弧）：所以你可以将PATH定义为：

<AnimatedPath d={_d} stroke="red" strokeWidth={5} fill="none"/>

例如，如果您需要半径为R的圆弧在45度到90度之间，请将_d定义为：

_d = describeArc(R, R, R, 45, 90);

现在我们知道有关SVG PATH如何工作的一切，我们可以实现反应原生动画，并定义动画状态，例如progress：

import React, {Component} from 'react';
import {View, Animated, Easing} from 'react-native';
import Svg, {Circle, Path} from 'react-native-svg';

AnimatedPath = Animated.createAnimatedComponent(Path);

class App extends Component {
    constructor() {
        super();
        this.state = {
            progress: new Animated.Value(0),
        }
    }
componentDidMount(){
        Animated.timing(this.state.progress,{
            toValue:1,
            duration:1000,

        }).start()
}



    render() {
        function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
            var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

            return {
                x: centerX + (radius * Math.cos(angleInRadians)),
                y: centerY + (radius * Math.sin(angleInRadians))
            };
        }

        function describeArc(x, y, radius, startAngle, endAngle){

            var start = polarToCartesian(x, y, radius, endAngle);
            var end = polarToCartesian(x, y, radius, startAngle);

            var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

            var d = [
                "M", start.x, start.y,
                "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
            ].join(" ");

            return d;
        }

        let R = 160;
        let dRange = [];
        let iRange = [];
        let steps = 359;
        for (var i = 0; i<steps; i++){
            dRange.push(describeArc(160, 160, 160, 0, i));
            iRange.push(i/(steps-1));
        }


        var _d = this.state.progress.interpolate({
            inputRange: iRange,
            outputRange: dRange
        })

        return (
            <Svg style={{flex: 1}}>
                <Circle
                    cx={R}
                    cy={R}
                    r={R}
                    stroke="green"
                    strokeWidth="2.5"
                    fill="green"
                />
                {/*       X0  Y0               X1   Y1*/}
                <AnimatedPath d={_d}
                      stroke="red" strokeWidth={5} fill="none"/>

            </Svg>
        );
    }
    }

    export default App;

这个简单的组件可以随心所欲地使用

在组件的顶部，我们写，

AnimatedPath = Animated.createAnimatedComponent(Path);

因为从react-native-svg导入的Path不是本机react-native组件，我们将其变为动画。

在constructor，我们将进度定义为在动画期间应更改的动画状态。
在componentDidMount开始动画处理。
在render方法的开头，声明了定义SVG d参数所需的两个函数（polarToCartesian和describeArc）。
然后在interpolate上使用react-native this.state.progress来将this.state.progress中的更改从0插入1到d参数的更改。但是，这里有两点你应该记住：

1-两个不同长度的弧之间的变化不是线性的，因此从角度0到360的线性插值不能按照您的意愿工作，因此，最好在n度的不同步骤中定义动画（我使用1度，你可以根据需要增加或减少它。）。

2-弧不能继续高达360度（因为它相当于0），所以最好以接近但不等于360的程度完成动画（例如359.9）
在返回部分的末尾，描述了用户界面。

Answer 2

另一个绝对优秀的svg动画库是https://maxwellito.github.io/vivus/ 这是独立，没有依赖性且易于使用。

也许这符合您的需求？

Answer 3

如果你没有绑定svg库，我想你可以查看这个库：https://github.com/bgryszko/react-native-circular-progress，这可能是一种更简单的方法来实现你的目标。

动画<circle>的react-native-svg短划线长度

3 个答案: