0
314
ViewsCómo usar un AnimatedContainer para transformaciones animadas (por ejemplo, Escala)
Estoy buscando animar la escala de un contenedor usando la propiedad detransformación de un AnimatedContainer ; sin embargo, la escala no cambia y salta directamente de principio a fin.
Fragmento de código:
var container = new AnimatedContainer( duration: const Duration(milliseconds: 200), width: 50.0, height: 50.0, // selected is a bool that will be toggled transform: selected ? new Matrix4.identity() : new Matrix4.identity().scaled(0.2,0.2), decoration: new BoxDecoration( shape: BoxShape.circle, backgroundColor: Colors.blue[500], ), child: new Center( child: new Icon( Icons.check, color: Colors.white, ), ) );¿Alguna idea de lo que está pasando?
3 answers
Answer question0
AnimatedContainer admite animar su valor de transformación, de la siguiente manera:
/// scale to 95%, centerred final width = 200.0; final height = 300.0; bool shouldScaleDown = true;// change value when needed AnimatedContainer( color: Colors.blueAccent, width: width, height: height, duration: Duration(milliseconds: 100), transform: (shouldScaleDown ? (Matrix4.identity() ..translate(0.025 * width, 0.025 * height)// translate towards right and down ..scale(0.95, 0.95))// scale with to 95% anchorred at topleft of the AnimatedContainer : Matrix4.identity()), child: Container(), );0
Me temo que transform es una de las propiedades que no animamos ( child es otra). Si desea animar la escala, puede usar ScaleTransition.
ScaleTransition: https://docs.flutter.io/flutter/widgets/ScaleTransition-class.html
Error para Matrix lerp: https://github.com/flutter/flutter/issues/443
0
puede Animar usando el Generador animado, el siguiente código escalará un Texto del Tamaño de fuente 20-35 en 4 segundos. Permítame dividir esto en pasos para que lo entienda mejor.
1. necesita implementar su clase desde TickerProviderStateMixin .
2.Necesitas un AnimationController y unas variables de Animación ;
3. envuelva su widget dentro de un AnimatedBuilder (tenga en cuenta que AnimatedBuilder debe devolver un Widget al menos un contenedor) y agregue un controlador a la animación como
animation: _controller,y constructor que devuelve el AnimatedWidget
4.En el método init, inicialice el controlador con vsync y la Duración de la animación. y la animación con el Tweenit toma valores de inicio y final que definen los valores inicial y final de su Widget para ser animado
para mí, en este caso, era un widget de texto, por lo que los valores de inicio y finalización corresponderán a fontSize.que recibe valores variables como animation.value
5. Finalmente, ¿cómo desea que sea el efecto de animación? Será especificado por la animación que toma el controlador y el efecto Curva.
Aquí hay un ejemplo de trabajo
class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<SplashScreen> with TickerProviderStateMixin { AnimationController _controller; Animation _animation; @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Color(0xFF005CA9), body: Center( child: AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Container( child: Text( 'Hello World', style: TextStyle( color: Colors.white, fontSize: _animation.value, ), ), ); }, ), )); } void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 4)); _animation = Tween<double>( begin: 20, end: 35, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } }el código anterior produce el siguiente resultado
