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

更新時間：2023年01月19日 10:31:59 作者：SoaringHeart

這篇文章主要為大家介紹了Flutter封裝組動畫混合動畫AnimatedGroup示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

一、來源

項目中遇到混合動畫的情況，每次實現(xiàn)都需要生命一堆屬性，讓代碼變得雜亂，難以維護。

參考 iOS 組動畫 CAAimationGroup，隨花半天時間封裝一個混合動畫組件 AnimatedGroup。

此組件基于極簡、高擴展、高適用的封裝原則，基本滿足當前項目開發(fā)。

二、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),
                )
              ),
            )
          ],
        ),
      ),
    );
  }
}

三、AnimatedGroup源碼

//
//  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';
/// 混合動畫回調(diào)類型
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);
  /// 混合動畫數(shù)組
  List<AnimatedGroupItemModel> animations;
  /// 混合動畫回調(diào)
  AnimatedGroupBuilder builder;
  /// 控制器
  AnimationController? controller;
  /// AnimationController 控制的 duration 屬性
  Duration? duration;
  /// 不需要多次構(gòu)建的部分
  Widget? child;
  @override
  AnimatedGroupState createState() => AnimatedGroupState();
}
/// 混合動畫 State
class AnimatedGroupState extends State<AnimatedGroup> with TickerProviderStateMixin {
  AnimationController? _controller;
  /// 僅限于無法滿足功能時使用(透傳對象, 方便二次開發(fā))
  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);
      }
    );
  }
  /// 開始執(zhí)行動畫
  ///
  /// isRemovedOnCompletion 是否單程動畫
  ///
  /// isReverse 是否逆轉(zhuǎn)動畫
  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
    };
  }
  /// 創(chuàng)建動畫對象
  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;
  /// 動畫結(jié)束時間 (0 - 1.0)
  double end;
}