如何在 Flutter 中制作这种动画？答案

【问题标题】：How to make this kind of animation in Flutter?如何在 Flutter 中制作这种动画？
【发布时间】：2019-01-17 10:28:31
【问题描述】：

Video reference

请查看上面的链接以查看动画。

视频中的那个是用 Java 制作的，一个 imageView 使用 UniversalImageLoader 在 2500 毫秒间隔内使用 Handler 更改图像。

Java代码：

int imgs[] = {R.drawable.efone, R.drawable.eftwo, R.drawable.efthree, R.drawable.effour, R.drawable.effive};

backgroundSlide = (ImageView) findViewById(R.id.bgSlide);
backgroundSlide.setImageResource(R.drawable.efone);

final Handler handler = new Handler();
Runnable runnable = new Runnable() {
    int i = 0;

    @Override
    public void run() {
        if (i > imgs.length - 1)
            i = 0;
        backgroundSlide.startAnimation(animAlpha);
        ImageLoader.getInstance().displayImage("drawable://" + imgs[i], backgroundSlide);
        i++;
        handler.postDelayed(runnable, 2500);
    }
};

XML：

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:id="@+id/bgSlide"
    android:src="@drawable/efone" />

【问题讨论】：

我想这就是你所需要的。 link
How to keep changing a Images every 5 seconds in Flutter?的可能重复

标签： flutter flutter-layout flutter-animation

【解决方案1】：

给你提示：

先添加

import 'dart:async';

假设您有图像列表。

List<String> imgURLs = ['img1', img2, img3.....N];

更改图片的代码如下：

int index = 0;
    const duration = const Duration(seconds:2); // change time as per your requirement 
    new Timer.periodic(duration, (timer){
      setState(){
        imageObj = imgURLs[index];
      }
      if(index >= imgURLs.lenght-1) {
        timer.cancel();
      }
      index++;
    });

把这段代码放在你的位置可能是initState方法并使用imageObj来设置你的图像在屏幕上。

imageObj 可能是 Image 类型或基于您的图像列表的任何 type

【讨论】：