隐式动画

欢迎来到隐式动画的 codelab,在这里你将学到:如何使用 Flutter widgets 轻松地对一组特定属性创建动画。

为了充分理解该 codelab,你应该具备以下基本知识:

该 codelab 包括以下内容:

  • 使用 AnimatedOpacity 来创建一个淡入效果。

  • 使用 AnimatedContainer 让尺寸、颜色和边距产生动画变换。

  • 隐式动画及其使用方法的概述。

完成该 codelab 的时间约为:15-30 分钟。

什么是隐式动画?

#

通过使用 Flutter 的 动画库,你可以为 UI 中的组件添加运动和创建视觉效果。你可以使用库中的一套组件来管理动画,这些组件统称为隐式动画隐式动画组件,其名称源于它们都实现了 ImplicitlyAnimatedWidget 类。使用隐式动画,你可以通过设置一个目标值,驱动 widget 的属性进行动画变换;每当目标值发生变化时,属性会从旧值逐渐更新到新值。通过这种方式,隐式动画内部实现了动画控制,从而能够方便地使用— 隐式动画组件会管理动画效果,用户不需要再进行额外的处理。

示例:淡入文字效果

#

下面的示例展示了如何使用名为 AnimatedOpacity 的隐式动画 widget,为已存在的 UI 添加淡入效果。 这个示例开始没有动画效果— 它包含一个由 Material App 组成的主页面,有以下内容:

  • 一张猫头鹰的照片。

  • 一个点击时什么也不做的 Show details 按钮。

  • 照片中猫头鹰的描述文字。

淡入 (初始代码)

#

点击 Run 按钮来运行这个示例:

// Copyright 2019 the Dart project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

import 'package:flutter/material.dart';

const owlUrl =
    'https://raw.githubusercontent.com/flutter/website/main/src/content/assets/images/docs/owl.jpg';

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

  @override
  State<FadeInDemo> createState() => _FadeInDemoState();
}

class _FadeInDemoState extends State<FadeInDemo> {
  @override
  Widget build(BuildContext context) {
    return ListView(children: <Widget>[
      Image.network(owlUrl),
      TextButton(
        child: const Text(
          'Show Details',
          style: TextStyle(color: Colors.blueAccent),
        ),
        onPressed: () => {},
      ),
      const Column(
        children: [
          Text('Type: Owl'),
          Text('Age: 39'),
          Text('Employment: None'),
        ],
      )
    ]);
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: FadeInDemo(),
        ),
      ),
    );
  }
}

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

使用 AnimatedOpacity widget 进行透明度动画

#

这部分包含在 淡入初始代码 中添加一个隐式动画一系列步骤。完成这些步骤后,你还可以运行 淡入完成代码,该代码已经实现了淡入效果。这些步骤概述了如何使用 AnimatedOpacity widget 来添加以下的动画特性:

  • 用户点击 Show details 按钮后,显示猫头鹰的描述文字。

  • 当用户点击 Show details 按钮时,猫头鹰的描述文字淡入。

1. 选择要进行动画的 widget 属性

#

想要创建淡入效果,你可以使用 AnimatedOpacity widget 对 opacity 属性进行动画。将 Column widget 换成 AnimatedOpacity widget:

dart
@override
Widget build(BuildContext context) {
  return ListView(children: <Widget>[
    Image.network(owlUrl),
    TextButton(
      child: const Text(
        'Show Details',
        style: TextStyle(color: Colors.blueAccent),
      ),
      onPressed: () => {},
    ),
    const Column(
      children: [
        Text('Type: Owl'),
        Text('Age: 39'),
        Text('Employment: None'),
      ],
    ),
    AnimatedOpacity(
      child: const Column(
        children: [
          Text('Type: Owl'),
          Text('Age: 39'),
          Text('Employment: None'),
        ],
      ),
    ),
  ]);
}

2. 为动画属性初始化一个状态变量

#

opacity 的初始值设置为 0 ,以便在用户点击 Show details 前隐藏文字:

dart
class _FadeInDemoState extends State<FadeInDemo> {
  double opacity = 0;

