Реагировать Родные углы анимации сегментов круговой диаграммы

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