Soy muy nuevo en React Native y me encontré con un problema que ocurre cuando quiero animar un color de tinte de imágenes. Espero que el color cambie gradualmente con el tiempo, como debería lograr Animated. Timing, pero en cambio, solo hace el primer cuadro de la animación y luego se congela. Sin embargo, por alguna razón, cuando solo cambio 'tintColor' a 'backgroundColor', la animación funciona bien.
Aquí está mi código:
import React from 'react'; import { useState } from 'react'; import { Text, View, TouchableHighlight, Dimensions, Component, Image, Animated } from 'react-native'; import PropTypes from 'prop-types'; function RGBtoCSS(rgb) { return "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")"; } class MyImage extends React.Component { constructor(props) { super(props); this.anim = new Animated.Value(0); this.animate(); } animate() { this.props.onPress(); Animated.timing( this.anim, { toValue: 1, duration: 500, useNativeDriver: false } ).start(); } render() { var style = { width: 500, height: 500, resizeMode: 'stretch' }; var col = this.anim.interpolate( { inputRange: [0, 1], outputRange: [RGBtoCSS([0, 0, 0]), RGBtoCSS([140, 74, 140])] }); return ( <Animated.Image source={this.props.img} style={{ ...style, tintColor: col }} /> ); } } MyImage.propTypes = { img: PropTypes.string.isRequired, onPress: PropTypes.func.isRequired, spacing: PropTypes.number.isRequired }; export default function App() { return ( <View style={{ flex: 1, backgroundColor: RGBtoCSS([255, 255, 255]) }}> <MyImage img={{ uri: 'https://img.icons8.com/color/452/google-logo.png' }} onPress={() => { }} spacing={0} /> </View> ); }(demostración disponible en https://snack.expo.dev/v0GeiLbOP )
Encontré una solución para esto. Puede apilar dos <Animated.Image> una encima de la otra, siendo la primera imagen del color final y la segunda imagen del color inicial. Luego, puede usar la opacity para crear un efecto de desvanecimiento entre estas dos imágenes, que también funciona bien con la interpolate .
import React from 'react'; import { useState } from 'react'; import { Text, View, TouchableHighlight, Dimensions, Component, Image, Animated } from 'react-native'; import PropTypes from 'prop-types'; function RGBtoCSS(rgb) { return "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] +")"; } class MyImage extends React.Component { constructor(props) { super(props); this.anim = new Animated.Value(0); this.animate(); } animate() { this.props.onPress(); console.log(this.anim) Animated.timing( this.anim, { toValue: 1, duration: 500, useNativeDriver: false } ).start(); } render() { var style = { width: 500, height: 500, resizeMode: 'stretch' }; var col = this.anim.interpolate( { inputRange: [0, 1], outputRange: [1, 0] }); return ( <View> <Animated.Image source={this.props.img} style={{ ...style,tintColor: RGBtoCSS([140, 74, 140]) }} /> <Animated.Image source={this.props.img} style={{ ...style, opacity:col, transform:[{translateY:"-100%"}], tintColor: RGBtoCSS([0, 0, 0]) }} /> </View> ); } } MyImage.propTypes = { img: PropTypes.string.isRequired, onPress: PropTypes.func.isRequired, spacing: PropTypes.number.isRequired }; export default function App() { return ( <View style={{ flex: 1, backgroundColor: RGBtoCSS([255, 255, 255]) }}> <MyImage img={{ uri: 'https://img.icons8.com/color/452/google-logo.png' }} onPress={() => { }} spacing={0} /> </View> ); }Merienda - https://snack.expo.dev/ZYulbKh3g