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();
  }
}

©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值