React Native Animated: Как анимировать компонент, внутри которого находятся анимированные компоненты? - PullRequest
Новая
       66

React Native Animated: Как анимировать компонент, внутри которого находятся анимированные компоненты?

0 голосов
/ 28 февраля 2020

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

У меня есть проблема, пока эти изображения вращаются по отдельности, я хочу Поверните все 3 изображения одновременно, у меня была идея поместить их в Animated.View, но это не сработает и ничего не будет визуализировано (я думаю, у вас не может быть Animated компонентов внутри Animated компонентов).

Есть идеи, как это сделать? В настоящее время мой код JSX выглядит следующим образом (ничего не будет отображаться) 

<Animated.View style={[styles.container], {transform: [{rotate: containerRotation}]}}>
  <Animated.Image source={require('../../assets/spinner.png')} style={[styles.spinnerCircle, {transform: [{rotate: firstRotation}]}]} />
  <Animated.Image source={require('../../assets/spinner.png')} style={[styles.spinnerCircle, {transform: [{rotate: secondRotation}]}]} />
  <Animated.Image source={require('../../assets/spinner.png')} style={[styles.spinnerCircle, {transform: [{rotate: thirdRotation}]}]} />
</Animated.View>

Вот интерполяции: 

const firstRotation = this.rotation.interpolate({
  inputRange: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
  outputRange: ['0deg', '0deg', '0deg', '90deg', '180deg', '180deg', '180deg', '270deg', '360deg', '360deg', '360deg', '450deg', '540deg', '540deg', '540deg', '630deg', '720deg']
});
const secondRotation = this.rotation.interpolate({
  inputRange: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
  outputRange: ['0deg', '90deg', '90deg', '90deg', '180deg', '270deg', '270deg', '270deg', '360deg', '450deg', '450deg', '450deg', '540deg', '630deg', '630deg', '630deg', '720deg']
});
const thirdRotation = this.rotation.interpolate({
  inputRange: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
  outputRange: ['0deg', '90deg', '180deg', '180deg', '180deg', '270deg', '360deg', '360deg', '360deg', '450deg', '540deg', '540deg', '540deg', '630deg', '720deg', '720deg', '720deg']
});
const containerRotation = this.rotation.interpolate({
  inputRange: [0, 16],
  outputRange: ['0deg', '360deg']
});
...