简介
做过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> {
Widget 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);
Widget 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;
Widget 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'
];
Widget 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> {
Widget 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
上面的几个例子动画都是自动触发,如果需要手动触发可以如下文章来源:https://www.toymoban.com/news/detail-604226.html
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),
),
),
),
))
],
)
文章来源地址https://www.toymoban.com/news/detail-604226.html
到了这里,关于flutter:animate_do(flutter中的Animate.css)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!