在 Flutter 中,动画是为了提升用户体验而不可或缺的一部分。在应用程序中,缩放动画是常用的一种交互效果,可以使界面元素在用户交互时具有生动感。为了更好地组织代码和提高复用性,我们可以封装一个缩放动画组件,以下是一个简单的封装示例:
import 'package:flutter/material.dart';
class ScaleAnimationWidget extends StatefulWidget {
final Widget child;
const ScaleAnimationWidget({Key? key, required this.child}) : super(key: key);
_ScaleAnimationWidgetState createState() => _ScaleAnimationWidgetState();
}
class _ScaleAnimationWidgetState extends State<ScaleAnimationWidget>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _scaleAnimation;
void initState() {
super.initState();
// 初始化动画控制器
_animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 300),
);
// 定义缩放动画
_scaleAnimation = Tween<double>(begin: 1.0, end: 0.8).animate(
CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
),
);
}
void dispose() {
_animationController.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (_) {
// 手指按下时启动缩放动画
_animationController.forward();
},
onTapUp: (_) {
// 手指抬起时反向播放缩放动画
_animationController.reverse();
},
onTapCancel: () {
// 手指取消点击时反向播放缩放动画
_animationController.reverse();
},
child: ScaleTransition(
scale: _scaleAnimation,
child: widget.child,
),
);
}
}
在使用缩放动画组件时,只需将要添加动画效果的 Widget 作为 child
传入 ScaleAnimationWidget
中即可。以下是一个简单的示例:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Scale Animation Example'),
),
body: Center(
child: ScaleAnimationWidget(
child: Container(
width: 100,
height: 100,
color: Colors.blue,
child: Center(
child: Text(
'Tap me!',
style: TextStyle(color: Colors.white),
),
),
),
),
),
),
);
}
}
在这个示例中,我们创建了一个简单的 Flutter 应用,包含一个蓝色的正方形,在正方形上应用了缩放动画。当用户点击正方形时,将会触发缩放效果,提供更加生动的用户体验。