Flutter封裝組動畫混合動畫AnimatedGroup範例詳解

//
//  AnimatedGroupDemo.dart
//  flutter_templet_project
//
//  Created by shang on 12/6/21 5:52 PM.
//  Copyright © 12/6/21 shang. All rights reserved.
//
import 'package:flutter/material.dart';
import 'package:flutter_templet_project/basicWidget/animated_group.dart';
class AnimatedGroupDemo extends StatefulWidget {
  AnimatedGroupDemo({ Key? key, this.title}) : super(key: key);
  final String? title;
  @override
  _AnimatedGroupDemoState createState() => _AnimatedGroupDemoState();
}
class _AnimatedGroupDemoState extends State<AnimatedGroupDemo> {
  GlobalKey<AnimatedGroupState> _globalKey = GlobalKey();
  final _animations = <AnimatedGroupItemModel>[
    AnimatedGroupItemModel(
      tween: Tween<double>(begin: .0, end: 300.0,),
      begin: 0.0,
      end: 0.6
    ),
    AnimatedGroupItemModel(
      tween: ColorTween(begin: Colors.green, end: Colors.red,),
      begin: 0.0,
      end: 0.6
    ),
    AnimatedGroupItemModel(
      tween: Tween<EdgeInsets>(
        begin: const EdgeInsets.only(left: .0),
        end: const EdgeInsets.only(left: 100.0),
      ),
      begin: 0.6,
      end: 1.0
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? "$widget"),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              child: Text("start animation"),
              onPressed: (){
                _globalKey.currentState?.palyeAnimations(isRemovedOnCompletion: false);
              },
            ),
            Container(
              width: 300,
              height: 300,
              child: AnimatedGroup(
                key: _globalKey,
                duration: Duration(milliseconds: 2000),
                animations: _animations,
                child: Text("AnimatedGroupWidget 混合動畫", style: TextStyle(color: Colors.white, backgroundColor: Colors.green),),
                builder: (BuildContext context, Widget? child, List<Animation<dynamic>> animations) {
                  final aHeight = animations[0];
                  final aColor = animations[1];
                  final aPadding = animations[2];
                  return Stack(
                    children: [
                      Container(
                        alignment: Alignment.bottomCenter,
                        padding: aPadding.value,
                        child: Container(
                          color: aColor.value,
                          width: 50.0,
                          height: aHeight.value,
                        ),
                      ),
                      Center(child: child!)
                    ],
                  );
                },
              ),
              decoration: BoxDecoration(
                color: Colors.black.withOpacity(0.1),
                border: Border.all(
                  color: Colors.black.withOpacity(0.5),
                )
              ),
            )
          ],
        ),
      ),
    );
  }
}

//
//  AnimatedGroupDemo.dart
//  flutter_templet_project
//
//  Created by shang on 1/19/23 8:21 AM.
//  Copyright © 1/19/23 shang. All rights reserved.
//
import 'package:flutter/material.dart';
/// 混合動畫回撥型別
typedef AnimatedGroupBuilder = Widget Function(BuildContext context, Widget? child, List<Animation<dynamic>> animations);
class AnimatedGroup extends StatefulWidget {
  /// 混合動畫
  AnimatedGroup({
    Key? key,
    required this.animations,
    required this.builder,
    this.controller,
    this.duration = const Duration(milliseconds: 2000),
    this.child,
  }) : super(key: key);
  /// 混合動畫陣列
  List<AnimatedGroupItemModel> animations;
  /// 混合動畫回撥
  AnimatedGroupBuilder builder;
  /// 控制器
  AnimationController? controller;
  /// AnimationController 控制的 duration 屬性
  Duration? duration;
  /// 不需要多次構建的部分
  Widget? child;
  @override
  AnimatedGroupState createState() => AnimatedGroupState();
}
/// 混合動畫 State
class AnimatedGroupState extends State<AnimatedGroup> with TickerProviderStateMixin {
  AnimationController? _controller;
  /// 僅限於無法滿足功能時使用(透傳物件, 方便二次開發)
  AnimationController get controller => _controller!;
  List<Animation<dynamic>> _animations = [];
  @override
  void initState() {
    _controller = widget.controller ?? AnimationController(duration: widget.duration, vsync: this);
    _animations = widget.animations.map((e) => e.tween.animate(_buildAnim(e.begin, e.end))).toList();
    super.initState();
  }
  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller!,
      child: widget.child,
      builder: (BuildContext context, Widget? child){
        return widget.builder(context, child, _animations);
      }
    );
  }
  /// 開始執行動畫
  ///
  /// isRemovedOnCompletion 是否單程動畫
  ///
  /// isReverse 是否逆轉動畫
  palyeAnimations({bool isRemovedOnCompletion = true, bool isReverse = false}) async {
    try {
      if (!isReverse) {
        await _controller?.forward().orCancel;
        if (!isRemovedOnCompletion) {
          await _controller?.reverse().orCancel;
        }
      } else {
        await _controller?.reverse().orCancel;
        if (!isRemovedOnCompletion) {
          await _controller?.forward().orCancel;
        }
      }
    } on TickerCanceled {
      // the animation got canceled, probably because we were disposed
    };
  }
  /// 建立動畫物件
  CurvedAnimation _buildAnim(double begin, double end) {
    return CurvedAnimation(
      parent: _controller!,
      curve: Interval(
        begin,
        end,
        curve: Curves.ease,
      ),
    );
  }
}
/// 混合動畫單個動畫模型
class AnimatedGroupItemModel{
  /// 混合動畫單個動畫模型
  AnimatedGroupItemModel({
    required this.tween,
    required this.begin,
    required this.end,
  });
  /// 動畫 Tween
  Tween tween;
  /// 動畫開始時間 (0 - 1.0)
  double begin;
  /// 動畫結束時間 (0 - 1.0)
  double end;
}