示例1
AnimatedOpacity(
duration: const Duration(milliseconds: 500),
opacity: 1.0,
child: Container(
width: 300,
height: 300,
color: Colors.blue,
),
),
),
TweenAnimationBuilder(
duration: const Duration(milliseconds: 1000),
tween: Tween<double>(begin: 0.0, end: 1.0),
builder: (BuildContext context, double value, Widget? child) {
print('---------value:$value');
// flutter: ---------value:0.0
// flutter: ---------value:0.016666
// ...
// flutter: ---------value:0.990012
// flutter: ---------value:1.0
return Opacity(
opacity: value,
child: child,
);
},
child: Container(
width: 300,
height: 300,
color: Colors.blue,
),
)
TweenAnimationBuilder(
duration: const Duration(milliseconds: 1000),
tween: Tween<double>(begin: 1.0, end: 1.2),
builder: (BuildContext context, double value, Widget? child) {
return Container(
width: 300,
height: 300,
color: Colors.blue,
child: Center(
child: Transform.scale(
scale: value,
child: const Text(
'HI',
style: TextStyle(fontSize: 72),
),
),
),
);
},
)
TweenAnimationBuilder(
duration: const Duration(milliseconds: 1000),
tween: Tween<Offset>(begin: const Offset(0, 0), end: const Offset(100, 100)),
builder: (BuildContext context, Offset value, Widget? child) {
return Container(
width: 300,
height: 300,
color: Colors.blue,
child: Transform.translate(
offset: value,
child: const Text(
'HI',
style: TextStyle(fontSize: 72),
),
),
);
},
)
TweenAnimationBuilder(
duration: const Duration(milliseconds: 1000),
tween: Tween<double>(begin: 0.0, end: 6.28),
builder: (BuildContext context, double value, Widget? child) {
return Container(
width: 300,
height: 300,
color: Colors.blue,
child: Center(
child: Transform.rotate(
// 旋转一圈
angle: value,
child: const Text(
'HI',
style: TextStyle(fontSize: 72),
),
),
),
);
},
)
示例2
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Container(
width: 300,
height: 120,
color: Colors.blue,
child: AnimatedCounter(
duration: const Duration(milliseconds: 500),
counter: _counter,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_counter += 1;
});
},
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
class AnimatedCounter extends StatelessWidget {
const AnimatedCounter({
super.key,
required Duration duration,
required int counter,
}) : _counter = counter,
_duration = duration;
final int _counter;
final Duration _duration;
@override
Widget build(BuildContext context) {
return TweenAnimationBuilder(
duration: _duration,
// tween就是在起始值和终止值之间插入若干个数据
tween: Tween<double>(end: _counter.toDouble()),
builder: (BuildContext context, double value, Widget? child) {
print('--------value:$value');
// 取整
final whole = value ~/ 1;
// 小数部分
final decimal = value - whole;
return Stack(
children: [
PositionedDirectional(
top: -100 * decimal, // 0 -> -100
child: Opacity(
opacity: 1.0 - decimal, // 1.0 -> 0.0
child: Text(
'$whole',
style: const TextStyle(fontSize: 100),
),
),
),
PositionedDirectional(
top: 100 - 100 * decimal, // 100 -> 0
child: Opacity(
opacity: decimal, // 0.0 -> 1.0
child: Text(
'${whole + 1}',
style: const TextStyle(fontSize: 100),
),
),
),
],
);
},
);
}
}
参考资料
