Flutter AnimatedBuilder
创建动画的widget
Key key,
@required Listenable animation,
@required this.builder,
this.child,
animation:Animationcontroller //动画
child 动画作用的view
builder:每次controller值改变都会回到builder 重新生成view
import 'package:flutter/material.dart';
main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/buildAnimation',
routes: {
'/':(context)=>AnimationDemo(),
'/test':(context)=>TestAnimation(),
'/buildAnimation':(context)=>BuildAnimation(),
},
);
}
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
class BuildAnimation extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return BuildAnimationState();
}
}
class BuildAnimationState extends State<BuildAnimation> with TickerProviderStateMixin{
AnimationController animationController;
var animation;
@override
void initState() {
super.initState();
animationController = AnimationController(
duration: Duration(seconds: 2),
vsync: this);
animation = Tween(begin: 20, end: 200).animate(animationController);
animationController.forward(); //放到某个其他地方去启动, 会唤起Builder
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('builder'),),
body: Container(
width: double.infinity,
height: double.infinity,
child: Stack(
children: <Widget>[
AnimatedBuilder(
animation: animation,
builder: (context, Widget child){ //child 可以定义要动的东西....这里先暂时省略了.
return Positioned(
left: animation.value/1.0,
top: animation.value/1.0,
child: Container(child: RaisedButton(
child: Text('abc'),onPressed: (){
print(animation.value);
}),),
);
},
),
],
),
),
);
}
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
class TestAnimation extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return TestAnimationState();
}
}
class TestAnimationState extends State<TestAnimation> with TickerProviderStateMixin{
AnimationController animationController;
Tween positionTween = Tween(begin: 20, end: 200);
var animation;
@override
void initState() {
super.initState();
animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
animation = positionTween.animate(animationController);
animationController.addListener((){
print(animationController.value);
});
animationController.addStatusListener((value){
print('status: $value');
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('test'),),
body: Container(
width: double.infinity,
height: double.infinity,
color: Colors.black12,
child: TestAnimationDemo(animationController: animationController,animation:animation),
),
);
}
}
class TestAnimationDemo extends AnimatedWidget {
AnimationController animationController;
Animation animation;
TestAnimationDemo({this.animationController, this.animation}):super(listenable:animationController);
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Positioned(
left: animation.value/1.0,
top: animation.value/1.0,
child: Container(
child: IconButton(icon: Icon(Icons.forward), onPressed: (){
animationController.forward();
}),
),
),
],
);
}
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////
class AnimationDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimationDemo'),
elevation: 0.0,
),
body: AnimationDemoHome());
}
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////
class AnimationDemoHome extends StatefulWidget {
@override
_AnimationDemoHomeState createState() => _AnimationDemoHomeState();
}
class _AnimationDemoHomeState extends State<AnimationDemoHome>
with TickerProviderStateMixin {
AnimationController animationDemoController;
Animation animation;
Animation animationColor;
CurvedAnimation curve;
@override
void initState() {
super.initState();
animationDemoController = AnimationController(
// value: 32.0,
// lowerBound: 32.0,
// upperBound: 100.0,
duration: Duration(milliseconds: 1000),
vsync: this,
);
curve = CurvedAnimation(
parent: animationDemoController, curve: Curves.bounceOut);
animation = Tween(begin: 32.0, end: 100.0).animate(curve);
animationColor =
ColorTween(begin: Colors.red, end: Colors.red[900]).animate(curve);
// animationDemoController.addListener(() {
// // print('${animationDemoController.value}');
// setState(() {});
// });
animationDemoController.addStatusListener((AnimationStatus status) {
print(status);
});
// animationDemoController.forward();
}
@override
void dispose() {
super.dispose();
animationDemoController.dispose();
}
@override
Widget build(BuildContext context) {
return Center(
child: AnimatedHeart(
animations: [
animation,
animationColor,
],
controller: animationDemoController,
),
);
}
}
class AnimatedHeart extends AnimatedWidget {
final List animations;
final AnimationController controller;
AnimatedHeart({
this.animations,
this.controller,
}) : super(listenable: controller);
@override
Widget build(BuildContext context) {
return IconButton(
icon: Icon(Icons.favorite),
iconSize: animations[0].value,
color: animations[1].value,
onPressed: () {
switch (controller.status) {
case AnimationStatus.completed:
controller.reverse();
break;
default:
controller.forward();
}
},
);
}
}