13、Flutter动画

动画

本章我们围绕两个动画组件，进入Flutter动画领域：

AnimatedOpacity（实现渐变效果）。
Hero（页面切换动画）。

AnimatedOpacity渐变效果

AnimatedOpacity组件可以自动地在给定的一段时间内改变child的透明底。

属性名	类型	说明
opacity	double	组件透明度。
child	Widget	AnimatedOpacity子元素

示例中floatingActionButton按钮会设置visiable状态值，opacity根据visible状态值从0.0到1.0之间取值。以达到淡入和淡出效果。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    final appTitle = '淡入淡出动画';
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title:appTitle),
    );
  }
}
class MyHomePage extends StatefulWidget {
  final String title;
  const MyHomePage({Key key, this.title}) : super(key: key);
  @override
  _MyHomePage createState() => new _MyHomePage();
}
class _MyHomePage extends State<MyHomePage> {
  // 控制动画显示状态变量
  bool _visible = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title),),
      body: Center(
        // 添加Opacity动画
        child: AnimatedOpacity(
          // 控制opacity值，范围从0.0到1.0
          opacity: _visible ? 0.0 : 1.0,
          // 设置动画时长
          duration: Duration(
            milliseconds: 1000
          ),
          child: Container(
             300.0,
            height: 300.0,
            color: Colors.deepPurple,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          // 控制动画显示状态
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: '显示隐藏',
        child: Icon(Icons.flip),
      ),
    );
  }
}

Hero页面切换动画

页面切换有时需要增加点动画，这样可以增强应用的体验，其中一种做法可以在页面元素里添加Hero组件，就会自带一种过渡的动画效果。

页面切换动画的示例代码如下：

import 'package:flutter/material.dart';
void main() => runApp(
  MaterialApp(
    title: '页面切换动画',
    home: FirstPage(),
  )
);
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('页面切换动画图一'),),
      body: GestureDetector(
        child: Hero(
          tag: '第一张图片',
          child: Image.network('https://img.ivsky.com/img/tupian/li/202003/19/xiliu_pubu-013.jpg'),
        ),
        onTap: (){
          Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));
        },
      ),
    );
  }
}
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('页面切换动画图二'),),
      body: GestureDetector(
        child: Hero(
          tag: '第二张图片',
          child: Image.network('https://img.ivsky.com/img/tupian/li/202003/18/xingkong-009.jpg'),
        ),
        onTap: (){
          Navigator.pop(context);
        },
      ),
    );
  }
}