脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Flutter动画特效

Flutter实现心动的动画特效

 更新时间：2022年04月08日 10:50:52   作者：艾维码  
为了追求更好的用户体验，有时候我们需要一个类似心跳一样跳动着的控件来吸引用户的注意力。本文将利用Flutter实现这一动画特效，需要的可以参考一下

为了追求更好的用户体验，有时候我们需要一个类似心跳一样跳动着的控件来吸引用户的注意力，这是一个小小的优化需求，但是在 Flutter 里动画两件套就像裹脚布一样臭长，所以需要像封装一个 AnimatedWidget，解放生产力。

实现动画

混入 SingleTickerProviderStateMixin

当创建一个 AnimationController 时，需要传递一个vsync参数，存在vsync时会防止动画的UI不在当前屏幕时消耗不必要的资源。 通过混入 SingleTickerProviderStateMixin 。

class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{}

创建动画

创建一个间隔将近一秒钟的动画控制器：

  late final AnimationController animController;

  @override
  void initState() {
    super.initState();
    animController = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
    }

心跳动画是从小变大，再变小，所以需要一个值大小变化的动画：

  late final Animation<double> animation;

  @override
  void initState() {
    super.initState();
    animController = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
     animation = Tween<double>(
      begin: 0.9,
      end: 1.05,
    );
    }

心跳是不间断的，所以需要监听动画完成时恢复动画，再继续开始动画：

    animation = Tween<double>(
      begin: 0.9,
      end: 1.05,
    ).animate(animController)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          animController.reverse();
        } else if (status == AnimationStatus.dismissed) {
          animController.forward();
        }
      });

使用缩放控件：

Transform.scale(
                scale: animation.value,
                child: const FlutterLogo(
                  size: 80,
                ),
              ),

为了跳动效果，突出跳动动画，把缩回去的时间改短：

   animController = AnimationController(
      reverseDuration: const Duration(milliseconds: 700),
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );

最后别忘了释放资源：

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

抽离成小组件

为了每次用到类似的动画只需引入即可，需要分离动画和显示的组件。新建一个BounceWidget，包含动画，然后可以传入UI组件：

class BounceWidget extends StatefulWidget {
  final Widget child;

  const BounceWidget({
    Key? key,
    required this.child,
  }) : super(key: key);

  @override
  State<BounceWidget> createState() => _BounceWidgetState();
}

继续实现动画：

class _BounceWidgetState extends State<BounceWidget>
    with SingleTickerProviderStateMixin {
  late Animation<double> animation;
  late AnimationController animController;

  @override
  void initState() {
    super.initState();
    animController = AnimationController(
      reverseDuration: const Duration(milliseconds: 700),
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
    animation = Tween<double>(
      begin: 0.9,
      end: 1.05,
    ).animate(animController)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          animController.reverse();
        } else if (status == AnimationStatus.dismissed) {
          animController.forward();
        }
      });
    animController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Transform.scale(
      scale: animation.value,
      child: widget.child,
    );
  }

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

去引入动画：

  Center(
              child: BounceWidget(
                child: FlutterLogo(
                  size: 80,
                ),
              ),

完整代码

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 80, left: 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const <Widget>[
            Text(
              "心动的",
              style: TextStyle(
                fontSize: 28,
                color: Colors.black,
              ),
            ),
            Text(
              "感觉",
              style: TextStyle(
                fontSize: 48,
                color: Colors.black,
              ),
            ),
            Center(
              child: BounceWidget(
                child: FlutterLogo(
                  size: 80,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

以上就是Flutter实现心动的动画特效的详细内容，更多关于Flutter动画特效的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Android开发中Widget的生命周期实例分析

    Android开发中Widget的生命周期实例分析

    这篇文章主要介绍了Android开发中Widget的生命周期,结合实例形式分析了Android开发中Widget生命周期所涉及的常用方法与使用技巧,代码备有详尽的注释便于理解,需要的朋友可以参考下
    2016-02-02
  • 利用Flutter制作经典贪吃蛇游戏

    利用Flutter制作经典贪吃蛇游戏

    Flutter框架可以使用单一代码库为 Android、iOS、Web ，桌面平台构建应用程序。本文将利用它制作经典的贪吃蛇游戏，感兴趣的小伙伴可以了解一下
    2022-04-04
  • Android ScrollView实现滚动超过边界松手回弹

    Android ScrollView实现滚动超过边界松手回弹

    这篇文章主要为大家详细介绍了Android ScrollView实现滚动超过边界松手回弹，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Android 九宫格的实现方法

    Android 九宫格的实现方法

    今天在浏览网页的时候看到了一篇有关九宫格实现的博文，感觉挺有意思。所以自己模仿做了一个，先贴出代码如下：
    2013-05-05
  • Android样式和主题之选择器的实例讲解

    Android样式和主题之选择器的实例讲解

    今天小编就为大家分享一篇关于Android样式和主题之选择器的实例讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-03-03
  • Hook实现Android 微信、陌陌 、探探位置模拟（附源码下载）

    Hook实现Android 微信、陌陌 、探探位置模拟（附源码下载）

    这篇文章主要介绍了Hook实现Android 微信、陌陌 、探探位置模拟（附源码下载）的相关资料,需要的朋友可以参考下
    2017-03-03
  • Android实现气泡布局/弹窗效果 气泡尖角方向及偏移量可控

    Android实现气泡布局/弹窗效果 气泡尖角方向及偏移量可控

    这篇文章主要为大家详细介绍了Android实现气泡布局/弹窗效果，可控制气泡尖角方向及偏移量，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Android实现打开本地pdf文件的两种方式

    Android实现打开本地pdf文件的两种方式

    在现代应用中,PDF格式因其跨平台、稳定性好、展示内容一致等特点,在Android平台上,如何高效地打开本地PDF文件,不仅关系到用户体验,也直接影响到应用的功能丰富度,本文将给大家详细介绍了Android打开本地pdf文件的两种方式,需要的朋友可以参考下
    2025-04-04
  • Android 中通过实现线程更新Progressdialog （对话进度条）

    Android 中通过实现线程更新Progressdialog （对话进度条）

    这篇文章主要介绍了Android 中通过实现线程更新Progressdialog （对话进度条）的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2016-11-11
  • Android实现ViewFlipper图片动画滑动

    Android实现ViewFlipper图片动画滑动

    这篇文章主要为大家详细介绍了Android实现ViewFlipper图片动画滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论