如何在Flutter中设置容器背景色旋转的动画

pdtvr36n 于 2023-06-24 发布在 Flutter

关注(0)|答案(2)|浏览(128)

我有一个带有线性渐变背景的容器，我想从底部到顶部动画颜色旋转，就像乙烯基光盘效果，我试图旋转整个容器，但容器的高度和宽度保持不变，结果并不令人满意。这就是我尝试过的。

import 'package:flutter/material.dart';

class SplashPage extends StatefulWidget {
  const SplashPage({super.key});

  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController;
  final bool _isRotated = false;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
      upperBound: 0.5,
    );

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _animationController.forward();
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: double.infinity,
      child: Stack(
        children: [
          RotationTransition(
            turns: Tween(begin: 0.0, end: 1.0).animate(_animationController),
            child: OverflowBox(
              child: Container(
                decoration: const BoxDecoration(
                  // shape: BoxShape.circle,
                  gradient: LinearGradient(
                      colors: [
                        Color(0xFF212657),
                        Color(0xFF28346D),
                        Color(0xFF33498E),
                        Color(0xFF3A56A1),
                        Color(0xFF3D5BA9),
                        Color(0xFF405AA7),
                        Color(0xFF7D538B),
                        Color(0xFFAE4E74),
                        Color(0xFFD14A64),
                        Color(0xFFE7475A),
                        Color(0xFFEF4757),
                      ],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      stops: [
                        0.02,
                        0.11,
                        0.28,
                        0.41,
                        0.5,
                        0.52,
                        0.73,
                        0.82,
                        0.92,
                        0.95,
                        1
                      ]   
                   ),
                ),
              ),
            ),
          ),
          // ...others widgets
        ],
      ),
    );
  }
}

有什么建议吗？

flutter

来源：https://stackoverflow.com/questions/76493941/how-to-animate-the-background-color-rotation-of-a-container-in-flutter

2条答案

按热度按时间

6xfqseft1#

比如说Here.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Demo'),
        ),
        body: SplashPage(),
      ),
    );
  }
}

class SplashPage extends StatefulWidget {
  const SplashPage({super.key});

  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController;
  final bool _isRotated = false;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 15),
    )..repeat();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      height: 300,
      child: Stack(
        children: [
          ClipOval(
            child: RotationTransition(
              turns: Tween(begin: 0.0, end: 4.0).animate(_animationController),
              child: Container(
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                      colors: [
                        Color(0xFF212657),
                        Color(0xFF28346D),
                        Color(0xFF33498E),
                        Color(0xFF3A56A1),
                        Color(0xFF3D5BA9),
                        Color(0xFF405AA7),
                        Color(0xFF7D538B),
                        Color(0xFFAE4E74),
                        Color(0xFFD14A64),
                        Color(0xFFE7475A),
                        Color(0xFFEF4757),
                      ],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      stops: [
                        0.02,
                        0.11,
                        0.28,
                        0.41,
                        0.5,
                        0.52,
                        0.73,
                        0.82,
                        0.92,
                        0.95,
                        1
                      ]),
                ),
              ),
            ),
          ),

          // ...others widgets
        ],
      ),
    );
  }
}

赞(0）回复(0）举报 2023-06-24

jucafojl2#

我通过设置BoxDecoration的transform参数属性的动画来做到这一点：

_controller = AnimationController(
   vsync: this,
   duration: const Duration(milliseconds: 600),
 );

 _controller.addListener(() {
   setState(() {});
 });

 _animation = Tween(begin: 0.0, end: 3.0).animate(CurvedAnimation(
   parent: _controller,
   curve: Curves.fastOutSlowIn,
 ));

然后：

Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: const [
            Color(0xFF212657),
            Color(0xFF28346D),
            Color(0xFF33498E),
            Color(0xFF3A56A1),
            Color(0xFF3D5BA9),
            Color(0xFF405AA7),
            Color(0xFF7D538B),
            Color(0xFFAE4E74),
            Color(0xFFD14A64),
            Color(0xFFE7475A),
            Color(0xFFEF4757),
          ],
          stops: const [
            0.02,
            0.11,
            0.28,
            0.41,
            0.5,
            0.52,
            0.73,
            0.82,
            0.92,
            0.95,
            1
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          transform: GradientRotation(_animation.value), <-- use the animation value here
        ),
      ),
    ),

赞(0）回复(0）举报 2023-06-24

我来回答

如何在Flutter中设置容器背景色旋转的动画

2条答案

相关问题

热门标签

最新问答