如何在flutter上制作图标和文本翻译动画

Question

如何在flutter上制作此动画

图标和文本默认状态是图标显示，文本消失当点击图标:图标上升，文字在图标下出现否则图标就会出现在中间，文字就会消失

喜欢这个视频

https://i.imgur.com/S0LXr3o.mp4

https://drive.google.com/file/d/1nwpgjOM_6TUaaVaSdsIZp0oYi4CdWSMR/view?usp=sharing

Answer 1

可以将AnimationController和AnimationBuilder与Stack+Positioned组合使用或者您甚至可以使用具有相同概念的TransformWidget !

我写了一个例子来制作动画

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class AnimationExerciseScreen extends StatefulWidget {
const AnimationExerciseScreen({Key? key}) : super(key: key);
@override
_AnimationExerciseScreenState createState() =>
_AnimationExerciseScreenState();
}
class _AnimationExerciseScreenState extends State<AnimationExerciseScreen>
with SingleTickerProviderStateMixin {
@override
void initState() {
super.initState();
animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 3),
);
animationController.forward();
}
@override
void dispose() {
animationController.dispose();
super.dispose();
}
late final AnimationController animationController;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 100,
child: AnimatedBuilder(
animation: animationController,
builder: (context, child) => Stack(
children: [
Positioned(
top: 0 + (40 * animationController.value),
child: Icon(Icons.cloud),
),
Positioned(
bottom: 0 + (40 * animationController.value),
child: Opacity(
opacity: 1 - animationController.value,
child: Text('Cloud'),
),
),
],
),
),
),
],
),
),
);
}
}

视频链接:https://i.stack.imgur.com/HdAWc.jpg

解释:动画控制器的值为0到1，类型为double，表示动画

的数量百分比。在上面的例子中，我使用3秒的动画控制器的持续时间，所以动画将很容易地看到，所以我使用animationController.forward在initState

播放动画。注意:动画的位置并没有针对性能进行优化，这个例子只是为了理解动画是如何工作的如果你想优化动画，你可以把你的小部件放在AnimationBuilder的子属性中获取更多信息，你可以在这里、这里和这里阅读它们，还有更多!你可以探索大量的文章来提高你的flutter应用程序的性能!