专栏首页Flutter笔记AnimatedContainer 自带特效的Widget你见过没有?

AnimatedContainer 自带特效的Widget你见过没有?

AnimatedContainer

了解过Android 开发的应该知道,在Android 中给控件设置属性动画还是比较麻烦的,而且多个属性动画一起设置的话更是麻烦,要写很多行代码。

那么在Flutter 中,给Widget 设置动画就完全不需要那么复杂。只需要使用 AnimatedContainer就够了。

AnimatedContainer看名字就应该知道,他是Container + Animation ,也就是带动画的容器。 AnimatedContainer继承于 ImplicitlyAnimatedWidget,我们点开父类的源码,可以看到类名上面的注释:

/// An abstract widget for building widgets that gradually change their /// values over a period of time. /// /// Subclasses' States must provide a way to visit the subclass's relevant /// fields to animate. [ImplicitlyAnimatedWidget] will then automatically /// interpolate and animate those fields using the provided duration and /// curve when those fields change.

简单翻译一下就是:

这个类是用来构建带动画的widget,可以在一段时间内改变其值。 子类必须提供一种方法来访问子类的相关字段以进行动画的处理,当这些字段发生变化的时候,ImplicitlyAnimatedWidget 将使用提供的 duration 和 curve 来自动设置动画。

说的很厉害,来个例子:

实现上图效果非常简单,逻辑代码根本没有,只需要定义好几个数值,随机就ok。

首先定义几个变量:颜色,位置,宽高和下标:

var _colors = [
    Colors.red,
    Colors.green,
    Colors.amber,
    Colors.blue,
    Colors.deepPurple
  ];

  var _alignments = [
    Alignment.center,
    Alignment.bottomLeft,
    Alignment.bottomRight,
    Alignment.topRight,
    Alignment.topLeft,
  ];

  double _weight = 400;
  double _height = 400;

  int index = 0;

然后我们定义一个方法,用来点击的时候调用,随机变换数值:

next() {
    setState(() {
      if(_weight == 400){
        _weight -= 100;
        _height -= 100;
      }else {
        _weight += 100;
        _height += 100;
      }
      index = Random().nextInt(5);
    });
}

最后我们写 build方法来实现页面:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainerDemo'),
      ),
      body: Center(    // 让View在中间
        child: GestureDetector(    // 手势识别控件,用来写点击事件
          onTap: (){
            setState(() {
              next();
            });
          },
          child: AnimatedContainer(    // AnimatedContainer控件
            width: _weight,    //设置上变量里的宽高
            height: _height,
            curve: Curves.fastOutSlowIn,    // 设置插值属性
            duration: Duration(milliseconds: 500),    // 设置时间
            color: _colors[index],    //设置颜色
            alignment: _alignments[index],    // 设置位置
            child: Text(
              'A',
              style: TextStyle(color: Colors.white, fontSize: 50),
            ),
          ),
        ),
      ),
    );
  }

可以看到代码里非常简单,只是设置了一个AnimatedContainer Widget,把属性填上去。

这个时候和我们在 ImplicitlyAnimatedWidget源码中看到的注释一样,只要有值发生了变化,那么 AnimatedContainer就会自动设置插值属性来改变值,这样动画效果就出来了。

小结

使用Flutter 提供的 AnimatedContainer 可以很方便的实现 Widget的动画效果,在做一些简单的动画时可以说是非常方便了。其实还有很多类似于 AnimatedContainer的 Widget,使用方法都类似,就不一一讲解了,如果有不知道在哪看的同学,请移步Flutter官网

本文分享自微信公众号 - Flutter笔记(Flutter_Note)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iOS远程消息推送

    如上是iOS消息推送的详细流程图,主要分为几个过程: (1)App启动过程中,使用UIApplication::registerForRemoteNoti...

    用户5521279
  • Vue+Ionic4,知虎偏行(二)创建及配置项目

    安装ionic相关依赖(其中@ionic/core是组件部分,@ionic/vue是封装成Vue方式调用的接口部分):

    IT晴天
  • Swift:一天学会,三天写项目

    菜鸟教程:覆盖面也是非常可以的 环境 - 基本语法 - 数据类型 - 变量 - 可选项 - 常量 - 字面量 - 运算符 - 条件语句 - 循环 - 字符串 -...

    iOSSir
  • IOS 定位CoreLocation

    import CoreLocation 2 class ViewController:UIViewController,CLLocationManagerDe...

    用户5760343
  • VMware Xcode真机调试

    原因如下:VMware12默认使用usb3.0 ,先给苹果系统关机,然后打开虚拟机设置,更改usb控制器为USB2.0 就可以成功连接了。

    庞小明
  • Xcode添加库文件framework (转)

    首先来看什么是库,库(Library)说白了就是一段编译好的二进制代码,加上头文件就可以供别人使用。

    庞小明
  • IOS 给相机添加滤镜效果

    1 import CoreImage 2 import AVFoundation 3 class ViewController:UIViewControll...

    用户5760343
  • Flutter的js化都在蠢蠢欲动?

    Flutter今年以来热度越来越高,但我觉得学习和试用的人较多,但真正用来做项目的会打个折扣,有些人在观望,有些人则浅尝则止。

    IT晴天
  • 你选择合适的git workflow了吗?

    备注:示例图参考rubygarage.org,项目二中dev,beta,release分支分别对应图中的development,release, maste...

    用户5521279
  • 仿 iOS 列表的编辑功能 - 删除篇

    在 iOS 的设置里面,有一种编辑的效果,进入编辑状态后,列表左边推出圆形的删除按钮,点击后再出现右边确认删除按钮,相当于给用户二次确认。看下在 Android...

    NanBox

扫码关注云+社区

领取腾讯云代金券