Flutter,动画渐变背景

问题描述 投票:0回答:1

我知道如何使用渐变背景

LinearGradient()

但是我只是想知道有没有一种方法可以达到动画渐变背景?

您可以将动画渐变背景想像成屏幕没有冻结,仍然有一些流动的动画。由于它是动画,因此很难发布参考图片。

现在唯一想到的是耀斑。但是有什么方法可以使其更自然?

flutter flutter-layout flutter-animation
1个回答
2
投票

您可以使用AnimatedContainer并在动画结束时重置目标颜色。为了实现平稳的过渡,我建议您可以循环显示颜色列表,也可以使用“对齐”进行同样的操作。

示例:

enter image description here

示例的源代码:

import 'package:flutter/material.dart';

class AnimatedGradient extends StatefulWidget {
  @override
  _AnimatedGradientState createState() => _AnimatedGradientState();
}

class _AnimatedGradientState extends State<AnimatedGradient> {
  List<Color> colorList = [
    Colors.red,
    Colors.blue,
    Colors.green,
    Colors.yellow
  ];
  List<Alignment> alignmentList = [
    Alignment.bottomLeft,
    Alignment.bottomRight,
    Alignment.topRight,
    Alignment.topLeft,
  ];
  int index = 0;
  Color bottomColor = Colors.red;
  Color topColor = Colors.yellow;
  Alignment begin = Alignment.bottomLeft;
  Alignment end = Alignment.topRight;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: [
        AnimatedContainer(
          duration: Duration(seconds: 2),
          onEnd: () {
            setState(() {
              index = index + 1;
              // animate the color
              bottomColor = colorList[index % colorList.length];
              topColor = colorList[(index + 1) % colorList.length];

              //// animate the alignment
              // begin = alignmentList[index % alignmentList.length];
              // end = alignmentList[(index + 2) % alignmentList.length];
            });
          },
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: begin, end: end, colors: [bottomColor, topColor])),
        ),
        Positioned.fill(
          child: IconButton(
            icon: Icon(Icons.play_arrow),
            onPressed: () {
              setState(() {
                bottomColor = Colors.blue;
              });
            },
          ),
        )
      ],
    ));
  }
}

© www.soinside.com 2019 - 2024. All rights reserved.