【Flutter】动画介绍&隐式动画

最新推荐文章于 2024-06-06 09:30:45 发布
最新推荐文章于 2024-06-06 09:30:45 发布
阅读量961 收藏 12
点赞数 26
分类专栏： Flutter学习 文章标签： flutter android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62511863/article/details/139220881
版权

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

目录

动画基本原理

在任何系统的UI框架中，动画实现的原理都是相同的，即：在一段时间内，快速地多次改变UI外观；由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的动画，这和电影的原理是一样的。

我们将UI的一次改变称为一个动画帧，对应一次屏幕刷新，而决定动画流畅度的一个重要指标就是帧率FPS（Frame Per Second），即每秒的动画帧数。很明显，帧率越高则动画就会越流畅！一般情况下，对于人眼来说，动画帧率超过16 FPS，就基本能看了，超过 32 FPS就会感觉相对平滑，而超过 32FPS，大多数人基本上就感受不到差别了。

由于动画的每一帧都是要改变UI输出，所以在一个时间段内连续的改变UI输出是比较耗资源的，对设备的软硬件系统要求都较高，所以在UI系统中，动画的平均帧率是重要的性能指标，而在Flutter中，理想情况下是可以实现 60FPS 的，这和原生应用能达到的帧率是基本是持平的。

Flutter动画简介

FLutter 中的动画主要分为：隐式动画、显式动画、自定义隐式动画、自定义显式动画和 Hero 动画。

隐式动画

通过几行代码就可以实现隐式动画，由于隐式动画背后的实现原理和繁琐的操作细节都被隐去了，所以叫隐式动画，FLutter 中提供的 AnimatedContainer、AnimatedPadding、AnimatedPositioned、
AnimatedOpacity、AnimatedDefaultTextStyle、AnimatedSwitcher 都属于隐式动画。

隐式动画中可以通过 duration 来配置动画时长，通过 curve （曲线）来配置动画过程，这两个属性在上述组件中都是存在的。

curve

在 Flutter 中，Curves 类提供了一系列预定义的曲线，用于控制动画的速度变化。以下是一些常用的 Curves 组件的值及简单解释：

  1. Curves.linear：

    • 线性曲线，动画以恒定的速度进行，没有加速或减速。

  2. Curves.decelerate：

    • 减速曲线，动画开始时速度较快，然后逐渐减速。

  3. Curves.ease：

    • 标准的加速减速曲线，动画开始和结束时速度较慢，中间时速度较快。

  4. Curves.easeIn：

    • 加速曲线，动画开始时速度较慢，然后逐渐加速。

  5. Curves.easeOut：

    • 减速曲线，动画开始时速度较快，然后逐渐减速。

  6. Curves.easeInOut：

    • 加速减速曲线，动画开始和结束时速度较慢，中间时速度较快，类似于Curves.ease。

  7. Curves.fastOutSlowIn：

    • 快出慢入曲线，动画开始时速度较快，然后逐渐减速到结束。

  8. Curves.bounceIn：

    • 弹簧效果曲线，动画开始时速度为0，然后加速进入动画，到达最大速度后反弹一次。

  9. Curves.elasticIn：

    • 弹性效果曲线，动画开始时速度为0，然后加速进入动画，到达最大速度后会有一些超过目标值的回弹效果。

这些是常用的一些Curves组件的值，通过选择合适的曲线，可以控制动画的速度变化，从而实现不同的动画效果。

AnimatedContainer

AnimatedContainer 的属性和 Container 属性基本是一样的，不同的地方是，当 AnimatedContainer 属性改变的时候会触发动画。

下面的程序中，我们通过浮动按钮来改变 AnimatedContainer 中 transform 的值，以触发动画。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedContainer'),
      ),
      body: Center(
        child: AnimatedContainer(
          duration: const Duration(seconds: 1, milliseconds: 100),
          width: 200,
          height: 200,
          transform: flag
              ? Matrix4.translationValues(0, 0, 0)
              : Matrix4.translationValues(-100, 0, 0),
          color: Colors.blue,
        ),
      ),
    );
  }
}

AnimatedPadding

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedPadding'),
      ),
      body: AnimatedPadding(
        curve: Curves.linear,
        padding: EdgeInsets.fromLTRB(10, flag ? 10 : 200, 0, 0),
        duration: const Duration(seconds: 2),
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ),
    );
  }
}

