使用多个图像创建链式颤动动画答案

【问题标题】：Create chained flutter animation with multiple images使用多个图像创建链式颤动动画
【发布时间】：2021-10-11 20:19:03
【问题描述】：

我想创建一个带有动画的小部件，该动画由显示一系列图像淡入淡出并在完成后重复。像这样的附加动画：

由于我是 Flutter 新手，所以我想知道最好的方法是什么。

【问题讨论】：

标签： flutter flutter-layout flutter-animation

【解决方案1】：

这可以通过AnimatedSwitcher 小部件来完成。它是 Flutter 易于使用的隐式动画小部件之一。它的主要工作是在其子小部件发生变化时自动创建交叉淡入淡出过渡。

您可以通过更改下面的字符串来查看它的运行情况，然后进行热重载。您将看到 200 毫秒的交叉淡入淡出过渡：

AnimatedSwitcher(
  duration: Duration(milliseconds: 200),
  child: Text(
    'Hello', // manually change the text here, and hot reload
    key: UniqueKey(),
  ),
)

一旦您了解了AnimatedSwitcher 的工作原理，您就可以决定如何循环浏览列表图像。为简单起见，我给你举一个使用文本的例子，但想法是一样的。

完整源代码：

import 'dart:async';

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final Timer timer;

  final values = ['A', 'B', 'C', 'D'];
  int _index = 0;

  @override
  void initState() {
    super.initState();
    timer = Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() => _index++);
    });
  }

  @override
  void dispose() {
    timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: AnimatedSwitcher(
          duration: Duration(milliseconds: 200),
          child: Text(
            values[_index % values.length],
            key: UniqueKey(),
          ),
        ),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

您可以使用AnimationController 执行此操作。设置动画控制器后，您只需调用repeat 函数。动画将无限循环。使用AnimationStatusListener，您可以更改颜色和标题文本。

【讨论】：