Question

我正在关注本教程：https://medium.com/@oriharel/pie-animation-in-react-native-using-svg-55d7d3f90156

在本教程中，您将制作一个饼图，该饼图的末端角度可以设置动画。饼图包含三个部分，分别占图表的20％，20％和60％。图表的结束角从0.1Pi到2Pi进行动画设置。

我要做的是保持端角恒定，并为各个段的比例设置动画（到目前为止，这些比例固定为20、20和60）。

到目前为止，我一直在尝试更改此代码

const demoData = [
    {
        number: 60,
        color: '#0d2f51'
    },
    {
        number: 20,
        color: '#28BD8B'
    },
    {
        number: 20,
        color: '#F66A6A'
    }
];

对此

const demoData = [
    {
        number: Animated.Value(60),
        color: '#0d2f51'
    },
    {
        number: Animated.Value(20),
        color: '#28BD8B'
    },
    {
        number: Animated.Value(20),
        color: '#F66A6A'
    }
];

但这给我一个错误。有人知道如何解决这个问题吗？

谢谢！

Answer 1

初始化动画值时，应使用关键字new。当分配的值在其整个生命周期中从未改变时，也使用const关键字。请使用状态变量保存可设置动画的值。

this.state = {
   demoData: [
    {
        number: new Animated.Value(60),
        color: '#0d2f51'
    },
    {
        number: new Animated.Value(20),
        color: '#28BD8B'
    },
    {
        number: new Animated.Value(20),
        color: '#F66A6A'
    }
  ];
}

反应饼图段的原生动画角度

1 个答案: