时间戳

首页 > 解决方案 > 如何为在屏幕上移动的图像设置动画？

flutter - 如何为在屏幕上移动的图像设置动画？

问题描述

我有一个固定大小的图像（一张扑克牌），我想编写代码，以便用户看到图像从屏幕的一个部分滑到另一个部分（就像一张正在处理的牌并在表面上移动）。如果可能的话，最好以对不同屏幕尺寸有适度响应的方式这样做。

我所看到或了解的大部分内容都涉及英雄小部件或动画，其中小部件改变大小但保持在同一位置。我在问一些不同的事情。

标签： flutter

解决方案

您可以使用 Flutter 的内置动画 Animation<double>。在 Flutter 中，Animation 对象对屏幕上的内容一无所知。Animation 是一个抽象类，它了解其当前值及其状态（已完成或已解除）。更常用的动画类型之一是Animation<double>.

例如：

// lib/main.dart (AnimatedLogo)
class AnimatedLogo extends AnimatedWidget {
  AnimatedLogo({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Center(
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 10),
        height: animation.value,
        width: animation.value,
        child: FlutterLogo(),
      ),
    );
  }
}

或者您可以将这些包之一导入并使用到您的项目中：

推荐阅读