在下面的此动画中实现了中心位置,以使翻译动画同时使用elasticIn
和elasticOut
不幸的是,我实现的不是小部件的中心,我无法设置它
import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: App(),));
class App extends StatefulWidget {
@override
State<StatefulWidget> createState() =>_App();
}
class _App extends State<App> with TickerProviderStateMixin {
AnimationController controller;
Animation<double> animationRadiusIn;
Animation<double> animationRadiusOut;
final double initialRadius = 55.0;
double radius = 0.0;
@override
void initState() {
super.initState();
controller = AnimationController(vsync: this, duration: Duration(seconds: 5));
animationRadiusIn =
Tween<double>(begin: 1.0, end: 0.5).animate(CurvedAnimation(parent: controller, curve: Interval(0.75, 1.0, curve: Curves.elasticIn)));
animationRadiusOut =
Tween<double>(begin: 0.5, end: 1.0).animate(CurvedAnimation(parent: controller, curve: Interval(0.0, 0.25, curve: Curves.elasticOut)));
controller.addListener(() {
setState(() {
if (controller.value >= 0.75 && controller.value <= 1.0) {
radius = animationRadiusIn.value * initialRadius;
} else if (controller.value >= 0.0 && controller.value <= 0.25) {
radius = animationRadiusOut.value * initialRadius;
}
});
});
controller.repeat();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Center(
child: Transform.translate(
offset: Offset(radius,radius),
child:FlutterLogo(),
),
),
],
),
);
}
}
从窗口小部件的中心制作动画,用于elasticIn
和elasticOut
动画
这意味着从Curves.elasticIn
和Curves.elasticOut
动画开始到结束