  @override
  Widget build(BuildContext context) {
    return ListView(children: <Widget>[
      // ...
      AnimatedOpacity(
        opacity: opacity,
        child: const Column(

3. 为动画设置一个时长

#

除了 opacity 参数以外,AnimatedOpacity 还需要为动画设置 duration。在下面的例子中,动画会以两秒的时长运行:

dart
AnimatedOpacity(
  duration: const Duration(seconds: 2),
  opacity: opacity,
  child: const Column(

4. 为动画设置一个触发器,并选择一个结束值

#

当用户点击 Show details 按钮时,将会触发动画。为了做到这点,我们使用 TextButtononPressed() 方法,在调用时改变 opacity 的状态值为 1。

dart
TextButton(
  child: const Text(
    'Show Details',
    style: TextStyle(color: Colors.blueAccent),
  ),
  onPressed: () => {},
  onPressed: () => setState(() {
    opacity = 1;
  }),
),

淡入 (完成代码)

#

下面的示例是修改后的完成版代码— 运行这个示例,然后点击 Show details 按钮就可以触发动画。

// Copyright 2019 the Dart project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

import 'package:flutter/material.dart';

const owlUrl =
    'https://raw.githubusercontent.com/flutter/website/main/src/content/assets/images/docs/owl.jpg';

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

  @override
  State<FadeInDemo> createState() => _FadeInDemoState();
}

class _FadeInDemoState extends State<FadeInDemo> {
  double opacity = 0;

  @override
  Widget build(BuildContext context) {
    return ListView(children: <Widget>[
      Image.network(owlUrl),
      TextButton(
        child: const Text(
          'Show Details',
          style: TextStyle(color: Colors.blueAccent),
        ),
        onPressed: () => setState(() {
          opacity = 1;
        }),
      ),
      AnimatedOpacity(
        duration: const Duration(seconds: 2),
        opacity: opacity,
        child: const Column(
          children: [
            Text('Type: Owl'),
            Text('Age: 39'),
            Text('Employment: None'),
          ],
        ),
      )
    ]);
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: FadeInDemo(),
        ),
      ),
    );
  }
}

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

小结一下

#

The Fade-in text effect example demonstrates the following features of the AnimatedOpacity widget.

  • AnimatedOpacity 会监听其 opacity 属性的状态变化。

  • opacity 属性改变时, AnimatedOpacity 会自动将 opacity 变化到新值,同时使 widget 进行动画跟随变换。

  • AnimatedOpacity 需要一个 duration 参数来确定新旧 opacity 进行动画变换的时长。

示例:形状变化效果

#

下面的示例将展示如何使用 AnimatedContainer widget 让多个不同类型(doubleColor)的属性(marginborderRadiuscolor)同时进行动画变换。 这个示例开始没有动画效果— 它以一个由 Material App 组成的主页面开始,有以下内容:

  • 一个有 marginborderRadius、和 color 属性的 Container,这些属性每次运行时的值都不同。

  • 一个点击时什么都不做的 Change 按钮。

形状变化 (初始代码)

#

点击 Run 按钮来运行这个示例:

// Copyright 2019 the Dart project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

import 'dart:math';

import 'package:flutter/material.dart';

double randomBorderRadius() {
  return Random().nextDouble() * 64;
}

double randomMargin() {
  return Random().nextDouble() * 64;
}

Color randomColor() {
  return Color(0xFFFFFFFF & Random().nextInt(0xFFFFFFFF));
}

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

  @override
  State<AnimatedContainerDemo> createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  late Color color;
  late double borderRadius;
  late double margin;

  @override
  void initState() {
    super.initState();
    color = randomColor();
    borderRadius = randomBorderRadius();
    margin = randomMargin();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            SizedBox(
              width: 128,
              height: 128,
              child: Container(
                margin: EdgeInsets.all(margin),
                decoration: BoxDecoration(
                  color: color,
                  borderRadius: BorderRadius.circular(borderRadius),
                ),
              ),
            ),
            ElevatedButton(
              child: const Text('Change'),
              onPressed: () => {},
            ),
          ],
        ),
      ),
    );
  }
}

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

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

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

使用 AnimatedContainer 将 color、borderRadius、和 margin 进行动画变换

#

这部分包含在 形状变化初始代码 中添加一个隐式动画的一系列步骤。完成这些步骤后,你还可以运行 形状变化示例,该代码已经实现了淡入效果。

形状变化初始代码 中每个 Container widget 的属性都由一个相关的函数赋值来完成以下的效果:

  • randomColor() 函数为 color 属性生成新的 Color

  • randomBorderRadius() 函数为 borderRadius 属性生成新的 double

  • randomMargin() 函数为 margin 属性生成新的 double

以下步骤会使用 AnimatedContainer 来达到:

  • 每当用户点击 Change 按钮时, colorborderRadiusmargin 都会渐变到新的值。

  • 每当 colorborderRadiusmargin 被设置时,都会进行动画变换到新的值。

1. 添加一个隐式动画

#

Container widget 换成 AnimatedContainer widget:

