Native reagieren: Wie animieren Sie die Rotation eines Bildes?

Question

Die Rotation wird eine Art transformieren und in RN, können Sie Dinge wie diese

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

jedoch drehen, die Dinge in RN zu animieren, müssen Sie Zahlen verwenden, keine Strings. Kannst du Transformationen in RN animieren oder muss ich eine Art Sprite Sheet erstellen und den Image src um einige fps ändern?

Answer 1

Sie können Strings tatsächlich mit der interpolate-Methode animieren. interpolate nimmt einen Bereich von Werten, typischerweise 0 bis 1 funktioniert für die meisten Dinge gut und interpoliert sie in eine Reihe von Werten (das können Strings, Zahlen, sogar Funktionen sein, die einen Wert zurückgeben).

Was würden Sie tun, ist nehmen einen vorhandenen Animations Wert und geben es durch die Interpolations-Funktion wie folgt aus:

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

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

Dann in Ihrer Komponente wie folgt verwenden es:

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

Answer 2

Leider nicht genug Ruf, um oben zu kommentieren.

Sehr gutes Beispiel. Vergessen Sie nicht, Eigentum useNativeDriver, um sicherzustellen, hinzuzufügen, dass Sie die beste Leistung erhalten aus dieser Animation:

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