Flutter 动画

方式一

addListener and setState

 controller = AnimationController(
    vsync: this,
    duration: Duration(
      seconds: 3,
    ),
 );

  ///设置curve的值
  animation = CurvedAnimation(parent: controller, curve: Curves.elasticIn);
  controller.forward();
  controller.addListener(() {
      setState(() {});
  });
    
  Icon(
    Icons.favorite,
    color: Colors.red,
    size: animation.value,
  ),

方式二

AnimatedWidget

controller = AnimationController(
  vsync: this,
  duration: Duration(
    seconds: 3,
  ),
);

///设置curve的值
animation = CurvedAnimation(parent: controller, curve: Curves.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,
    );
  }
}

方式三

AnimatedBuidlder

controller = AnimationController(
  vsync: this,
  duration: Duration(
    seconds: 3,
  ),
);

///设置curve的值
animation = CurvedAnimation(parent: controller, curve: Curves.elasticIn);

 AnimatedBuilder(
  animation: controller,
  builder: (ctx, child) {
    return Icon(
      Icons.favorite,
      color: Colors.red,
      size: animation.value,
    );
  },
),

交织动画

controller = AnimationController(
  vsync: this,
  duration: Duration(
    seconds: 3,
  ),
);

///设置curve的值
animation = CurvedAnimation(parent: controller, curve: Curves.elasticIn);

///设置动画插值
animation = Tween<double>(begin: 50, end: 100).animate(animation);
///大小的animation
sizeAnimation = Tween<double>(begin: 50, end: 100).animate(controller);
///颜色animation
colorAnimation = ColorTween(begin: Colors.red, end: Colors.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,
        ),
      ),
    );
  },
)