Flutter AnimationController 循環動畫

2021 年 11 月 17 日
動畫效果為彩色三顆球上下跳動
此動畫作為讀取時的補空
此寫法沒有偵測讀取狀態只是單純的重複播放
class LoadingAnimation extends StatefulWidget {
  const LoadingAnimation({Key? key}) : super(key: key);
  @override
  _LoadingAnimationState createState() => _LoadingAnimationState();
}
class _LoadingAnimationState extends State<LoadingAnimation> with SingleTickerProviderStateMixin {
  late Animation<double> animation;
  late Animation<double> animation2;
  late Animation<double> animation3;
  late AnimationController controller;

  @override
  initState() {
    super.initState();
    controller = AnimationController(duration: const Duration(milliseconds: 400), vsync: this); //秒數為一個輪迴的時間
    animation = Tween(begin:20.0, end: 0.0).animate(controller);
    animation2 = Tween(begin:0.0, end: 20.0).animate(controller);
    animation3 = Tween(begin:20.0, end: 0.0).animate(controller)
      ..addListener(() {
        setState(() {
          // animation object’s value
        });
      });
    controller.repeat(reverse: true); //開啟循環動畫 reverse效果是0%-100%-0%的來回撥放
  }
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          decoration: const BoxDecoration(
            color: Color.fromRGBO(255, 153, 0, 1),
            borderRadius: BorderRadius.all(Radius.circular(50.0)),
          ),
          height: 30,
          width: 30,
          margin: EdgeInsets.fromLTRB(0.0, animation.value, 0.0, 0),
        ),
        Container(width: 10,),
        Container(
          decoration: const BoxDecoration(
            color: Color.fromRGBO(112, 198, 83, 1),
            borderRadius: BorderRadius.all(Radius.circular(50.0)),
          ),
          height: 30,
          width: 30,
          margin: EdgeInsets.fromLTRB(0.0, animation2.value, 0.0, 0),
        ),
        Container(width: 10,),
        Container(
          decoration: const BoxDecoration(
            color: Color.fromRGBO(0, 158, 211, 1),
            borderRadius: BorderRadius.all(Radius.circular(50.0)),
          ),
          height: 30,
          width: 30,
          margin: EdgeInsets.fromLTRB(0.0, animation3.value, 0.0, 0),
        )
      ],
    );
  }
  @override
  dispose() {
    controller.dispose();
    super.dispose();
  } //動畫必要元素不可刪除

}
Shiro