AnimatedPositioned

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedPositioned'),
      ),
      body: Stack(
        children: [
          ListView(
            children: const [
              ListTile(
                title: Text("我是一个列表"),
              ),
              ListTile(
                title: Text("我是一个列表"),
              ),
              ListTile(
                title: Text("我是一个列表"),
              ),
              ListTile(
                title: Text("我是一个列表"),
              ),
              ListTile(
                title: Text("我是一个列表"),
              ),
              ListTile(
                title: Text("我是一个列表"),
              ),
            ],
          ),
          AnimatedPositioned(
              curve: Curves.linear,
              right: flag ? 10 : 300,
              top: flag ? 10 : 560,
              duration: const Duration(seconds: 1, milliseconds: 500),
              child: Container(
                width: 60,
                height: 60,
                color: Colors.blue,
              )),
        ],
      ),
    );
  }
}

AnimatedOpacity

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedOpacity'),
      ),
      body: Center(
        child: AnimatedOpacity(
          opacity: flag ? 0.2 : 1,
          duration: const Duration(seconds: 1),
          curve: Curves.easeIn,
          child: Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

AnimatedDefaultTextStyle

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedDefaultTextStyle'),
      ),
      body: Center(
        child: Container(
          alignment: Alignment.center,
          width: 300,
          height: 300,
          color: Colors.blue,
          child: AnimatedDefaultTextStyle(
            duration: const Duration(seconds: 1),
            style: TextStyle(fontSize: flag ? 20 : 50, color: Colors.white),
            child: const Text("你好Flutter"),
          ),
        ),
      ),
    );
  }
}

AnimatedSwitcher

Flutter 中的 AnimatedSwitcher 是一个用于在切换子元素时执行动画效果的预置组件。它允许你在切换子元素时使用自定义的过渡效果，从而实现平滑的切换体验。

AnimatedSwitcher 通常用于在切换应用程序界面的不同部分或内容时提供动画效果。例如，当用户点击按钮切换页面或者切换视图时，可以使用 AnimatedSwitcher 来实现页面间的过渡动画。

在使用 AnimatedSwitcher 时，你需要提供新旧子元素，并指定一个过渡效果。当新的子元素被提供时，AnimatedSwitcher 将会在旧的子元素和新的子元素之间执行过渡动画。

要使用 AnimatedSwitcher，通常需要指定以下几个关键属性：

  • child：当前的子元素，即将要显示的子元素。
  • duration：动画的持续时间，用于控制过渡动画的速度。
  • transitionBuilder：一个回调函数，用于定义子元素切换时的过渡效果。该回调函数接受当前子元素和动画对象，并返回一个 Widget，用于实现过渡效果。

通过这些属性，你可以轻松地在 Flutter 应用程序中添加动画效果，从而提升用户体验并增加应用的交互性。AnimatedSwitcher 是 Flutter 框架中 Material 组件库的一部分，因此可以与其他 Material 风格的组件无缝集成。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedSwitcher'),
      ),
      body: Center(
        child: Container(
            alignment: Alignment.center,
            width: 300,
            height: 220,
            color: Colors.orange,
            child: AnimatedSwitcher(
                //当子元素改变的时候会触发动画
                duration: const Duration(seconds: 1),
                child: flag
                    ? const CircularProgressIndicator()
                    : Image.network(
                        "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/5.jpg",
                        fit: BoxFit.cover,
                      ))),
      ),
    );
  }
}

Flutter 中的 CircularProgressIndicator 是一个用于显示循环进度的预置组件。它通常用于在应用程序加载数据、执行长时间任务或执行任何需要显示进度的操作时显示一个圆形的进度条。

CircularProgressIndicator 可以以不同的方式进行定制，包括更改颜色、大小和动画。它是 Flutter 框架中 Material 组件库的一部分，因此在使用 MaterialApp 或 Scaffold 等 Material 风格的组件时很常见。

你可以通过简单的代码来创建一个 CircularProgressIndicator，然后将其放置在应用程序的合适位置。在加载数据或执行任务时，CircularProgressIndicator 将显示一个圆形进度条，直到任务完成为止。

修改 AnimatedSwitcher 的动画效果

通过 AnimatedSwitcher 中的 transitionBuilder 参数可以修改其动画效果。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedSwitcher'),
      ),
      body: Center(
        child: Container(
            alignment: Alignment.center,
            width: 300,
            height: 220,
            color: Colors.orange,
            child: AnimatedSwitcher(
                transitionBuilder: ((child, animation) {
                  //可以改变动画效果
                  return ScaleTransition(
                    scale: animation,
                    child: FadeTransition(
                      opacity: animation,
                      child: child,
                    ),
                  );
                }),
                duration: const Duration(seconds: 1),
                //当子元素改变的时候会触发动画
                child: flag
                    ? const CircularProgressIndicator()
                    : Image.network(
                        "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/5.jpg",
                        fit: BoxFit.cover,
                      ))),
      ),
    );
  }
}

