【Flutter】交错动画&自定义动画&Hero动画

于 2024-05-29 14:00:00 发布
阅读量1.1k 收藏 23
点赞数 27
分类专栏： Flutter学习 文章标签： flutter android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62511863/article/details/139221971
版权

🔥 本文由 程序喵正在路上 原创，CSDN首发！
💖 系列专栏：Flutter学习
🌠 首发时间：2024年5月29日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾

目录

交错动画

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

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

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));

    _controller.addListener(() {
      print(_controller.value);
    });
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  void _toggleAnimation() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleAnimation,
        child: const Icon(Icons.refresh),
      ),
      appBar: AppBar(
        title: const Text('AnimatedIcon'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SlidingBox(
              controller: _controller,
              color: Colors.blue[200],
              curve: const Interval(0, 0.2),
            ),
            SlidingBox(
              controller: _controller,
              color: Colors.blue[400],
              curve: const Interval(0.2, 0.4),
            ),
            SlidingBox(
              controller: _controller,
              color: Colors.blue[600],
              curve: const Interval(0.4, 0.6),
            ),
            SlidingBox(
              controller: _controller,
              color: Colors.blue[800],
              curve: const Interval(0.6, 0.8),
            ),
            SlidingBox(
              controller: _controller,
              color: Colors.blue[900],
              curve: const Interval(0.8, 1),
            ),
          ],
        ),
      ),
    );
  }
}

class SlidingBox extends StatelessWidget {
  final AnimationController controller;
  final Color? color;
  final Curve curve;
  const SlidingBox(
      {super.key,
      required this.controller,
      required this.color,
      required this.curve});

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: Tween(begin: const Offset(-0.2, 1), end: const Offset(0.3, 0))
          .chain(CurveTween(curve: Curves.bounceInOut))
          .chain(CurveTween(curve: curve))
          .animate(controller),
      child: Container(
        width: 220,
        height: 60,
        color: color,
      ),
    );
  }
}

在这里插入图片描述

自定义动画

TweenAnimationBuilder自定义隐式动画

每当 Tween 的 end 发生变化的时候就会触发动画。

大小变化的动画：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

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

class _HomePageState extends State<HomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('大小变化'),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      body: Center(
        child: TweenAnimationBuilder(
          tween: Tween(begin: 100.0, end: flag ? 100.0 : 200.0),
          duration: const Duration(seconds: 1),
          builder: ((context, value, child) {
            return Icon(
              Icons.star,
              color: Colors.red,
              size: value,
            );
          }),
        ),
      ),
    );
  }
}

在这里插入图片描述

效果：点击浮动按钮，五角星的大小会变化。

透明度变化的动画：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

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

class _HomePageState extends State<HomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('透明度变化'),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      body: Center(
        child: TweenAnimationBuilder(
          tween: Tween(begin: 0.0, end: flag ? 0.2 : 1.0),
          duration: const Duration(seconds: 1),
          builder: ((context, value, child) {
            return Opacity(
              opacity: value,
              child: Container(color: Colors.blue, width: 200, height: 200),
            );
          }),
        ),
      ),
    );
  }
}

在这里插入图片描述

效果：点击浮动按钮，盒子的透明度会变化。

AnimatedBuilder自定义显式动画

透明度动画：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

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

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    )..repeat(reverse: true); //.. 连缀操作
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('透明度动画'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (BuildContext context, Widget? child) {
            return Opacity(
              opacity: _controller.value,	//从0到1变化	
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
                child: const Text('我是一个Text组件'),
              ),
            );
          },
        ),
      ),
    );
  }
}

在这里插入图片描述

效果：盒子的透明度会自动不停变化。

自定义变化范围：

上面代码中 opacity 的值我们也可以使用 Tween 来设置：

opacity: Tween(begin: 0.5, end: 1.0).animate(_controller).value, //从0.5到1变化

位置变化：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

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

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    )..repeat(reverse: true); //.. 连缀操作
  }

  @override
  Widget build(BuildContext context) {
    Animation y = Tween(begin: -120.0, end: 120.0)
        .chain(CurveTween(curve: Curves.easeIn))
        // .chain(CurveTween(curve: const Interval(0.2, 0.6)))
        .animate(_controller);

    return Scaffold(
      appBar: AppBar(
        title: const Text('位置变化'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (BuildContext context, Widget? child) {
            return Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              transform: Matrix4.translationValues(0, y.value, 0),
              child: const Text('我是一个Text组件'),
            );
          },
        ),
      ),
    );
  }
}

