在 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 应用,包含一个蓝色的正方形,在正方形上应用了缩放动画。当用户点击正方形时,将会触发缩放效果,提供更加生动的用户体验。