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> {
  @override
  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);
  @override
  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;
  @override
  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'
  ];
  @override
  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> {

  @override
  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

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

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),
          ),
        ),
      ),
    ))
  ],
)