在这里插入图片描述

效果：一个盒子在不停上下跳动。

child优化：

return Scaffold(
  appBar: AppBar(
    title: const Text('child优化'),
  ),
  body: Center(
    child: AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget? child) {
        return Container(
          width: 200,
          height: 200,
          color: Colors.blue,
          transform: Matrix4.translationValues(0, y.value, 0),
          child: child,
        );
      },
      child: const Text('我是一个Text组件'),
    ),
  ),
);

当我们将 Text 组件放在 builder 函数内部时，Text 组件会根据 _animation 的值进行重建。这意味着在每个动画帧上，Text 组件都会被重新构建，即使 Text 内容没有发生变化。这可能会导致不必要的重建和性能损失。

相比之下，将 Text 组件放在 builder 函数外部，则不会在每个动画帧上进行重建。Text 组件只会在初始渲染时创建一次，并且不会随着动画的进度而重建。这样可以减少重建次数，提高性能。

因此，将 Text 组件放在 builder 函数外部是一种更优化的做法，特别是当 Text 内容不会随动画进度而改变时。只有当动画进度对 Text 内容有影响时，才需要将 Text 组件放在 builder 函数内部，以确保 Text 能够根据动画的进度进行更新。

Hero动画

Hero动画的应用一

微信朋友圈点击小图片的时候会有一个动画效果到大图预览，这个动画效果就可以使用Hero 动画实现。

Hero 指的是可以在路由(页面)之间 “飞行” 的 widget，简单来说 Hero 动画就是在路由切换时，有一个共享的 widget 可以在新旧路由间切换。

我们回到之前写的自定义底部导航实现页面切换的代码：

在这里插入图片描述

我们将 home.dart 进行改进，并添加一个 hero.dart 用于演示 Hero 动画，具体代码如下：

main.dart

import 'package:flutter/material.dart';
import './routers/router.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      initialRoute: "/",
      onGenerateRoute: onGenerateRoute,
    );
  }
}

home.dart

import 'package:flutter/material.dart';
import '../../res/listData.dart';

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

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

class _HomePageState extends State<HomePage> {
  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return GestureDetector(
        onTap: () {
          Navigator.pushNamed(context, "/hero", arguments: {
            "imageUrl": value['imageUrl'],
            "author": value['author'],
          });
        },
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
                color: const Color.fromRGBO(233, 233, 233, 0.9), width: 1),
          ),
          child: Column(
            children: [
              Hero(
                tag: value['imageUrl'],	//唯一值
                child: Image.network(value['imageUrl']),
              ),
              const SizedBox(height: 12),
              Text(
                value['title'],
                textAlign: TextAlign.center,
                style: const TextStyle(fontSize: 17),
              ),
            ],
          ),
        ),
      );
    });

    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2, //一行的Widget数量
      crossAxisSpacing: 10.0, //水平方向的子Widget之间的间距
      mainAxisSpacing: 10.0, //垂直方向的子Widget之间的间距
      padding: const EdgeInsets.all(10),
      children: _getListData(),
    );
  }
}

hero.dart

import 'package:flutter/material.dart';

class HeroPage extends StatefulWidget {
  final Map arguments;
  const HeroPage({super.key, required this.arguments});

  @override
  State<HeroPage> createState() => _HeroPageState();
}

class _HeroPageState extends State<HeroPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('详情页面'),
      ),
      body: ListView(
        children: [
          Hero(
            tag: widget.arguments['imageUrl'],	//tag值要与home.dart中一致
            child: Image.network(widget.arguments['imageUrl']),
          ),
          const SizedBox(height: 20),
          Padding(
            padding: const EdgeInsets.fromLTRB(30, 5, 30, 0),
            child: Text(
              widget.arguments['author'],
              style: const TextStyle(fontSize: 22),
            ),
          ),
        ],
      ),
    );
  }
}

router.dart

