flutter系列之:做一个修改组件属性的动画

简介: 什么是动画呢?动画实际上就是不同的图片连续起来形成的。flutter为我们提供了一个AnimationController来对动画进行详尽的控制,不过直接是用AnimationController是比较复杂的,如果只是对一个widget的属性进行修改,可以做成动画吗?答案是肯定的,一起来看看吧。

简介

什么是动画呢?动画实际上就是不同的图片连续起来形成的。flutter为我们提供了一个AnimationController来对动画进行详尽的控制,不过直接是用AnimationController是比较复杂的,如果只是对一个widget的属性进行修改,可以做成动画吗?

答案是肯定的,一起来看看吧。

flutter中的动画widget

如果你只是希望动画展示widget的属性的变化,比如比如长度,高度,宽度或者颜色等进行动态变化,那么可以直接使用flutter提供的AnimatedContainer。

先来看下AnimatedContainer的定义:

class AnimatedContainer extends ImplicitlyAnimatedWidget

AnimatedContainer继承自ImplicitlyAnimatedWidget,什么是ImplicitlyAnimatedWidget呢?翻译过来就是隐式的动画widget。

这个widget会自动根据widget属性的变化生成对应的动画。在使用上非常的简单。

AnimatedContainers使用举例

AnimatedContainer是一个container,所以它可以包含child属性,但是AnimatedContainer的动画只是针对容器本身来说的,动画并不会应用到它的child中。

所以为了展示widget本身的变化,我们可以给widget设置一个BoxDecoration,设置它的颜色跟borderRadius。

如下所示:

body: Center(
          child: AnimatedContainer(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(10),
            ),
            duration: const Duration(seconds: 1),
            curve: Curves.easeInBack,
          ),
        )

上面的代码会在界面上展示一个长度和宽度都等于200的Container,它的背景是blue,还有一个圆形的borderRadius。

并且我们定义了动画的duration和变动曲线的方式。

接下来我们只需要在setState方法中对AnimatedContainer中的属性进行变化,就会自动触发动画效果。

为了实现这个动画的功能,我们需要把width,height等属性用动态变量存储起来,这样才可以在setState的时候对属性进行变动。

我们将这些属性放在一个StatefulWidget的State中:

double _width = 100;
  double _height = 100;
  Color _color = Colors.blue;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(10);

这样我们在build方法中使用上面定义的属性:

body: Center(
          child: AnimatedContainer(
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: _borderRadius,
            ),
            duration: const Duration(seconds: 1),
            curve: Curves.easeInBack,
          ),
        )

然后在floatingActionButton的onPressed中修改这些属性,从而实现widget属性变化的动画功能:

floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              final random = Random();
              _width = random.nextInt(200).toDouble();
              _height = random.nextInt(200).toDouble();
              _color = Color.fromRGBO(
                random.nextInt(256),
                random.nextInt(256),
                random.nextInt(256),
                1,
              );
              _borderRadius =
                  BorderRadius.circular(random.nextInt(10).toDouble());
            });
          }

最后实现的效果如下:

总结

如果你只是希望使用简单的widget动画,那么AnimatedContainer可能是你最好的选择。

本文的例子:https://github.com/ddean2009/learn-flutter.git

相关文章
|
4月前
|
容器
flutter GestureDetector 的 behavior属性
【8月更文挑战第21天】
87 4
|
3月前
|
传感器 缓存 监控
Stream 组件在 Flutter 中的应用场景有哪些?
Stream 组件在 Flutter 中的应用场景有哪些?
192 58
|
3月前
|
UED 开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
112 49
|
1月前
|
开发工具 UED 容器
Flutter&鸿蒙next 实现长按录音按钮及动画特效
本文介绍了如何在 Flutter 中实现一个带有动画效果的长按录音按钮。通过使用 `GestureDetector` 监听长按手势,结合 `AnimatedContainer` 和 `AnimationController` 实现按钮的动画效果,以及 `flutter_sound` 插件完成录音功能。文章详细讲解了功能需求、实现思路和代码实现,帮助读者逐步掌握这一实用功能的开发方法。
122 5
|
3月前
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
184 60
|
1月前
Flutter 自定义组件继承与调用的高级使用方式
本文深入探讨了 Flutter 中自定义组件的高级使用方式,包括创建基本自定义组件、继承现有组件、使用 Mixins 和组合模式等。通过这些方法,您可以构建灵活、可重用且易于维护的 UI 组件,从而提升开发效率和代码质量。
135 1
|
1月前
|
前端开发 开发者
深入探索 Flutter 鸿蒙版的画笔使用与高级自定义动画
本文深入探讨了 Flutter 中的绘图功能,重点介绍了 CustomPainter 和 Canvas 的使用方法。通过示例代码,详细讲解了如何绘制自定义图形、设置 Paint 对象的属性以及实现高级自定义动画。内容涵盖基本绘图、动画基础、渐变动画和路径动画,帮助读者掌握 Flutter 绘图与动画的核心技巧。
82 1
|
1月前
|
开发工具 UED
Flutter&鸿蒙next中封装一个输入框组件
本文介绍了如何创建一个简单的Flutter播客应用。首先,通过`flutter create`命令创建项目;接着,在`lib`目录下封装一个自定义输入框组件`CustomInput`;然后,在主应用文件`main.dart`中使用该输入框组件,实现简单的UI布局和功能;最后,通过`flutter run`启动应用。本文还提供了后续扩展建议,如状态管理、网络请求和UI优化。
107 1
|
1月前
|
Dart UED
Flutter用户交互组件
Flutter用户交互组件
29 2
|
2月前
动画控制器在 Flutter 中的工作原理
【10月更文挑战第18天】总的来说,动画控制器 `AnimationController` 在 Flutter 中起着关键的作用,它通过控制动画的数值、速度、节奏和状态,实现了丰富多彩的动画效果。理解它的工作原理对于我们在 Flutter 中创建各种精彩的动画是非常重要的。