多个Tween同时使用,一边修改控件的大小,一边修改控件的透明度。 同时还有变化的曲线。
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(const LogoApp());
}
class AnimatedLogo extends AnimatedWidget {
AnimatedLogo({super.key, required super.listenable});
final opacityTween = Tween<double>(begin: 0.1, end: 1.0);
final sizeTween = Tween<double>(begin: 0, end: 300);
@override
Widget build(BuildContext context) {
final animation = listenable as Animation<double>;
return Center(
child: Opacity(
opacity: opacityTween.evaluate(animation),
child: Container(
margin: const EdgeInsets.symmetric(vertical: 10),
height: sizeTween.evaluate(animation),
width: sizeTween.evaluate(animation),
child: const FlutterLogo(),
),
),
);
}
}
class LogoApp extends StatefulWidget {
const LogoApp({super.key});
@override
State<LogoApp> createState() => _LogoAppState();
}
class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
late AnimationController controller;
late Animation animation;
@override
void initState() {
controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 3),
);
animation = CurvedAnimation(parent: controller, curve: Curves.easeIn)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
controller.forward();
super.initState();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) => AnimatedLogo(listenable: animation);
}