import 'package:flutter/cupertino.dart';
import '../pages/hero.dart';
import '../pages/tabs/category.dart';
import '../pages/tabs/home.dart';
import '../pages/tabs/message.dart';
import '../pages/tabs/setting.dart';
import '../pages/tabs/user.dart';
import '../pages/tabs.dart';

//1. 定义路由
final Map routes = {
  "/": (context) => const Tabs(),
  "/home": (context) => const HomePage(),
  "/category": (context) => const CategoryPage(),
  "/setting": (context) => const SettingPage(),
  "/message": (context) => const MessagePage(),
  "/user": (context) => const UserPage(),
  "/hero": (context, {arguments}) => HeroPage(arguments: arguments)
};

//2. 配置onGenerateRoute，固定写法
var onGenerateRoute = (settings) {
  // 统一处理
  final String? name = settings.name;
  final Function? pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = CupertinoPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          CupertinoPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
  return null;
};

在这里插入图片描述

点击图片会进入对应的详情页面：

在这里插入图片描述

在这里插入图片描述

Hero动画的应用二

将 hero.dart 换成这个：

import 'package:flutter/material.dart';

class HeroPage extends StatefulWidget {
  final Map arguments;
  const HeroPage({super.key, required this.arguments});

  @override
  State<HeroPage> createState() => _HeroPageState();
}

class _HeroPageState extends State<HeroPage> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.pop(context);
      },
      child: Hero(
        tag: widget.arguments['imageUrl'],
        child: Scaffold(
          //加Scaffold是为了点击屏幕任意位置都可以返回
          backgroundColor: Colors.black,
          body: Center(
            child: AspectRatio(
              aspectRatio: 16 / 9,
              child: Image.network(
                widget.arguments['imageUrl'],
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

配置Hero动画的执行时间

  1. 引入 scheduler.dart

    import 'package:flutter/scheduler.dart';

  2. 设置动画时间

    void initState() {
  super.initState();
  timeDilation = 1.0; //设置动画时间
}

Hero+photo_view实现类似微信朋友圈图片预览

photo_view预览单张图片

  1. 配置依赖

    dependencies:
  photo_view: ^0.15.0

  2. 引入

    import 'package:photo_view/photo_view.dart';

  3. 单张图片的预览

    改进 hero.dart：

    import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';

class HeroPage extends StatefulWidget {
  final Map arguments;
  const HeroPage({super.key, required this.arguments});

  @override
  State<HeroPage> createState() => _HeroPageState();
}

class _HeroPageState extends State<HeroPage> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.pop(context);
      },
      child: Hero(
        tag: widget.arguments['imageUrl'],
        child: Scaffold(
          //加Scaffold是为了点击屏幕任意位置都可以返回
          backgroundColor: Colors.black,
          body: Center(
            child: AspectRatio(
                aspectRatio: 16 / 9,
                child: PhotoView(
                  imageProvider: NetworkImage(widget.arguments['imageUrl']),
                )),
          ),
        ),
      ),
    );
  }
}

photo_view预览多张图片

  1. 配置依赖

    dependencies:
  photo_view: ^0.15.0

  2. 引入

    import 'package:photo_view/photo_view_gallery.dart';

  3. 多张图片的预览

    改造 listData，加个属性：

    List listData = [
  {
    "id": 0,
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/1.png',
  },
  {
    "id": 1,
    "title": 'Childhood in a picture',
    "author": 'Google',
    "imageUrl": 'https://www.itying.com/images/flutter/2.png',
  },
  {
    "id": 2,
    "title": 'Alibaba Shop',
    "author": 'Alibaba',
    "imageUrl": 'https://www.itying.com/images/flutter/3.png',
  },
  {
    "id": 3,
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/4.png',
  },
  {
    "id": 4,
    "title": 'Tornado',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/5.png',
  },
  {
    "id": 5,
    "title": 'Undo',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/6.png',
  },
  {
    "id": 6,
    "title": 'white-dragon',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/7.png',
  }
];

    home.dart 中需要传入 hero.dart 需要的参数：

    在这里插入图片描述
    hero.dart：

    import 'package:flutter/material.dart';
import 'package:photo_view/photo_view_gallery.dart';

class HeroPage extends StatefulWidget {
  final Map arguments;
  const HeroPage({super.key, required this.arguments});

  @override
  State<HeroPage> createState() => _HeroPageState();
}

class _HeroPageState extends State<HeroPage> {
  late List listData = [];
  late int initialPage;

  @override
  void initState() {
    super.initState();
    listData = widget.arguments['listData'];
    initialPage = widget.arguments['initialPage'];
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.pop(context);
      },
      child: Hero(
        tag: widget.arguments['imageUrl'],
        child: Scaffold(
          //加Scaffold是为了点击屏幕任意位置都可以返回
          backgroundColor: Colors.black,
          body: Center(
            child: PhotoViewGallery.builder(
              itemCount: listData.length,
              pageController:
                  PageController(initialPage: initialPage), //点击后显示点击的图片
              builder: ((context, index) {
                return PhotoViewGalleryPageOptions(
                    imageProvider: NetworkImage(listData[index]["imageUrl"]));
              }),
            ),
          ),
        ),
      ),
    );
  }
}

    可以实现点击哪张图片就预览哪张图片，同时可以左右滑动切换图片。

