flutter：animate_do（flutter中的Animate.css）

简介

做过web开发的应该大部分人都知道Animate.css，它为开发者提供了一系列预定义的动画效果，可以通过简单的CSS类来实现各种动画效果。而animate_do 相当于flutter中的Animate.css,它提供了很多定义好的动画效果

基本使用

官方地址
https://pub-web.flutter-io.cn/packages/animate_do

安装

flutter pub add animate_do

示例一

class SwitcherContainerState extends State<SwitcherContainer> {@overrideWidget build(BuildContext context) {return Center(child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [FadeInLeft(child: const Square(label: '1')),FadeInUp(child: const Square(label: '2') ),FadeInDown(child: const Square(label: '3') ),FadeInRight(child: const Square(label: '4') ),],),);}
}class Square extends StatelessWidget {final String label;const Square({Key? key,required this.label}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(width: 50,height: 50,color: Colors.blueAccent,child: Text(label,style: const TextStyle(color: Colors.white),),);}
}

在这里插入图片描述
示例2

class SwitcherContainerState extends State<SwitcherContainer> {bool isVisible = true;@overrideWidget build(BuildContext context) {return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Visibility(visible: isVisible,replacement: FadeOut(duration: const Duration(seconds: 1),child: Container(width: 100,height: 100,color: Colors.blue,),),child: FadeIn(duration: const Duration(seconds: 1),child: Container(width: 100,height: 100,color: Colors.blue,),),),const SizedBox(height: 100,),ElevatedButton(onPressed: () {setState(() {isVisible = true;});},child: const Text("淡入")),ElevatedButton(onPressed: () {setState(() {isVisible = false;});},child: const Text("淡出"))],));}
}

在这里插入图片描述
示例3

class SwitcherContainerState extends State<SwitcherContainer> {List<String> items = ['item 1','item 2','item 3','item 4','item 5','item 6','item 7','item 8','item 9','item 10'];@overrideWidget build(BuildContext context) {return ListView.builder(itemCount: items.length,itemBuilder: (BuildContext context, int index) {return FadeInRight(delay: Duration(milliseconds: 200 * index),child: SlideInUp(delay: Duration(milliseconds: 200 * index),child: ListTile(title: Text(items[index]),),));});}
}

在这里插入图片描述
示例4

class SwitcherContainerState extends State<SwitcherContainer> {@overrideWidget build(BuildContext context) {return GridView.builder(gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,),itemCount: 4,itemBuilder: (BuildContext context, int index) {return FadeInRight(delay: const Duration(seconds: 1),child: ZoomIn(delay: const Duration(seconds: 1),child: Container(width: 120,height: 100,margin: const EdgeInsets.all(8),color: Colors.blue,child: Center(child: Text("item $index",style: const TextStyle(color: Colors.white),),),),));});}
}

在这里插入图片描述
示例5

上面的几个例子动画都是自动触发，如果需要手动触发可以如下

Column(children: [ElevatedButton(onPressed: () {animationController.forward();},child: const Text("开始")),Expanded(child: ZoomIn(manualTrigger: true,controller: (controller) => animationController = controller,delay: const Duration(seconds: 1),child: Container(width: 120,height: 100,margin: const EdgeInsets.all(8),color: Colors.blue,child: const Center(child: Text("item",style: TextStyle(color: Colors.white),),),),))],
)