dart
SizedBox(
  width: 128,
  height: 128,
  child: Container(
  child: AnimatedContainer(
    margin: EdgeInsets.all(margin),
    decoration: BoxDecoration(
      color: color,
      borderRadius: BorderRadius.circular(borderRadius),
    ),
  ),
),

2. 为动画属性设置初始值

#

当属性的新旧值发生变化时,AnimatedContainer 会自动在新旧值之间产生动画效果。通过创建一个 change() 方法,我们将定义当用户点击 Change 按钮时触发变更的行为。 change() 方法可以使用 setState()colorborderRadiusmargin 状态变量设置新值:

dart
void change() {
  setState(() {
    color = randomColor();
    borderRadius = randomBorderRadius();
    margin = randomMargin();
  });
}

@override
Widget build(BuildContext context) {
  // ...

3. 为动画设置触发器

#

每当用户点击 Change 按钮时触发动画,调用 onPressed() 处理器的 change() 方法:

dart
ElevatedButton(
  child: const Text('Change'),
  onPressed: () => {},
  onPressed: () => change(),
),

4. 设置时长

#

在最后,设置新旧值之间变换的时长参数 duration

dart
SizedBox(
  width: 128,
  height: 128,
  child: AnimatedContainer(
    margin: EdgeInsets.all(margin),
    decoration: BoxDecoration(
      color: color,
      borderRadius: BorderRadius.circular(borderRadius),
    ),
    duration: const Duration(milliseconds: 400),
  ),
),

形状变化 (完成代码)

#

下面的示例是修改后的完成版代码— 运行这个示例,然后点击 Change 按钮就可以触发动画。注意:每次你点击 Change 按钮,形状的 marginborderRadiuscolor 都会进行动画变化到新的值。

// Copyright 2019 the Dart project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

import 'dart:math';

import 'package:flutter/material.dart';

const _duration = Duration(milliseconds: 400);

double randomBorderRadius() {
  return Random().nextDouble() * 64;
}

double randomMargin() {
  return Random().nextDouble() * 64;
}

Color randomColor() {
  return Color(0xFFFFFFFF & Random().nextInt(0xFFFFFFFF));
}

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

  @override
  State<AnimatedContainerDemo> createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  late Color color;
  late double borderRadius;
  late double margin;

  @override
  void initState() {
    super.initState();
    color = randomColor();
    borderRadius = randomBorderRadius();
    margin = randomMargin();
  }

  void change() {
    setState(() {
      color = randomColor();
      borderRadius = randomBorderRadius();
      margin = randomMargin();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            SizedBox(
              width: 128,
              height: 128,
              child: AnimatedContainer(
                margin: EdgeInsets.all(margin),
                decoration: BoxDecoration(
                  color: color,
                  borderRadius: BorderRadius.circular(borderRadius),
                ),
                duration: _duration,
              ),
            ),
            ElevatedButton(
              child: const Text('Change'),
              onPressed: () => change(),
            ),
          ],
        ),
      ),
    );
  }
}

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

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

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

使用动画曲线

#

The preceding examples show how:

  • 如何让你通过隐式动画对特定的 widget 属性值进行动画变化。

  • 如何通过 duration 参数设置动画完成所需的时间。

隐式动画还允许你在 duration 时长内控制动画的 速率 变化。用来定义这种速率变化的参数是 Curve,或者 Curves 这些已经预定义的曲线。

前面的例子中没有指定 curve,所以隐式动画默认使用 线性动画曲线

形状变化示例 中添加一个 curve 参数,然后当你将常量 easeInOutBack 传递给 curve 时,观察动画的变化:

dart
SizedBox(
  width: 128,
  height: 128,
  child: AnimatedContainer(
    margin: EdgeInsets.all(margin),
    decoration: BoxDecoration(
      color: color,
      borderRadius: BorderRadius.circular(borderRadius),
    ),
    duration: _duration,
    curve: Curves.easeInOutBack,
  ),
),

现在你已经将 easeInOutBack 作为 curve 的值传递给了 AnimatedContainer,注意:marginborderRadiuscolor 的变化速率遵循 easeInOutBack 所定义的曲线:

小结一下

#

形状变化示例marginborderRadiuscolor 属性值进行了动画变换。注意:AnimatedContainer 可以对它的任意属性进行动画改变,包括那些你没有使用的属性,比如 paddingtransform,甚至是 childalignment! 这个 形状变化示例 建立在 渐变完成代码 的基础上,展现出隐式动画的额外功能。

总结隐式动画的特点:

  • 一些隐式动画(比如 AnimatedOpacity)只能对一个属性值进行动画变换,然而有些(比如 AnimatedContainer)可以同时变换多个属性。

  • 隐式动画会在新旧属性值变换时,自动使用提供的 curveduration 进行动画变换。

  • 如果你没有指定 curve,隐式动画的曲线会默认使用 线性曲线

下一步是什么?

#

恭喜,你已经完成了这个 codelab!如果你想要了解更多,这里有一些其他文章的推荐: