React Native: Bir görüntünün dönüşünü nasıl canlandırıyorsunuz?

Question

Rotasyon bir stil dönüşümü ve RN de, sen RN şeyler canlandırmak, ancak bu

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

gibi şeyler döndürebilir, sayıları değil, dizeleri kullanmak zorunda. Hala RN'deki dönüşümleri canlandırabilir misiniz, yoksa bir çeşit sprite sayfasıyla gelip Image src'i biraz fps'de değiştirmem mi gerekiyor?

Answer 1

interpolate yöntemini kullanarak dizeleri canlandırabilirsiniz. interpolate, çoğu şey için genellikle 0'dan 1'e kadar iyi bir değer aralığı alır ve bunları bir değerler aralığına dönüştürür (bunlar dizge, sayı, hatta bir değer döndüren işlevler olabilir).

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

O zaman bu gibi bileşen kullanmak:: Maalesef

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

Answer 2

yetmez

Ne yapacağını varolan Hareketli değerini almak ve bunun gibi enterpolasyon fonksiyonu geçirin olduğunu Yukarıda yorum yapmak için itibar.

Çok güzel bir örnek. Bu animasyonun en iyi performansı elde etmelerini sağlamak için özellik useNativeDriver eklemeyi unutmayın: harika bir örnek

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