Reagire nativo: come si anima la rotazione di un'immagine?

Question

rotazione è uno stile di trasformare e di RN, è possibile ruotare le cose come questo

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

Tuttavia, per animare le cose in RN, è necessario utilizzare numeri, non stringhe. Puoi ancora animare le trasformazioni in RN o devo trovare qualche tipo di sprite sheet e cambiare l'immagine src ad alcuni fps?

Answer 1

È possibile animare effettivamente le stringhe utilizzando il metodo interpolate. interpolate accetta un intervallo di valori, in genere da 0 a 1 funziona bene per la maggior parte delle cose e li interpola in un intervallo di valori (questi potrebbero essere stringhe, numeri, persino funzioni che restituiscono un valore).

Cosa si dovrebbe fare è prendere un valore animato esistente e farlo passare attraverso la funzione di interpolare in questo modo:

// 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'] 
}) 

poi usarlo nel componente in questo modo:

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

Answer 2

Purtroppo non basta reputazione per commentare sopra.

Ottimo esempio. Non dimenticate di aggiungere proprietà useNativeDriver per garantire che si ottiene le migliori prestazioni di questa animazione:

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