likes
comments
collection
share

Flutter动画系列-3

作者站长头像
站长
· 阅读数 26

之前的文章:

其他动画

  1. Hero动画 Hero动画是在页面之间切换的动画

Flutter动画系列-3

由A页面push 到B页面 A页面代码:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('其他动画'),
      ),
      body: Container(
        padding: EdgeInsets.all(10),
        child: Hero(
          tag: 'heroTag',
          child: FlutterLogo()
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: (){
          Navigator.of(context).push(CupertinoPageRoute(builder:(_){
            return HeroPage();
          }));
        },
      ),
    );
  }

B页面代码:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hero动画'),
      ),
      body: Center(
        child: Hero(tag: 'heroTag', child: FlutterLogo(size: 100)),
      ),
    );
  }

可以看到这个页面切换的动画在Flutter中实现起来还是比较简单的,只需要用一个Hero控件就可以,需要注意的是两个页面的Hero控件的tag 必须是相同的。在这里我在两个页面中用Hero包裹的子child 是一样,其实换成不一样的控件也可以,只不过效果上可能就不太好看了。

2.其他自定义动画

3.最后做了一个小动画

使用了AnimatedBuilder结合Canvas

Flutter动画系列-3

AnimationController _controller;
  List <Snow> snowList = List.generate(100, (index) => Snow());

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

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('其他动画'),
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.blue,
        child: AnimatedBuilder(
          animation: _controller,
          builder: (_,__){
            return CustomPaint(
              painter: MyPainter(snowList: snowList),
            );
          },
        ),
      ),
    );
  }
class MyPainter extends CustomPainter {

  final List <Snow> snowList;
  MyPainter({this.snowList}) : super ();

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = Colors.white;
    canvas.drawCircle(size.center(Offset(0, 150)), 50, paint);
    canvas.drawOval(Rect.fromCenter(center: size.center(Offset(0, 300)), width: 200, height: 250), paint);

    snowList.forEach((snow) {
      snow.fail();
      canvas.drawCircle(Offset(snow.x, snow.y), snow.circle, paint);
    });
  }

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

///定义一个雪花实体
class Snow {
  double x = Random().nextDouble() * 400;///x坐标
  double y = Random().nextDouble() * 850;///y坐标
  double circle = Random().nextDouble() * 2 + 2;///半径
  double v = Random().nextDouble() * 4 + 2;///下落速度

  ///开始下落
  fail () {
    y = y + v;
    if (y > 850){
      y = -50;
      x = Random().nextDouble() * 400;
      circle = Random().nextDouble() * 2 + 2;
      v = Random().nextDouble() * 4 + 2;
    }
  }
}