Methods a
addListener and setState
controller = AnimationController( vsync: this, duration: Duration( seconds: 3, ), ); Animation = CurvedAnimation(Parent: controller, Curve: elasticIn); controller.forward(); controller.addListener(() { setState(() {}); }); Icon( Icons.favorite, color: Colors.red, size: animation.value, ),Copy the code
Way 2
AnimatedWidget
controller = AnimationController( vsync: this, duration: Duration( seconds: 3, ), ); Animation = CurvedAnimation(Parent: controller, Curve: elasticIn); IconAnimatedWidget( sizeAnimation: animation, ), class IconAnimatedWidget extends AnimatedWidget { final Animation sizeAnimation; IconAnimatedWidget({this.sizeAnimation}) : super(listenable: sizeAnimation); @override Widget build(BuildContext context) { return Icon( Icons.favorite, size: sizeAnimation.value, ); }}Copy the code
Methods three
AnimatedBuidlder
controller = AnimationController( vsync: this, duration: Duration( seconds: 3, ), ); Animation = CurvedAnimation(Parent: controller, Curve: elasticIn); AnimatedBuilder( animation: controller, builder: (ctx, child) { return Icon( Icons.favorite, color: Colors.red, size: animation.value, ); },),Copy the code
Mixed animation
controller = AnimationController( vsync: this, duration: Duration( seconds: 3, ), ); Animation = CurvedAnimation(Parent: controller, Curve: elasticIn); Animation = Tween<double>(begin: 50, end: 100). Animate (animation); Animation sizeAnimation = Tween<double>(begin: 50, end: 100). Animate (controller); Animation colorAnimation = ColorTween(begin: color.red, end: color.blue). Animate (controller); Animation radiusAnimation = Tween<double>(begin: 0, end: PI). Animate (controller); Animation opacityAnimation = Tween<double>(begin: 0, end: 1). Animate (controller); AnimatedBuilder( animation: controller, builder: (ctx, child) { print(opacityAnimation.value); return Opacity( opacity: opacityAnimation.value, child: Transform( transform: Matrix4.rotationZ(radiusAnimation.value), alignment: Alignment.center, child: Container( width: sizeAnimation.value, height: sizeAnimation.value, color: colorAnimation.value, ), ), ); },)Copy the code