flutter动画
2019-03-27 本文已影响0人
淹死丶的鱼
动画
效果图：
1553662782051.gif
flutter中，动画可以当成一个时间内对应值的变化刷新Widget来达到动画的效果类似Android的AnimationValue，需要继承StatefulWidget来使用，在初始化方法中创建动画控制器,在initState中初始化动画控制器
AnimationController _controller;
_controller = AnimationController(
vsync: this, //
lowerBound: 0.0, ///初始值
upperBound: 1.0, ///结束值
duration: Duration(seconds: 3),
添加动画监听
_controller
..addStatusListener((anim) {
print(anim.toString());
})
..addListener(() {
setState(() {});
});
_controller.forward();//启动动画
赋值
color: Colors.blue,
width: _controller.value*300,//上面是0.0-1.0 此处*300
height: _controller.value*300,
但是这样刷新是整个见面都刷新，这跟我们要求的有些出入，我们要求只是单个widget刷新，这是我们可以把需要执行的动画widget剥离出来写成一个单独的widget也可以借助flutter sdk内置的一个类AnimatedBuilder()来实现动画
如果是颜色变化的话可以借助
ColorTween color =
ColorTween(begin: Colors.blue, end: Colors.red);
animate = color.animate(_controller);
AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Container(
child: Text(
"动画",
),
color: animate.value,
width: animation.value * 300,
height: animation.value * 300,
);
}),
如果类中有Controller的对象在销毁的时候需要调用dispose方法
@override
void dispose() {
_controller.dispose();
super.dispose();
}
下面是全部代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<Color> animate;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, //
lowerBound: 0.0, ///初始值
upperBound: 1.0, ///结束值
duration: Duration(seconds: 3),
);
_controller
..addStatusListener((anim) {
print(anim.toString());
})
..addListener(() {
setState(() {});
});
ColorTween color =
ColorTween(begin: Colors.blue, end: Colors.red);
animate = color.animate(_controller);
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Container(
child: Center(
child: Text("动画"),
),
color: animate.value,
width: _controller.value*300,
height: _controller.value*300,
),
),
);
}
}
```
