web-dev-qa-db-ja.com

React Native：画像の回転をどのようにアニメーション化しますか？

回転はスタイル変換であり、RNでは、このようなものを回転させることができます

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

ただし、RNでアニメーションを作成するには、文字列ではなく数字を使用する必要があります。 RNでトランスフォームをアニメーション化することはできますか、それとも何らかのスプライトシートを考え出し、いくつかのfpsでImage srcを変更する必要がありますか？

javascriptreact-nativeanimationrotationtransform
33
MiLeung

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'}} />
92
Nader Dabit

プロパティを追加することを忘れないでくださいseNativeDriverこのアニメーションから最高のパフォーマンスを得るために：

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