在上面的代码中，transitionBuilder 参数是用于定义 AnimatedSwitcher 在切换子元素时所使用的过渡效果的回调函数。这个回调函数接受两个参数：

  1. child：当前子元素（即将要切换的元素）。
  2. animation：表示当前切换的动画。在这里，animation 是一个 Animation<double> 类型的对象，它描述了从0到1的动画值。

transitionBuilder 回调函数应该返回一个 Widget，这个 Widget 将作为子元素在切换时的动画效果。在上面的代码中，回调函数使用了两种过渡效果：

  1. ScaleTransition：它通过对子元素进行缩放来实现动画效果，缩放的比例由动画值 animation 控制，从而实现子元素的逐渐放大或缩小的效果。
  2. FadeTransition：它通过改变子元素的不透明度来实现淡入淡出的效果，不透明度的变化由动画值 animation 控制，从而实现子元素的逐渐显现或消失的效果。

通过结合使用 ScaleTransition 和 FadeTransition，可以实现更加丰富的过渡效果，使切换子元素时更加平滑和动态。

子组件相同的AnimatedSwitcher

我们知道，AnimatedSwitcher 只有在其子元素发生改变时才会触发动画，那么当子元素不变时，比如子元素为一个 Text 组件，我们只修改里面的内容，不改变组件类型，在这种情况下又该如何触发动画呢？

