Flutter 动画之 Tween

在 Flutter 中,有一种动画类型叫 Tween ,它主要是弥补 AnimationController 动画值只能为 double 类型的不足,,所以需要不同类型的变化值,那么就可以使用 Tween 。。结合上篇的 AnimationController 来使用

IntTween

int 类型的动画

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
  AnimationController controller;
  Animation animation;
  Animation<int> intAnim;
  @override
  initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this);
    controller.addListener((){
      print("controller=====${controller.value}");

    });
    controller.addStatusListener((status){
      print("status====$status");
    });
    intAnim = IntTween(begin: 0,end: 200).animate(controller)
      ..addListener(() {
      setState(() {
        // the state that has changed here is the animation object’s value
      });
    })..addStatusListener((status){
      
      });
    controller.forward();
  }
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: const Text('首页')),
        body: Center(
          child: Container(
            width: intAnim.value.toDouble(),
            height: intAnim.value.toDouble(),
            color: Colors.blue,
          ),
        )
    );
  }
  @override
  Ticker createTicker(onTick) {
    return new Ticker(onTick, debugLabel: 'created by $this');
  }
}

ColorTween

颜色渐变动画

Animation<Color> colorAnim = ColorTween(begin: Colors.grey,end: Colors.red).animate(controller)
      ..addListener(() {
        setState(() {
          // the state that has changed here is the animation object’s value
        });
      })..addStatusListener((status){

      });

ReverseTween

反转动画

Animation reverseAnim = ReverseTween(IntTween(begin: 0,end: 200)).animate(controller)
      ..addListener(() {
        print("reverse====${reverseAnim.value}");
        setState(() {
          // the state that has changed here is the animation object’s value
        });
      })..addStatusListener((status){

      });

SizeTween

size类型的动画,如

Animation<Size> sizeAnim = SizeTween(begin: Size(100,100),end: Size(200,200)).animate(controller)
      ..addListener(() {
        print("reverse====${sizeAnim.value}");
        setState(() {
          // the state that has changed here is the animation object’s value
        });
      })..addStatusListener((status){

      });
SizedBox.fromSize(
              child: Container(
                color: Colors.red,
              ),
              size: sizeAnim.value,
            )

RectTween

Rect 类型动画

rectAnim = RectTween(begin: Rect.fromLTRB(100,100,100,100),end: Rect.fromLTRB(100,100,100,100)).animate(controller)
      ..addListener(() {
        print("reverse====${rectAnim.value}");
        setState(() {
          // the state that has changed here is the animation object’s value
        });
      })..addStatusListener((status){

      });

StepTween

步数动画,比如做个计时器

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
  AnimationController controller;
  Animation<int> stepAnim;
  int _stepNum = 10;
  @override
  initState() {
    super.initState();
    controller = AnimationController(
        duration: new Duration(seconds: _stepNum), vsync: this);
    controller.addListener((){
      print("controller=====${controller.value}");

    });
    controller.addStatusListener((status){
      print("status====$status");
    });
    stepAnim = StepTween(begin: _stepNum,end: 0).animate(controller)
      ..addListener(() {
        print("stepAnim====${stepAnim.value}");
        setState(() {
          this._stepNum = stepAnim.value;
        });
      })..addStatusListener((status){

      });
    controller.forward();
  }
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: const Text('首页')),
        body: Column(
          children: <Widget>[
            new Text(
              stepAnim.value.toString(),
              style: new TextStyle(fontSize: 150.0),
            ),
          ],
        )
    );
  }
  @override
  Ticker createTicker(onTick) {
    return new Ticker(onTick, debugLabel: 'created by $this');
  }
}

ConstantTween

常量值动画

Animation<int> constantAnim = ConstantTween<int>(5).animate(controller)
      ..addListener(() {
        print("stepAnim====${constantAnim.value}");
        setState(() {

        });
      })..addStatusListener((status){

      });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 如果我们想要一些东西动画,我们必须改变大小或改变连续帧中对象的位置。例如,在第1帧中,我们的对象位于位置x,在第2...
    开心人开发世界阅读 2,139评论 0 8
  • 基本的动画概念和类 关键点 Animation是Flutter动画库中的核心类, 插入用于引导动画的值. Anim...
    最近不在阅读 1,699评论 2 2
  • 参考来源:https://flutterchina.club/animations/ 动画类型 补间(Tween)...
    _白羊阅读 18,241评论 2 11
  • 动画实现的方式 Flutter中,我们可以简单的把调用this.setState()理解为渲染一帧。那么只要我们不...
    shawn_yy阅读 1,883评论 0 6
  • 不逼自己一把,永远不知道自己有多优秀! 预售前,就曾听说预售特别的辛苦,扫楼发单,各种跑,所以也各种担心,担心自己...
    辉辉Fineyoga阅读 215评论 0 7