Flutter:AnimatedIcon图标动画,自定义Icon通过延时Interval,实现交错式动画

html 复制代码
配置vsync,需要实现一下with SingleTickerProviderStateMixin
js 复制代码
class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{
  // late延迟初始化  AnimationController
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化 AnimationController
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync:this, // 让程序和手机的刷新频率统一
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('标题'),
      ),
      body: Center(
        child: Column(
          children: [
            AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _controller,size: 40,color: Colors.red,),
            ElevatedButton(onPressed: (){
              _controller.forward();
            }, child: const Text('播放')),
            ElevatedButton(onPressed: (){
              _controller.reverse();
            }, child: const Text('返回')),
          ],
        ),
      ),
    );
  }
}

AnimatedIcons参数选项包含:

复制代码
add_event
arrow_menu
close_menu
ellipsis_search
event_add
home_menu
list_view
menu_arrow
menu_close
menu_home
pause_play
play_pause
search_ellipsis
view_list

上边没有想要的图标,那么就需要自己实现2个图标间的交错式动画

js 复制代码
class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{
  // 定义 AnimationController
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化 AnimationController
    _controller = AnimationController(
      duration: const Duration(milliseconds: 1000),
      vsync:this, // 让程序和手机的刷新频率统一
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('标题'),
      ),
      body: Column(
        children: [
          // 定义Stack,使2个图标重叠摆放
          Stack(
            children: [
              // 默认显示搜索图标,
              // Tween(开始1,结束0)
              // Interval时间为0-0.5之间
              //
              // 搜索图标开始为1.0显示,结束时0.0隐藏,时间从0.0开始,到0.5结束
              // 关闭图标开始为0.0隐藏,结束时1.0显示,时间从0.5开始,到1.0结束
              ScaleTransition(
                scale: _controller.drive(Tween(begin: 1.0,end: 0.0).chain(CurveTween(curve: const Interval(0.0, 0.5)))),
                child: Icon(Icons.search,size: 40,),
              ),
              ScaleTransition(
                scale: _controller.drive(Tween(begin: 0.0,end: 1.0).chain(CurveTween(curve: Interval(0.5, 1)))),
                child: const Icon(Icons.close,size: 40,),
              ),
            ],
          ),
          ElevatedButton(onPressed: (){
            _controller.forward();
          }, child: const Text('播放')),
          ElevatedButton(onPressed: (){
            _controller.reverse();
          }, child: const Text('返回')),
        ],
      ),
    );
  }
}
相关推荐
孤鸿玉3 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥9 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng1 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭1 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯1 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan1 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓1 天前
Flutter Getx 的页面传参
flutter
火柴就是我2 天前
flutter 之真手势冲突处理
android·flutter
Speed1232 天前
`mockito` 的核心“打桩”规则
flutter·dart