Flutter开发--隐式动画

隐性动画

隐式动画是在Flutter中生成响应widget属性变化的简单动画的非常方便的工具。隐式动画无需深入研究复杂的动画控制器和补间，使您能够为小部件的属性设置动画，而无需操心动画的复杂细节。隐式动画有对于单一属性的widget，也有多个属性同时改变的widget。先来看一个简单的修改opacity值的隐式动画widget：AnimatedOpacity。

dart 复制代码

import 'package:flutter/material.dart';

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

  @override
  State<StatefulWidget> createState() => _ImplicitAnimationPageState();
}

class _ImplicitAnimationPageState extends State<ImplicitAnimationPage> {
  double opacity = 0; // 1

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Implicit Animation"),
        actions: [
          TextButton(
              onPressed: () {
                setState(() { // 2
                  opacity = 1;
                });
              },
              child: const Text("Start"))
        ],
      ),
      body: Container(
        color: Colors.yellow,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Align(
              alignment: Alignment.center,
              child: AnimatedOpacity(  // 3
                duration: const Duration(seconds: 2), // 4
                opacity: opacity,
                child: Container(
                    color: Colors.red,
                    child: const Text(
                      "Implicit Animation",
                      style: TextStyle(fontSize: 30),
                    )),
              ),
            )
          ],
        ),
      ),
    );
  }
}

解释如下：

这个需要在一个StatefulWidget里使用，动画组件会监听属性值状态的变化。
setState给opacity赋新的值开始动画。
使用AnimatedOpacity组件来执行动画。还有其他的类似的使用Animated为前缀的动画组件。
动画组件需要duration属性的值来决定动画的执行时间。

AnimatedOpacity是对于一个属性实现动画的动画组件。对于多个属性同时动画的组件叫做AnimatedContainer。类似于一个标准容器，但它具有额外的动画能力。它对诸如大小、颜色和形状等属性的变化进行动画处理。让我们来探讨一个示例，说明使用 AnimatedContainer 小部件在按下按钮时对颜色变化进行动画处理。

隐性动画示例

dart 复制代码

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

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

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

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

  @override
  State<StatefulWidget> createState() => _ImplicitAnimationPageState();
}

class _ImplicitAnimationPageState extends State<ImplicitAnimationPage> {
  double opacity = 0;
  //
  Color color = Colors.white;
  double radius = 0;
  double margin = 0;

  @override
  void initState() {
    super.initState();

    color = randomColor();
    radius = randomBorderRadius();
    margin = randomMargin();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Implicit Animation"),
        actions: [
          TextButton(
              onPressed: () {
                setState(() {
                  opacity = 1;
                });
              },
              child: const Text("Start 1")),
          TextButton(
              onPressed: () {
                setState(() {
                  color = randomColor();
                  radius = randomBorderRadius();
                  margin = randomMargin();
                });
              },
              child: const Text("Start 2"))
        ],
      ),
      body: Container(
        color: Colors.yellow,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Align(
              alignment: Alignment.center,
              child: AnimatedOpacity(
                duration: const Duration(seconds: 2),
                opacity: opacity,
                child: AnimatedContainer( // 1
                    duration: const Duration(milliseconds: 500),
                    margin: EdgeInsets.all(margin),
                    decoration: BoxDecoration(
                        color: color,
                        borderRadius: BorderRadius.circular(radius)),
                    child: const Text(
                      "Implicit Animation",
                      style: TextStyle(fontSize: 30),
                    )),
              ),
            )
          ],
        ),
      ),
    );
  }
}

在这个例子中，AnimatedContainer会有圆角、背景色和margin三个属性的变化。在这里增加了三个随机值生成的方法，对于上述三个值每次点击按钮之后给setState三个随机的值。每次点击按钮都会看到不同的变化。

隐式动画是一种将动画引入到你的 Flutter 应用程序的用户友好型方法，无需动画控制器和补间的复杂性。