13Flutter--动画

Posted 2021-06-25

动画

本章我们围绕两个动画组件，进入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(
            width: 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);
        },
      ),
    );
  }
}