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('返回')),
        ],
      ),
    );
  }
}
相关推荐
黑金IT38 分钟前
Dart → `.exe`:Flutter 桌面与纯命令行双轨编译完全指南
flutter
iOS_MingXing44 分钟前
flutter TabBar 设置isScrollable 第一个有间距
flutter
小红星闪啊闪20 小时前
Flutter开发 -- 需要了解的Dart知识
flutter
小李A_Z21 小时前
[Flutter]介绍些flutter的弹窗
flutter
小李A_Z21 小时前
[Flutter]介绍写Flutetr的按钮
flutter
恋猫de小郭1 天前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
tangweiguo030519871 天前
FlutterActivity vs FlutterFragmentActivity:全面对比与最佳实践
android·flutter
ITKEY_1 天前
flutter日期选择国际化支持
开发语言·javascript·flutter
农夫三拳_有点甜1 天前
Flutter SystemChrome 完整指南
flutter
葱段1 天前
【Flutter】TextField 监听长按菜单粘贴点击事件
android·flutter·dart