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

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

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

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

18
animation react-native rotation transform

2 ответов

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

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

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'}} />
65

к сожалению, недостаточно репутации, чтобы прокомментировать выше.

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

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