Как оживить путь в SVG при изменении в React? - PullRequest
Новая
       35

Как оживить путь в SVG при изменении в React?

0 голосов
/ 06 октября 2019

Я строю некоторые данные с использованием готового компонента, который отображает SVG с путями, представляющими определенные формы. Реквизиты, которые входят в этот компонент, меняются, и я хочу анимировать одно изменение в другое.

Я думал об использовании библиотеки, которая анимирует значения от А до В, но использование ответной пружины мне не помогло. Пути использовали такие значения, как d="NaN,NaN" при использовании Reaction-Spring.

Теперь мне было интересно, можно ли установить переход на пути в CSS? Есть идеи? 

       <Radar
        width={500}
        height={500}
        padding={70}
        domainMax={1}
        highlighted={null}
        data={{
          variables: [
            {key: 'energy', label: 'Energy'},
            {key: 'accousticness', label: 'Accousticness'},
            {key: 'danceability', label: 'Dancability'},
          ],
          sets: [
            {
              key: 'crowd',
              label: 'Crowd dancing',
              values: {
                energy: crowdMetas.energy, 
                accousticness: crowdMetas.acousticness,
                danceability: crowdMetas.danceability,
              },
            },
            {
              key: 'song',
              label: `${name} - ${artist}`,
              values: {
                energy: currentTrackStats.energy, 
                accousticness: currentTrackStats.acousticness,
                danceability: currentTrackStats.danceability,
              },
            },
          ],
        }}
      />

Я хочу анимировать значения в объектах данных, которые отображаются в путях в SVG при изменении значения.

...