Flutter 动画组件

1.透明动画

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

void main() => runApp(MaterialApp(
      title: "透明动画",
      home: OpAnimation(),
    ));

class OpAnimation extends StatefulWidget {
  @override
  _OpAnimation createState() => _OpAnimation();
}

class _OpAnimation extends State<OpAnimation> {
  bool isVisible = true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('透明动画'),
      ),
      body: Center(
        child: AnimatedOpacity(
          opacity: isVisible ? 1.0 : 0.0,
          duration: Duration(seconds: 2),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.greenAccent,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.enhanced_encryption),
        onPressed: () {
          setState(() {
            isVisible = !isVisible;
          });
        },
      ),
    );
  }
}

2.页面切换动画

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

void main() => runApp(MaterialApp(
      title: "切换动画",
      home: OpAnimation(),
    ));

class OpAnimation extends StatefulWidget {
  @override
  _OpAnimation createState() => _OpAnimation();
}

class _OpAnimation extends State<OpAnimation> {
  bool isVisible = true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text('切换动画'),
        ),
        body: GestureDetector(
          child: Hero(
            tag: '第一张图片',
            child: Image.network(
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597044666348&di=9b3a07d57b47c38dcfbb47dd8daa9c60&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg'),
          ),
          onTap: () {
            Navigator.push(context, MaterialPageRoute(builder: (_) {
              return SecondPage();
            }));
          },
        ));
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Hero(
          tag: '第二张',
          child: Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597044666347&di=14860c64f6eeff9381a0db177d8c257a&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F86%2F10%2F01300000184180121920108394217.jpg"),
        ),
      ),
    );
  }
}