您作为用户的经历多次点击没有动画的按钮，因为您不知道它是否确实发送了您请求的操作？如果按钮有一个轻微的动画告诉你它实际被点击了，你就不需要做了多次同样的事情。
什么是动画？我们为什么要使用它们？
在为您的应用程序创建良好的用户体验时，添加制作精良且流畅的动画至关重要。它们作为用户行为的视觉反馈，也可以提供互动和保证的意义。
动画按钮就是本文的内容，特别是我们将构建一个小型弹跳动画，当用户单击按钮时会触发该动画。
首先，按钮布局
按钮布局基于一个简单的容器，其中心有一个文本小部件。
Widget get _animatedButtonUI => Container(
height: 100,
width: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
boxShadow: [ shadow ],
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFFA7BFE8),
Color(0xFF6190E8),
],
),
),
child: Center(
child: Text(
'tap!',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
);
我们来看看动画
我们需要使用setState（）和dispose（）函数，因此我们将扩展StatefulWidget。
class AnimatedButton extends StatefulWidget {
@override
_AnimatedButtonState createState() => _AnimatedButtonState();
}
class _AnimatedButtonState extends State<AnimatedButton> {
@override
Widget build(BuildContext context) {
return Container();
}
Widget get _animatedButtonUI => ...
}
我们都准备开始制作动画了。
让我们实现SingleTickerProviderStateMixin并定义我们创建动画所需的两个属性。
class _AnimatedButtonState extends State<AnimatedButton> with SingleTickerProviderStateMixin {
double _scale;
AnimationController _controller;
@override
Widget build(BuildContext context) {
return Container();
}
...
}
现在是时候通过重写initState（）来初始化我的_controller并通过覆盖dispose（）函数来处理它
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 200),
lowerBound: 0.0,
upperBound: 0.1,
)
..addListener(() { setState(() {});});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
接下来，我们定义了两个函数，一个用于按下按钮，另一个用于释放按钮时，前者将告诉我们的控制器继续前进，而后者则反过来
void _onTapDown(TapDownDetails details) {
_controller.forward();
}
void _onTapUp(TapUpDetails details) {
_controller.reverse();
}
最后，在我们的构建函数中，我们设置了scale变量，让GestureDetector处理tapDown和tapUp属性，然后使用Transform小部件进行缩放
@override
Widget build(BuildContext context) {
_scale = 1 - _controller.value;
return GestureDetector(
onTapDown: _onTapDown,
onTapUp: _onTapUp,
child: Transform.scale(
scale: _scale,
child: _animatedButtonUI,
),
);
}
这是最终的结果
结论
这是一篇关于如何创建简单而有效的动画的快速文章，我希望这将有助于您改进应用程序用户体验。
全部代码
import 'package:flutter/material.dart';
class AnimatedButton extends StatefulWidget {
@override
_AnimatedButtonState createState() => _AnimatedButtonState();
}
class _AnimatedButtonState extends State<AnimatedButton>
with SingleTickerProviderStateMixin {
double _scale;
AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 200),
lowerBound: 0.0,
upperBound: 0.1,
)..addListener(() {
setState(() {});
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _onTapDown(TapDownDetails details) {
_controller.forward();
}
void _onTapUp(TapUpDetails details) {
_controller.reverse();
}
@override
Widget build(BuildContext context) {
_scale = 1 - _controller.value;
return GestureDetector(
onTapDown: _onTapDown,
onTapUp: _onTapUp,
child: Transform.scale(
scale: _scale,
child: _animatedButtonUI,
),
);
}
Widget get _animatedButtonUI => Container(
height: 100,
width: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
boxShadow: [
BoxShadow(
color: Color(0x80000000),
blurRadius: 30.0,
offset: Offset(0.0, 30.0),
),
],
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFFA7BFE8),
Color(0xFF6190E8),
],
),
),
child: Center(
child: Text(
'tap!',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
);
}
