flutter运行动画效果

最新推荐文章于 2025-06-08 14:44:44 发布

KENYCHEN奉孝

最新推荐文章于 2025-06-08 14:44:44 发布

阅读量684

点赞数

CC 4.0 BY-SA版权

分类专栏：小工具集合OnALL

本文链接：https://blog.csdn.net/keny88888/article/details/105408688

小工具集合OnALL 专栏收录该内容

204 篇文章

订阅专栏

本文介绍了一个使用Flutter实现的点击动画效果。通过自定义AnimationController和CurvedAnimation，结合RotationTransition，实现了点击元素后的旋转动画。代码中详细展示了如何创建动画控制器，设置动画曲线，并在点击事件中触发动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.flutter动画效果

点击后动画

2.源代码

import 'package:flutter/material.dart';

void main() async {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyApp(),
      ),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );

    animation = CurvedAnimation(
      parent: controller,
      curve: Curves.easeInOutCubic,
    ).drive(Tween(begin: 0, end: 2));
  }

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        controller
          ..reset()
          ..forward();
      },
      child: RotationTransition(
        turns: animation,
        child: Stack(
          children: [
            Positioned.fill(
              child: FlutterLogo(),
            ),
            Center(
              child: Text(
                '请，点击我!',
                style: TextStyle(
                  fontSize: 60.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

3.运行效果如上