問題描述

旋轉(zhuǎn)是一種樣式變換，在 RN 中，您可以像這樣旋轉(zhuǎn)東西

Rotation is a style transform and in RN, you can rotate things like this

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

但是，要在 RN 中制作動(dòng)畫，您必須使用數(shù)字，而不是字符串.你還能在 RN 中為變換設(shè)置動(dòng)畫，還是我必須想出某種 sprite sheet 并以某些 fps 更改 Image src?

However, to animate things in RN, you have to use numbers, not strings. Can you still animate transforms in RN or do I have to come up with some kind of sprite sheet and change the Image src at some fps?

推薦答案

您實(shí)際上可以使用 interpolate 方法為字符串設(shè)置動(dòng)畫.interpolate 采用一系列值，通常 0 到 1 適用于大多數(shù)情況，并將它們插入到一系列值中(這些可以是字符串、數(shù)字，甚至是返回值的函數(shù)).

You can actually animate strings using the interpolate method. interpolate takes a range of values, typically 0 to 1 works well for most things, and interpolates them into a range of values (these could be strings, numbers, even functions that return a value).

你要做的是獲取一個(gè)現(xiàn)有的 Animated 值并將其傳遞給 interpolate 函數(shù)，如下所示:

What you would do is take an existing Animated value and pass it through the interpolate function like this:

spinValue = new Animated.Value(0);

// First set up animation 
Animated.timing(
    this.spinValue,
  {
    toValue: 1,
    duration: 3000,
    easing: Easing.linear, // Easing is an additional import from react-native
    useNativeDriver: true  // To make use of native driver for performance
  }
).start()

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

然后像這樣在你的組件中使用它:

Then use it in your component like this:

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

如果你想在循環(huán)中進(jìn)行旋轉(zhuǎn)，那么在 Animated.loop

In case if you want to do the rotation in loop, then add the Animated.timing in the Animated.loop

Animated.loop(
 Animated.timing(
   this.spinValue,
   {
    toValue: 1,
    duration: 3000,
    easing: Easing.linear,
    useNativeDriver: true
   }
 )
).start();

這篇關(guān)于React Native:如何為圖像的旋轉(zhuǎn)設(shè)置動(dòng)畫?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！