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