Flutter——动画

• AnimatedList动态列表

AnimatedList  动画列表
FadeTransition： 渐入的效果
    opacity、child两个属性
ScaleTransition  缩放由0到1
    scale、child两个属性
class MyApp extends StatelessWidget {
  MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
        designSize: Size(750, 1252),
        builder: (context, child) {
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            builder: (context, child) {
              return MediaQuery(
                  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
                  child: child!);
            },
            theme: ThemeData(
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
              primarySwatch: Colors.blue,
              // buttonTheme: const ButtonThemeData(
              //     highlightColor: Colors.transparent,
              //     splashColor: Colors.transparent),
              // bottomNavigationBarTheme:
              //     const BottomNavigationBarThemeData(elevation: 0)
            ),
            home: HomePage(),
            // initialRoute: "/",
            // //2、配置onGenerateRoute固定写法
            // onGenerateRoute: onGenerateRoute,
            // routes: ,
          );
        });
  }
}

//父Widget
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _globalKey = GlobalKey<AnimatedListState>();
  bool flag = true;
  List<String> list = ["第一条", "第二条"];
  Widget _buildItem(index) {
    return ListTile(
      title: Text(list[index]),
      trailing: IconButton(
          onPressed: () {
            //执行删除
            _deleteItem(index);
          },
          icon: const Icon(Icons.delete)),
    );
  }

  _deleteItem(index) {
    if (flag == true) {
      flag = false;
      _globalKey.currentState!.removeItem(index, (context, animation) {
        var removeItem = _buildItem(index);
        list.removeAt(index); //数组中删除元素
        return FadeTransition(
          opacity: animation,
          child: removeItem, //执行动画的元素
        );
      });
      Timer.periodic(const Duration(milliseconds: 500), (timer) {
        flag = true;
        timer.cancel(); //cancel用于，以便在不需要结果时，可以停止异步操作
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          list.add("新增的数据显示");
          _globalKey.currentState!.insertItem(list.length - 1);
        },
        child: const Icon(Icons.add),
      ),
      appBar: AppBar(
        title: const Text("T"),
      ),
      body: AnimatedList(
          key: _globalKey,
          initialItemCount: list.length,
          itemBuilder: (context, index, animation) {
            return FadeTransition(
              opacity: animation,
              child: _buildItem(index),
            );
          }),
    );
  }
}

• 隐式动画

AnimatedContainer   //盒子动画
AnimatedPadding   //边距动画
AnimatedOpacity   //透明动画
AnimatedPositioned  //定位动画
AnimatedDefaultTextStyle //文字动画
AnimatedSwitcher   //子元素widget改变切换动画
    transitionBuilder
curve动画曲线