Flutter flutter_staggered_animations列表动画-it网络技术分享

滑动动画

渐隐渐现动画

翻转动画

缩放动画

轮子仓库地址：https://pub.flutter-io.cn/packages/flutter_staggered_animations
系列演示demo源码：https://github.com/826327700/flutter_plugins_demo

安装

flutter_staggered_animations: "^1.0.0"

用法介绍

flutter_staggered_animations提供三个类：

Animation
AnimationConfiguration
AnimationLimiter

以及四个默认动画类型：

FadeInAnimation 渐隐渐现动画
SlideAnimation 滑动动画
ScaleAnimation 缩放动画
FlipAnimation 翻转动画
(动画可嵌套成组合动画)

在ListView中使用

动画外部由AnimationLimiter组件包裹，ListView的子项由AnimationConfiguration.staggeredList来创建：

int count=20;

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("ListView"),
        ),
        body: AnimationLimiter(
            child:ListView.builder(
                itemCount: count,
                itemBuilder: (context,index){
                    return AnimationConfiguration.staggeredList(
                        position: index,
                        duration: const Duration(milliseconds: 375),
                        child: SlideAnimation( //滑动动画
                            verticalOffset: 50.0,
                            child: FadeInAnimation( //渐隐渐现动画
                                child: Container(
                                    margin: EdgeInsets.all(5),
                                    color: Theme.of(context).primaryColor,
                                    height: 60,
                                ),
                            ),
                        ),
                    );
                },
            ),
        ),
        
    );
}

在GridView中使用

动画外部由AnimationLimiter组件包裹，GridView的子项由AnimationConfiguration.staggeredGrid来创建：

int count=20;

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("GridView"),
        ),
        body: 
        AnimationLimiter(
            child:GridView.builder(
                itemCount: count,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    //横轴元素个数
                    crossAxisCount: 3,
                    //纵轴间距
                    mainAxisSpacing: 10.0,
                    //横轴间距
                    crossAxisSpacing: 10.0,
                    //子组件宽高长度比例
                    childAspectRatio: 1.0
                ),
                itemBuilder: (context,index){
                    return AnimationConfiguration.staggeredGrid(
                        columnCount:count,
                        position: index,
                        duration: const Duration(milliseconds: 375),
                        child: SlideAnimation(
                            verticalOffset: 50.0,
                            child: FadeInAnimation(
                                child: Container(
                                    color: Theme.of(context).primaryColor,
                                ),
                            ),
                        ),
                    );
                },
            ),
        ),
        
    );
}

在Column中使用

动画外部由AnimationLimiter组件包裹，Column的子项由AnimationConfiguration.toStaggeredList来创建：

int count=10;

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Column"),
        ),
        body: 
        AnimationLimiter(
            child:Column(
                children:AnimationConfiguration.toStaggeredList(
                    duration: const Duration(milliseconds: 375),
                    childAnimationBuilder:(widget) => SlideAnimation(
                        verticalOffset: 50.0,
                        child: FadeInAnimation(
                            child: widget,
                        ),
                    ),
                    children: ChildrenList()
                )
            ),
        ),
        
    );
}

List<Widget> ChildrenList(){
    List<Widget> childs=[];
    for (var i = 0; i < count; i++) {
        childs.add(Container(
            margin: EdgeInsets.all(5),
            color: Theme.of(context).primaryColor,
            height: 60,
        ));
    }
    return childs;
}

在Row中使用

动画外部由AnimationLimiter组件包裹，Row的子项由AnimationConfiguration.toStaggeredList来创建：

int count=5;

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Row"),
        ),
        body: 
        AnimationLimiter(
            child:Container(
                height: 60,
                child: Row(
                    children:AnimationConfiguration.toStaggeredList(
                        duration: const Duration(milliseconds: 375),
                        childAnimationBuilder:(widget) => SlideAnimation(
                            verticalOffset: 50.0,
                            child: FadeInAnimation(
                                child: widget,
                            ),
                        ),
                        children: ChildrenList()
                    )
                ),
            ),
        ),
        
    );
}

List<Widget> ChildrenList(){
    List<Widget> childs=[];
    for (var i = 0; i < count; i++) {
        childs.add(Container(
            margin: EdgeInsets.only(right:5),
            color: Theme.of(context).primaryColor,
            width: 60,
        ));
    }
    return childs;
}

THE END

Flutter
# flutter # Flutter组件