[Flutter动画笔记]-其他动画

3.其他动画

Hero动画

//第一个页面和第二个页面的Hero包裹的元素尽量是一样的，tag要有唯一性
//first page
Hero(
    tag: path,
    child:
    Img....
)
//second page
 Hero(
    tage: path,
    child:Img...
)
    
//动画变慢
//import 'package:flutter/scheduler.dart' show timeDilation;
//使用：在initState里增加timeDilation=5.0

雪人雪花

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  List<Snowflake> _snowFlakes = List.generate(200, (index) => Snowflake());
  AnimationController _controller;
  int _count = 0;
  _increment() {
    setState(() {
      this._count++;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );
    _controller.repeat();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // ++++ 0000000 -------- 0

    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Container(
            height: double.infinity,
            width: double.infinity,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Colors.blue, Colors.lightBlue, Colors.white],
                    stops: [0.0, 0.7, 0.95])),
            child: AnimatedBuilder(
              animation: _controller,
              builder: (_, __) {
                _snowFlakes.forEach((snow) => snow.fall());
                return CustomPaint(painter: MyPainter(_snowFlakes));
              },
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            _controller.stop();
          },
          child: Icon(Icons.add),
        ));
  }
}

class MyPainter extends CustomPainter {
  List<Snowflake> _snowFlakes;
  MyPainter(this._snowFlakes);
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.white;
    print(size);
    canvas.drawCircle(size.center(Offset(0, 110)), 60.0, paint);
    canvas.drawOval(
        Rect.fromCenter(
          center: size.center(Offset(0, 280)),
          width: 200,
          height: 250,
        ),
        paint);
    _snowFlakes.forEach((snowflake) {
      canvas.drawCircle(
          Offset(snowflake.x, snowflake.y), snowflake.radius, paint);
    });
  }

  @override
  bool shouldRepaint(MyPainter oldDelegate) => true;
}

class Snowflake {
  double x = Random().nextDouble() * 400, y = Random().nextDouble() * 800;
  double radius = Random().nextDouble() * 2 + 2;
  double velocity = Random().nextDouble() * 4 + 2;

  fall() {
    y += velocity;
    if (y > 800) {
      y = 0;
      x = Random().nextDouble() * 400;
      radius = Random().nextDouble() * 2 + 2;
      velocity = Random().nextDouble() * 4 + 2;
    }
  }
}

Flare/Rive动画引用

//import 'package:flare_flutter/flare_actor.dart';
class _MyHomePageState extends State<MyHomePage> {
  String _currentName = "day_idle";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: AnimatedContainer(
          duration: Duration(seconds: 2),
          color: this._currentName == "switch_day" || _currentName == "day_idle"
              ? Colors.white
              : Colors.black,
          child: GestureDetector(
            onTap: () {
              setState(() {
                if (_currentName == "day_idle") {
                  _currentName = "switch_night";
                } else if (_currentName == "night_idle") {
                  _currentName = "switch_day";
                }
              });
            },
            child: FlareActor("assets/switch day to night.flr",
                alignment: Alignment.center,
                fit: BoxFit.contain,
                animation: _currentName, callback: (switchName) {
              if (switchName == "switch_day") {
                setState(() {
                  _currentName = "day_idle";
                });
              } else if (switchName == "switch_night") {
                setState(() {
                  _currentName = "night_idle";
                });
              }
            }),
          ),
        )),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ));
  }
}