React Native: Как вы анималируете поворот изображения?

Вращение - это преобразование стиля, а в RN вы можете вращать такие вещи

  render() {
    return (
      <View style={{transform:[{rotate: '10 deg'}]}}>
        <Image source={require('./logo.png')} />
      </View>
    );
  }

Однако для анимации вещей в RN вам нужно использовать числа, а не строки. Можете ли вы еще оживить преобразования в RN или мне нужно придумать какой-то лист спрайтов и изменить изображение src на несколько кадров в секунду?

Ответ 1

Фактически вы можете оживить строки, используя метод interpolate. interpolate принимает диапазон значений, обычно от 0 до 1 хорошо работает для большинства вещей и интерполирует их в диапазон значений (это могут быть строки, числа и даже функции, возвращающие значение).

Что бы вы сделали, это взять существующее значение Animated и передать его через функцию интерполяции следующим образом:

spinValue = new Animated.Value(0)

// First set up animation 
Animated.timing(
    this.spinValue,
  {
    toValue: 1,
    duration: 3000,
    easing: Easing.linear
  }
).start()

// Second interpolate beginning and end values (in this case 0 and 1)
const spin = this.spinValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg']
})

Затем используйте его в своем компоненте следующим образом:

<Animated.Image
  style={{transform: [{rotate: spin}] }}
  source={{uri: 'somesource.png'}} />

Ответ 2

Не забудьте добавить свойство useNativeDriver, чтобы обеспечить максимальную производительность этой анимации:

// First set up animation 
Animated.timing(
    this.state.spinValue,
  {
    toValue: 1,
    duration: 3000,
    easing: Easing.linear,
    useNativeDriver: true
  }
).start();