Flutter中如何实现启动页双圆形旋转动画效果

问题需求 #

需要实现启动页中两个浅色圆形按以下路径循环平滑移动：

• 状态1：右上、左下位置
• 状态2：左上、右下位置
• 状态3：左上部中间、右下部中间位置
• 状态4：左下部中间、右上部中间位置

原代码问题分析 #

原代码使用LinearGradient尝试模拟圆形效果，无法实现两个独立圆形的位置动画，需改为直接绘制两个圆形容器并控制其位置变化。

正确实现代码 #

import 'dart:async';
import 'package:flutter/material.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  int _currentState = 0;
  // 定义四个状态下两个圆形的对齐位置
  final List<List<Alignment>> _circlePositions = [
    [Alignment.topRight, Alignment.bottomLeft],
    [Alignment.topLeft, Alignment.bottomRight],
    [const Alignment(-0.3, -1), const Alignment(0.3, 1)],
    [const Alignment(-0.3, 1), const Alignment(0.3, -1)],
  ];
  // 圆形尺寸，可根据需求调整
  final double _circleSize = 180;

  @override
  void initState() {
    super.initState();
    // 每2秒切换一次状态，循环往复
    Timer.periodic(const Duration(seconds: 2), (timer) {
      setState(() {
        _currentState = (_currentState + 1) % _circlePositions.length;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.splashBlueColor, // 背景深色
      body: Stack(
        children: [
          // 第一个圆形
          AnimatedAlign(
            alignment: _circlePositions[_currentState][0],
            duration: const Duration(seconds: 2),
            curve: Curves.easeInOut,
            child: Container(
              width: _circleSize,
              height: _circleSize,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: AppColors.tealColor.withOpacity(0.8), // 浅色圆形，带透明度
              ),
            ),
          ),
          // 第二个圆形
          AnimatedAlign(
            alignment: _circlePositions[_currentState][1],
            duration: const Duration(seconds: 2),
            curve: Curves.easeInOut,
            child: Container(
              width: _circleSize,
              height: _circleSize,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: AppColors.tealColor.withOpacity(0.8),
              ),
            ),
          ),
          // 中间的Logo
          const Center(
            child: Image.asset(MediaConstants.oneLogo),
          ),
        ],
      ),
    );
  }
}

// 假设的颜色和资源常量类，需替换为你的实际定义
class AppColors {
  static const Color splashBlueColor = Color(0xFF1A237E);
  static const Color tealColor = Color(0xFF4DB6AC);
}

class MediaConstants {
  static const String oneLogo = 'assets/your_logo.png';
}

代码说明 #

1. 使用Stack层叠布局，将两个圆形和Logo放在同一层级，确保Logo始终在最上层。
2. AnimatedAlign负责实现圆形位置的平滑过渡动画，通过alignment属性绑定当前状态的位置。
3. 定义四个状态的位置数组，通过定时器循环切换状态索引，实现循环动画。
4. 圆形使用BoxDecoration设置为圆形，添加透明度让效果更贴近预期。

内容的提问来源于stack exchange，提问作者user1