javascript - 饼图段的React Native动画角度

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'
    }
  ];
}