问题标签 [flutter-animation]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
11686 浏览

dart - 当您一直滚动到 ListView.builder 的顶部时,如何禁用动画

我正在尝试在我的颤振应用程序上列出一个列表。但是,每次我一直滚动到顶部时,都会出现这样的动画:

https://i.stack.imgur.com/Z7mHh.jpg , https://i.stack.imgur.com/EAIyj.jpg

有没有办法隐藏这个动画?

0 投票
3 回答
15914 浏览

animation - 在 Flutter 动画中更新动画值的正确方法是什么?

所以我试图在 Flutter 中创建一个动画,每次用户按下按钮时都需要不同的结果。

我根据Flutter Animations 教程实现了以下代码,并创建了一个函数来更新它。

如您所见,我正在更新_tween's begin:end:但这似乎并没有改变动画。

那么每次用户按下按钮时我应该怎么做才能创建一个“不同的”动画呢?

总体思路是使动画彼此建立在一个随机的新值之上,例如:

  • 第一次旋转:0 -> 10
  • 第二次旋转:10 -> 13
  • 第三次旋转:13 -> 18
  • ... ETC

所以我想知道我是否可以更新动画,或者我应该每次都创建一个新动画?我能想到的另一件事是跟踪位置并每次使用相同的动画(0.0 -> 100.0)作为传输的百分比。

因此,我不会从 10 -> 15 创建一个新动画,而是这样做: currentValue = 10 + (15-10)/100*_animationController.value

0 投票
1 回答
2029 浏览

dart - 如何在 Flutter 中收听抽屉打开/关闭动画

作为 Flutter 的新手,我正在通过重新创建现有的 Android 应用程序来进行学习练习。但是,我无法制作一个“旋转的、不断增长的主页图标”,它的动画应该与抽屉打开/关闭动画同步。

所需的抽屉/主页图标行为如下所示:

在此处输入图像描述

我通过实现在 Android 中做到了这一点

我在 Flutter 中执行此操作的天真方法是使用 ScaleTransition 和 RotationTransition 来监听打开/关闭抽屉的相同动画。

我可以看到 ScaffoldState 有一个 DrawerControllerState,但它是私有的。

即使我能以某种方式访问​​ DrawerControllerState(我不知道如何),我也无法访问 _animationChanged() 和 _controller,因为它们都是 DrawerControllerState 的私有成员。

我觉得我以错误的方式来解决这个问题,并且有一种更好的方法,对 Flutter 来说更自然,我看不到。

请任何人都可以描述实现这一点的 Flutter 方式吗?

0 投票
2 回答
2528 浏览

dart - Flutter Codelab 如何将 SizeTransition 转换为 FadeTransition

我是 Flutter 和 Dart 的新手。希望得到一些关于我被困的教程练习的指南。

我正在关注 Flutter Codelab https://codelabs.developers.google.com/codelabs/flutter/index.html?index=..%2F..index#6并且能够做任何事情。

它要求我们做一个练习是

通过将 Container 包装在 FadeTransition 小部件而不是 SizeTransition 中来创建淡入动画效果。

代码如下

所以我改为 FadeTransition,它需要opacity类型Animation<Double>

我怎样才能创建或发送animation?(上面的代码将animation无法识别)。

0 投票
1 回答
1650 浏览

flutter - 如何在 Flutter 上创建卡拉 OK 风格的歌词播放器

你好,我从颤振开始,我开始作为一个个人项目来创建一个卡拉 OK 风格的应用程序,我正在使用 CupertinoPicker 来自动滚动歌词,使歌曲前进。在此视频中是目前的情况:https ://www.youtube.com/watch?v=hxLOEytLF9s

我有以下信息:

我想知道如何制作字母颜色随着短语进行而变化的动画,动画的持续时间将是当前短语的开始时间与下一个句子的时间之间的差异开始。以及如何添加动画角色。

类似于您在此视频中看到的内容:https ://www.youtube.com/watch?v=iOchBDkNZg8

我怎么能做类似的事情?

0 投票
1 回答
8033 浏览

dart - Flutter 中多个补间动画的问题 - 包含视频

我正在尝试创建的某个动画有一个奇怪的颤振问题。

我正在尝试将图像动画到屏幕上。我希望它在 x 轴上移动,我也希望它慢慢淡入。

所以我想 -PositionedOpacity, 并用补间动画他们的价值。

Positioned和小部件本身都Opacity很好,但是当我将两者结合起来时 - 我得到了一个奇怪的动画,它只是在一段时间后(大约 3 秒)才开始绘制。

我尝试打印animation.value,它似乎很好,从0.0to慢慢爬升1.0- 但云突然出现在大约 3 秒后。

我尝试将它们分离到不同的控制器,认为这可能是罪魁祸首,但不是。

TLDR 视频:

仅不透明动画

仅定位动画

两个动画结合 - 不好

这是小部件的代码:

0 投票
2 回答
12385 浏览

android - 如何使用 Flutter 构建能够拖动到全屏的底部表单小部件?

我想构建一个能够拖动到全屏的底部工作表小部件。

谁能告诉我该怎么做?

谷歌地图有一个小部件可以做到这一点。这是屏幕截图(查看附件图片):

上拉前:

带有向上拖动按钮的底部工作表 上拉后:

向上拖动后的底部工作表

0 投票
1 回答
12894 浏览

flutter - ScrollController animateTo()

我希望水平listView中的选定项目居中,所以我首先计算应该动画到(滚动到)的位置,并且它总是计算正确,但是当我选择一个远离当前选定的项目时,列表无法正确滚动到计算的位置。

代码:

其中 _width 是除所选元素之外的所有元素的宽度,因为它的宽度是 _selectedWidth ,并且水平填充是恒定的.. 并且 index 是所选项目的索引

0 投票
2 回答
6441 浏览

flutter - 在颤动中将小部件滑出屏幕

我目前有一个包含三个元素的小部件——两个按钮和一个文本输入。在文本输入焦点上,我想将按钮滑出屏幕并展开文本输入以占据剩余宽度。

是否有任何颤振组件(动画或其他)我可以用来将组件滑出屏幕并为文本字段扩展设置动画?

0 投票
0 回答
867 浏览

android - 在按钮单击时动态传递无状态小部件作为子项 -Flutter

我一直在尝试创建带有一些导航按钮的背景菜单,每个按钮都有自己的无状态小部件页面。我想根据单击菜单的索引位置传递子小部件页面。

需要根据后层的菜单动作更新前层

后台菜单列表。

backlayer.dart

我想在背景.dart 中传递单击菜单的引用,我将在其中将该引用传递给 panelClass body 作为子级。

背景.dart