Flutter中动画的实现

动画三要素

控制动画的三要素:Animation、Tween、和AnmaitionController
Animation: 产生的值的序列,有CurveAnimation等子类,, 可以将值赋值给Widget的宽高或其他属性,进而控制widget发生变化

Tween:可以定义值的变化范围, 继承自Animatable<T>,每个类都有begin和end两个属性,同时有CurveTween等子类,可以定义值在begin和end间的变化方式。

AnimationController: 动画的控制器,可以设置动画的时长,控制动画开始或者结束等

有两种方式生成Animation:

(1)_controller.drive(_curveTween)

(2)_curveTween.animate(_controller)

Widget动画相关属性

(1)Container的width、height, 控制Widget大小

(2)SlideTransition 的position, 通过Tween<Offset>控制Widget的位移

(3) Align的heightFactor, 控制Widget的展开或收起

(4) AnimatedOpacity的opacity属性,控制Widget的渐隐渐显

两种动画实现方式

Flutter中动画主要有两种实现方式,即通过addListener监听Animation的值的变化, 或者用AnimationBuilder来构建参与动画的Widget。

下面看一个通过addListener实现动画的例子

Dart 复制代码
//动画控制器
final AnimationController controller = new AnimationController(
    duration: const Duration(milliseconds: 500), vsync: this);
//创建一个值的序列,其变化方式为Curve中的淡出效果
final Animation curve =
    new CurvedAnimation(parent: controller, curve: Curves.easeOut);
//通过tween指定值的变化范围为0~255
Animation<int> animation = new IntTween(begin: 0, end: 255).animate(curve);
//监听动画状态的变化: 动画是否结束
..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          controller.forward();
        }
      })
//监听Animation的值的变化,更新UI
..addListener(() {
        setState(() {
          // 将animation.value赋值给指定的Widget的属性
          _opacity = animation.value.toDouble() / 255;
        });      
    });

//动画开始    
controller.forward();

再看下如何通过AnimationBuilder构建动画:

Dart 复制代码
Widget build(BuildContext context) => Center(
        child: AnimatedBuilder(
            animation: animation,
            builder: (context, child) => Container(
                  height: animation.value,
                  width: animation.value,
                  child: child,
                ),
            child: child),
      );
}

不难看出,使用AnimationBuilder来实现动画效果,代码要简洁的多,是更为推荐的实现方式。

相关推荐
bst@微胖子3 小时前
Flutter之路由和导航
flutter
亚洲小炫风4 小时前
flutter 中各种日志
前端·flutter·日志·log
louisgeek6 小时前
Flutter 动画之 Implicit 隐式动画
flutter
勤劳打代码7 小时前
游刃有余 —— Isolate 轻量化实战
flutter·github·dart
RichardLai8811 小时前
[Flutter 基础] - Flutter基础组件 - Text
android·flutter
Ya-Jun21 小时前
常用第三方库精讲:cached_network_image图片加载优化
android·flutter
WDeLiang1 天前
Flutter 环境搭建
flutter·ios·visual studio code
程一个大前端1 天前
【Flutter高效开发】GetX指南:一文学会状态管理、路由与依赖注入
flutter
DEVIL1 天前
Flutter中各类Controller的本质
android·flutter
ak啊1 天前
Flutter UI 组件应用一:布局、交互、动画与弹窗
flutter