Flutter 缩放动画组件封装与使用

在 Flutter 中,动画是为了提升用户体验而不可或缺的一部分。在应用程序中,缩放动画是常用的一种交互效果,可以使界面元素在用户交互时具有生动感。为了更好地组织代码和提高复用性,我们可以封装一个缩放动画组件,以下是一个简单的封装示例:

dart 复制代码
import 'package:flutter/material.dart';

class ScaleAnimationWidget extends StatefulWidget {
  final Widget child;

  const ScaleAnimationWidget({Key? key, required this.child}) : super(key: key);

  @override
  _ScaleAnimationWidgetState createState() => _ScaleAnimationWidgetState();
}

class _ScaleAnimationWidgetState extends State<ScaleAnimationWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _scaleAnimation;

  @override
  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,
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  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 中即可。以下是一个简单的示例:

dart 复制代码
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

相关推荐
哲科软件7 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风7 小时前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
coder_pig11 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
程序员老刘14 小时前
Android 16开发者全解读
android·flutter·客户端
Jalor14 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
吴Wu涛涛涛涛涛Tao17 小时前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios
九丝城主17 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--中篇
服务器·flutter·macos·vmware
ITfeib17 小时前
Flutter
开发语言·javascript·flutter
昱禹17 小时前
Flutter 3.29+使用isar构建失败
大数据·flutter