程序喵正在路上
关注
专栏目录
滚动前行的轮子 — Flutter 交错动画应用实例
Flutter 跨平台技术研究
06-19 469
交错动画实际上可以实现非常有创意的动效，本篇实现轮子滚动的效果。
Flutter自定义AppBar&自定义解析单标签HTML富文本
china_2014的博客
08-18 1510
Flutter自定义AppBar&自定义解析单标签HTML富文本 初学Flutter，为了完成一个带有搜索栏、TabBar以及多个图标按钮的布局可以说是绞尽脑汁。原生的AppBar虽然拥有bottom属性，常用的方法也是配合TabBar一起使用，但是并没有能修改顶部的对应的属性，只能设置一个标题栏而已。对于flexibleSpace这个属性，是指处于AppBar和bottom之间的一个和AppBar等高的控件，大概关系是这样的： 而为了达到这种效果： 显然是不太合适的，除非能把AppBar的tit
flutter_staggered_animations:轻松将交错动画添加到ListView，GridView，Column和Row子级
05-13
颤抖的交错动画 轻松将交错动画添加到ListView ， GridView ， Column和Row子级，如所示 展示柜 列表显示 网格视图 柱子 Flutter 2.0和null安全 从1.0.0版本开始， flutter_staggered_animations是null安全的，并且最低要求Dart SDK 2.12.0。 如果要继续使用flutter_staggered_animations但仍无法迁移到null安全，请改用0.1.3版。 安装 相依性 将软件包作为依赖项添加到您的pubspec.yaml文件中。 dependencies : flutter_staggered_animations : " ^1.0.0 " 进口 将程序包导入代码文件中。 import 'package:flutter_staggered_animations/flutter_stagger
Flutter交错动画
qq_42572245的博客
07-08 209
import 'package:flutter/material.dart'; class transitionDemo extends StatefulWidget { @override _transitionDemoState createState() => _transitionDemoState(); } class _transitionDemoState extends State<transitionDemo> with SingleTickerPro
【自学Flutter】32 交错动画的使用
技术宅-Nopi的博客
07-01 383
32 交错动画的使用 1.源代码 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class...
Flutter自定义动画
qq_42572245的博客
07-08 463
import 'package:flutter/material.dart'; class transitionDemo extends StatefulWidget { @override _transitionDemoState createState() => _transitionDemoState(); } class _transitionDemoState extends State<transitionDemo> with SingleTickerPro
flutter动画效果自定义小部件自定义renderobject
08-10
本文将深入探讨如何利用Flutter实现自定义小部件和自定义RenderObject来创建动画效果。 首先，我们要理解Flutter中的小部件（Widget）体系。Flutter通过构建一个树形的小部件结构来定义用户界面。每个小部件都有其...
【Flutter】Hero 动画 ( Hero 实现径向动画 Hero 组件 createRectTween 设置 ).zip
03-30
【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 ) https://hanshuliang.blog.csdn.net/article/details/115309530 博客源码快照
Flutter Animation动画开发之——repeat循环播放
01-20
在Flutter开发中，动画是构建用户界面的重要组成部分，它能够为应用增添动态效果，提高用户体验。本篇文章将深入探讨如何使用`AnimationController`实现动画的循环播放。 在Flutter中，`AnimationController`是控制...
【Flutter动画精粹】揭秘Hero动画的魔力之旅
最新发布
07-04
Flutter是一个由Google开发的开源移动UI框架，用于构建高性能、高保真的iOS和Android应用。Flutter使用Dart语言作为开发语言，它允许开发者用同一套代码库来编译成原生的iOS和Android应用。 Flutter的主要特点包括...
Flutter开发之——动画-自定义动画
我的博客
04-30 435
一 为什么要进行自定义动画 当系统提供的动画不满足业务需求时，就需要我们自己进行自定义动画 通过自定义动画，可以提高自定义组件的能力 二 自定义动画过程 继承StatefulWidget ，完成动画界面的绘制 setState 中动画执行及状态监听并刷新UI dispose释放资源 三 示例 3.1 代码 //入口位置 Future<void> main() async { runApp(Home()); } class Home extends StatelessWidget {
Flutter动画 4 - Hero动画
得不到的永远是骚栋.
05-10 828
概述 花瓣App的转场动画,这么多年还是没变,还是图片转场动画. 网上有很多人实现过相关效果,先前骚栋18年在做iOS项目的时候,也实现的类似的效果,但是全程实现起来还是比较麻烦,需要自己来定义转场动画.在Flutter中也提供了相关效果的组件,那就是 Hero . 接下来我们就来看一下Hero组件实现这种转场动画效果,整体来说还是比较简单的. Hero动画 首先看一下Hero的构建方法. 其中有两个参数是必须要传入的,一个是final Object tag;,是两个路由需要实现Hero动画组件..
【Flutter】使用HeroAnimation（主动画）、自定义补间动画createRectTween 和 GestureDetector 实现丝滑的页面过渡效果
qq_40241320的博客
08-04 1076
使用Flutter的HeroAnimation、CreateRectTween 和GestureDetector实现类AppStore的丝滑过渡效果
Flutter 动画（显式动画、隐式动画、Hero动画、页面转场动画、交错动画）
Lan_Se_Tian_Ma的博客
02-16 1841
当前案例 Flutter SDK版本：3.13.2。
Flutter 深度学习 — 动画（补间动画、Hero动画、交错动画）
qq_27494201的博客
06-21 558
文章目录一丶补间动画二丶Hero动画三丶交错动画喜欢记得点个赞哟，我叫王睿很高兴认识大家！ 学习来源 一丶补间动画 1、动画通知—addListener()和addStatusListener()来添加 import 'packageflutteranimation.dart'; import 'packagefluttermaterial.dart'; class LogoApp extends StatefulWidget { _LogoAppState createState() = new _
【自学Flutter】31 Hero 动画的使用
技术宅-Nopi的博客
07-01 769
31 Hero 动画的使用 1.源代码 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } cl...
Flutter自定义一个加载动画
阿亮的博客
07-31 4910
先上效果图： 自定义loading.dart类 import 'package:flutter/material.dart'; class ProgressDialog extends StatelessWidget { //子布局 final Widget child; //加载中是否显示 final bool loading; //进度提醒内容 fina...
Flutter实战技巧之-自定义Dialog动画
Hear_t的博客
11-04 2508
先来看看效果图： 直接上代码吧 ``` import 'package:flutter/material.dart'; import 'package:flutter_demo/common/custom_dialog.dart'; class DialogAnimationPage extends StatefulWidget { @override State<StatefulWidget> createState() { return DialogAnimatio...
【自学Flutter】32 交错动画的使用，2024阿里Android笔试总结
Python毕设源码程序王哥
04-02 351
找到一套好的视频资料，紧跟大牛梳理好的知识框架进行学习。多练。（视频优势是互动感强，容易集中注意力）你不需要是天才，也不需要具备强悍的天赋，只要做到这两点，短期内成功的概率是非常高的。对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。以上就是总结的关于在面试的一些总结，希望对大家能有些帮助，除了这些面试中需要注意的问题，当然最重要的就是刷题了，这里放上我之前整理的一份超全的面试专题PDF还有。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序喵正在路上

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值