animation - texto - title template premiere free

¿Cómo animas la altura en reaccionar de forma nativa cuando no sabes el tamaño del contenido?

Question

En reaccion-native, ¿cómo animas el tamaño de una Vista cuando no sabes el tamaño de su contenido?

Digamos que la altura del contenido de la Vista puede estar en cualquier lugar de 0 a 400 pts, y el contenido puede crecer y reducirse dinámicamente, y desea animar cualquier cambio en la altura.

Básicamente, estoy buscando reproducir el comportamiento de LayoutAnimation sin usar LayoutAnimation pero usando Animated.

Creo que lo que se me escapa es que no sé cómo animar hacia una altura objetivo ya que no sé la altura del contenido.

Answer 1

Tendrá que agregar algún tipo de escala de tamaño, probablemente con porcentajes para el mejor efecto.

En primer lugar, primero necesitarías usar Animated.View lugar de View .

A continuación, deberá aplicar una transformación al estilo de la vista, digamos que se ve a continuación. Esta es la parte que se actualiza, cambia y crea el movimiento.

 <Animated.View style={[ styles.someStyleYouMade,
{
transform: [
// scaleX, scaleY, scale, theres plenty more options you can find online for this.
{ scaleX: ViewScaleValue } // this would be the result of the animation code below and is just a number.
]
}
]}
>

La siguiente parte es básicamente un ejemplo animado de API, escribiría algo como esto (personalizado a su gusto) y cuando se llame a este script, se animará de la manera que especifique.

 Animated.timing( // Animate over time
this.state.ViewScale, // The animated value to drive, this would be a new Animated.Value(0) object.
{
toValue: 100, // Animate the value
duration: 5000, // Make it take a while
}
).start();

Por último, es probable que desee aplicar una interpolación al valor para que se vea lo más personalizado posible.

(Esto entrará en su función render() pero antes de return() . ViewScaleValue entrará en la transformación Animated.View )

const ViewScaleValue = this.state.ViewScale.interpolate({
inputRange: [0, 25, 50, 75, 100],
outputRange: [0, .5, 0.75, 0.9, 1]
});

todo este código haría que ViewScaleValue , un número simple, animar de 0 a 100, fuera rápido y luego lento (debido a la interpolación) y aplicar cada iteración de la animación a la transformación Animated.View .

Lea la API animada junto a esto para obtener un buen conocimiento de ella.

Answer 2

Yo uso LayoutAnimation para eso, justo antes del cambio de estado que causa que la altura de su componente cambie, agregue:

LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

Puedes usar diferentes presets:

• primavera
• easeInEaseOut

• lineal

  Puede leer más sobre esto aquí https://facebook.github.io/react-native/docs/layoutanimation.html