Анимировать цвет фона каркаса - PullRequest
Новая
       1

Анимировать цвет фона каркаса

1 голос
/ 19 июня 2020

как заголовок, который я пытаюсь изменить с помощью анимации Scaffold background-color. На onPageChanged PageView я запускаю анимацию. Все идет нормально. Проблема в большем количестве цветов. Я имею в виду, я должен взять цвета из API, и когда пользователь прокручивает карту (PageView), я должен соответствовать цвету этой карты.
Есть предложения?

Это текущий код (с превью) для 2 цветов: DartPad .

Заранее спасибо :)

1 Ответ

2 голосов
/ 19 июня 2020

Используйте TweenSequence<Color>

Предполагая, что вес каждого цвета в последовательности одинаков, вы можете найти данный цвет с помощью index / colors.length, как я показываю в onPageChanged обратный вызов.

Учитывая это, _controller.animateTo(index / colors.length) займет время, указанное в AnimationController, для анимации в любом направлении от текущего цвета к новому цвету.

Здесь живая демонстрация

Вот соответствующий код (показывает только то, что было изменено по сравнению с вашим). Я изменил длительность и физику анимации по своему усмотрению. Обязательно используйте то, что вам больше нравится. 

class _HomepageScreenState extends State<HomepageScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Color> animation;

  final colors = <TweenSequenceItem<Color>>[
      TweenSequenceItem(
        weight: 1.0,
        tween: ColorTween(begin: Colors.red, end: Colors.blue),
      ),
      TweenSequenceItem(
        weight: 1.0,
        tween: ColorTween(begin: Colors.blue, end: Colors.green),
      ),
      TweenSequenceItem(
        weight: 1.0,
        tween: ColorTween(begin: Colors.green, end: Colors.yellow),
      ),
      TweenSequenceItem(
        weight: 1.0,
        tween: ColorTween(begin: Colors.yellow, end: Colors.red),
      ),
    ];

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 600),
      vsync: this,
    );

    animation = TweenSequence<Color>(colors).animate(_controller)..addListener(() {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: animation.value,
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: PageView.builder(
                physics: new PageScrollPhysics(),
                itemCount: colors.length,
                controller: PageController(viewportFraction: 0.8),
                onPageChanged: ((int index) {
                  _controller.animateTo(index / colors.length);
                }),
                itemBuilder: (_, i) {
                  return Padding(
                    padding:
                        EdgeInsets.only(left: i % 2 == 0 ? 0 : 15, bottom: 20),
                    child: Container(),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
...