Flutter 动画封装

AnimatedWidget

• AnimatedWidget对addListener和setState进行了封装使得不需要像之前那样设置listener以及setStateFlutter动画，示例如下

import 'package:flutter/material.dart';


class AnimatedLogo extends AnimatedWidget {
  // listenable类似之前写的addListener，此时可以监听animation的value
  AnimatedLogo({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);


  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return Center(
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 10),
        height: animation.value,
        width: animation.value,
        child: FlutterLogo(),
      ),
    );
  }
}


class AnimatedLogoTest extends StatefulWidget {
  @override
  AnimatedLogoTestState createState() => new AnimatedLogoTestState();
}


class AnimatedLogoTestState extends State<AnimatedLogoTest>
    with SingleTickerProviderStateMixin {
  final Duration _duration = const Duration(milliseconds: 3000);
  AnimationController controller;
  Animation<double> animation;


  @override
  build(dynamic ) {
    return new AnimatedLogo(animation: animation);
  }


  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this, duration: _duration);
    animation = Tween(begin: 0.0, end: 300.0).animate(controller);
    controller.forward();
  }


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

AnimatedBuilder

• 我们想让Container中的宽高与animation分离，宽高大小完全由动画去管理，Container只做自己的显示，此时我们需要借助AnimatedBuilder来实现

AnimatedBuilder特点

• 继承于AnimatedWidget，可以直接当作组件来使用，不需要显示添加addListener(), 以及并不需要显示调用setState()
• 只调用动画组件中的build，在复杂布局下性能有所提高

eg:

class AnimatedLogoTest extends StatefulWidget {
  @override
  AnimatedLogoTestState createState() => new AnimatedLogoTestState();
}


class AnimatedLogoTestState extends State<AnimatedLogoTest>
    with SingleTickerProviderStateMixin {
  final Duration _duration = const Duration(milliseconds: 3000);
  AnimationController controller;
  Animation<double> animation;


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return AnimatedBuilder(
      animation: animation,
      child: FlutterLogo(),
      builder: (context, child) {
        return Transform.rotate(angle: animation.value,
          child: child,);
      },
    );
  }


  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this, duration: _duration);
    animation = Tween(begin: 0.0, end: 2 * pi).animate(controller);
    controller.forward();
  }


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