很简单，我们只要设置一下子元素的 key 值为 UniqueKey()，就可以让 AnimatedSwitcher 认为子元素已经改变。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedSwitcher'),
      ),
      body: Center(
          child: Container(
        alignment: Alignment.center,
        width: 300,
        height: 220,
        color: Colors.blue,
        child: AnimatedSwitcher(
            transitionBuilder: ((child, animation) {
              //可以改变动画效果
              return ScaleTransition(
                scale: animation,
                child: FadeTransition(
                  opacity: animation,
                  child: child,
                ),
              );
            }),
            duration: const Duration(seconds: 1),
            //当子元素改变的时候会触发动画
            child: Text(
              key: UniqueKey(),
              flag ? "凡所过往" : "皆为序章",
              style: Theme.of(context).textTheme.headlineLarge,
            )),
      )),
    );
  }
}
程序喵正在路上
关注
  • 26
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Flutter 平移动画 — 4种实现方式
xhuww的博客
06-20 1万+
Flutter提供了四个Widget可实现平移动画，分别是SlideTransition、AlignTransition、PositionedTransition、RelativePositionedTransition
flutter 中的动画详解 全网最全 动画一篇搞定 一万四千字
半身风雪
08-16 2394
学习 Flutter 中的动画和过渡是构建流畅用户界面的关键部分之一。这里我整理了一个主要的学习路径，可以帮助你逐步掌握 Flutter 中的动画和过渡技术，希望能够帮助到你自定义动画（Custom Animations）是指通过自定义代码来实现特定的动画效果，以满足特定的设计需求。在 Flutter 中，你可以使用来绘制自定义的图形，或使用封装动画逻辑，从而创建高度自定义的动画效果。使用可以绘制自定义的图形和动画。你需要实现类并重写paint方法，在其中定义绘制逻辑。@override。
Flutter实现动画
qq_27909209的博客
07-19 586
f
Flutter 动画详解（一）
2401_84003977的博客
03-31 995
Github地址。
Flutter进阶-动画详解
大圣归来圣骑士清欢的博客
06-27 1332
Flutter动画详解
Flutter 淡入淡出与逐渐出现动画
xhuww的博客
06-20 2798
FadeTransition可实现淡入淡出动画，SizeTransition 可实现Widget逐渐出现的动画。
Flutter Animation动画开发之——Curve动画曲线
野猿新一
11-05 4745
简介 在Flutter Animation动画开发之——最简单的动画入门这篇文章中我们介绍了最简单的动画开发流程 今天我们在该动画的基础上添加动画曲线，默认情况下动画是线性的，可以理解为变化是匀速的，设置动画曲线可以设置动画的变化速率，可以是加速的，也可以是减速的，或者是先加速后减速的，等等 动画曲线用的是CurvedAnimation类，用法如下， parent参数传入一个Animati...
史上最全的Flutter 隐式动画源代码
07-15
在本文中，我们将深入探讨 Flutter 的隐式动画，这是一个强大的工具，可以为用户界面增添流畅性和生动性。根据提供的文件名，我们可以看到一系列的演示示例，这些示例涵盖了 Flutter 中各种类型的隐式动画。我们将...
implicitly_animated_reorderable_list:Flutter ListView在两个列表的更改之间隐式设置动画，并支持对其项进行重新排序
04-29
隐式动画可重排序列表Flutter ListView使用MyersDiff算法隐式计算两个列表之间的变化，并为它们在它们之间设置动画效果。 ImplicitlyAnimatedReorderableList使用完全自定义的动画为其项目添加了重新排序支持。 单击...
Flutter轮播图效果的实现步骤
01-03
隐式动画控件：只需设置组件开始值，结束值，执行时间，比如AnimatedOpacity，AnimatedSize等组件。 显式动画控件：需要设置AnimationController，手动控制动画的执行。显式动画可以完成隐式动画的效果，甚至更加...
flutter FadeTransition实现透明度渐变动画
08-25
主要为大家详细介绍了flutter FadeTransition实现透明度渐变动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
flutter 动画_《Flutter 动画系列一》25种动画组件超全总结
weixin_39568659的博客
11-30 245
动画运行的原理 任何程序的动画原理都是一样的，即：视觉暂留，视觉暂留又叫视觉暂停，人眼在观察景物时，光信号传入大脑神经，需经过一段短暂的时间，光的作用结束后，视觉形象并不立即消失，这种残留的视觉称“后像”，视觉的这一现象则被称为“视觉暂留”。 电影就是依靠视觉暂留，在感官上电影是连续的。使动画有流畅的感觉，帧率至少要达到24帧，即：每秒播放24个图像，因此动画有一个非常关键的性能参数FPS（Fr...
Flutter动画进阶：打造灵动界面的渐显渐隐按钮实战
最新发布
奇妙的Bug之旅
06-06 63
通过这个简短的教程，我们学会了如何在Flutter中使用Tween和来创建一个按钮的渐显渐隐动画。这只是Flutter动画功能的冰山一角，实际开发中，你还可以探索更多高级动画技巧，如以及使用Curve来定制动画节奏等。
Flutter 简单的动画案例(早晨黑夜转换)
的博客
11-30 405
Flutter 简单的动画案例(早晨黑夜转换)
Flutter动画库：animations（路由过渡动画或者页面切换动画）
weixin_41897680的博客
07-21 2024
Flutter动画库：animations（路由过渡动画或者页面切换动画）
Flutter动画Animation开发指南
你的益达啊
04-09 2946
动画Animation开发指南 在Flutter中有哪些类型的动画？ 如何使用动画库中的基础类给widget添加动画？ 如何为动画添加监听器？ 该什么时候使用AnimatedWidget与AnimatedBuilder? 如何使用Hero动画？ 精心设计的动画会让用户界面感觉更直观、流畅，能改善用户体验。 Flutter的动画支持可以轻松实现各种动画类型。许多widget，特别是Material Design widgets， 都带有在其设计规范中定义的标准动画效果，但也可以自定义这些效果。 在
Flutter中的动画
梁婉玲krysliang的博客
08-12 1891
今天来学习一下Flutter中的动画。我们在js+css中，已经习惯用css3中的animation，transform，transition这三个加在一起去做。 我们像前端那样，先从静态的变换中谈论。 一、变换组件 在css中如果要先让一个元素发生平移，使用的是transform：translate，那么在flutter中，已经封装起组件进行使用，只用填入平移的位置就可以。 1、平移 ​ Transform.translate( offset: Offset(...
Flutter动画基础教程
08-25
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的用户界面。本课程以理论+实例的方式带领大家学习动画的基础理论及各种动画特效的编写。 本次课程包含以下内容：动画基本概念动画的本质帧与FPS插值器/估值器动画类型动画相关核心类Animation介绍AnimationController动画管理类CurvedAnimation非线性动画Tween补间值生成类动画事件监听及控制流程Listeners和StatusListeners动画监听动画控制流程动画示例字体放大动画缓动动画遮罩动画数字变化动画图表动画AnimatedOpacity实现渐变效果Hero实现页面切换动画
flutter 动画怎么使用
04-01
Flutter提供了丰富的动画支持，可以通过以下步骤来使用动画： 1.导入动画库 ```dart import 'package:flutter/animation.dart'; ``` 2.创建动画控制器 ```dart AnimationController _controller = AnimationController( duration: Duration(seconds: 1), vsync: this, ); ``` 3.定义动画 ```dart Animation<double> _animation = Tween(begin: 0.0, end: 1.0).animate(_controller); ``` 4.使用动画 ```dart child: AnimatedBuilder( animation: _animation, builder: (BuildContext context, Widget child) { return Transform.scale( scale: _animation.value, child: child, ); }, child: Container( width: 100.0, height: 100.0, color: Colors.red, ), ), ``` 在上面的代码中，我们使用`AnimatedBuilder`在动画过程中重绘widget。`Transform.scale`是一个内置的动画widget，它允许我们在动画过程中缩放widget。我们使用`_animation.value`来获取动画的当前值，并将其作为缩放因子传递给`Transform.scale`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序喵正在路上

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

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

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

打赏作者

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

抵扣说明：

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

余额充值