问题标签 [rive]

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 投票
0 回答
465 浏览

flutter - 如何在某个关键帧开始 Rive 文件的动画

我已经为我想在我的颤振应用程序中实现的这些波浪创建了一个 Flare 动画 - 请参见此处:

https://rive.app/a/Tyrone/files/flare/wavey/preview

我已将文件成功导入到我的应用程序中,它会在我的虚拟设备上显示我喜欢它的方式。以下是我的应用程序布局的基本思路:

屏幕 0 - 初始屏幕
屏幕 1 - 输入电话号码
屏幕 2 - 输入用户名
屏幕 3 - 主应用程序页面

我希望海浪的动画在初始屏幕上停止的地方继续播放。最重要的是,我试图让波浪在每次通过应用程序屏幕时上升。

问题是,我的尝试创造了非常草率的过渡。

我已经在屏幕底部附近的初始页面上设置了波浪的位置,然后在“输入电话号码屏幕”的中间附近设置了波浪的位置。

我尝试使用带有标签的 Hero 作为我的 Flare 资产名称assets/waves.flr,但是这样做有两个问题:

  1. 股票颤​​动导航动画发生,这使得整个过程看起来不一致(你如何禁用这个?)
  2. “输入电话号码屏幕”上的波浪动画不会从“初始屏幕”波浪停止的地方开始。这是意料之中的,因为我觉得我需要访问我的 Flare 文件的关键帧数据,但你是怎么做到的?

一旦解决了这个问题,我只需要弄清楚如何增加屏幕上的波浪高度。我认为这不会太难,但我们会在我解决前两个问题后看到

我希望看到使用 Flare 完美地水平和垂直传播的屏幕之间的平滑过渡,或者如果有人有其他建议,我愿意接受。

现在我看到草率的动画过渡。

0 投票
1 回答
416 浏览

javascript - 如何在 Flare React 包中实现类控制器选项

更新我在底部添加了一个代码框,更详细地说明了我需要做什么。

所以我不太了解 React 中的类是如何工作的,我是新来的 react 并且使用过一点 useState,但从来不知道如何处理一个类。我正在使用这个 react 包,它有一个示例,说明如何使用控制器让您使用现在称为 rive 的耀斑构建的动画交互。https://github.com/2d-inc/Flare-React#readme

当我将鼠标悬停在生成的画布元素上时,我想要实现的是运行不同的动画或再次运行相同的动画。我可以在 flate(rive) 中创建第二个动画,它仍然会在同一个 .flr 文件中输出,然后我应该能够在控制器中引用它并在悬停时运行它,只是坚持如何做那部分,或者甚至让这个控制器工作。需要注意的一件事是我可以让动画在没有控制器的情况下正常运行。

在文档中,他们有这个示例代码

首先什么是构造函数?超级是什么意思?那么他们在构造函数中定义了什么,是某种状态,我如何确定在这里定义什么?

对于初始化,我假设我将它与上面的状态匹配,并以我在flare(rive)中命名的名称获取动画

我不太明白的高级部分是我们将动画设置为this._WalkTime += elapsed;动画运行多长时间?我想我理解应用部分,它将持续时间应用于动画。

接下来它有这个代码

这是我尝试的代码,目前我收到以下错误

TypeError: Cannot set property 'state' of undefined

作为参考,有一个关于如何使动画交互的教程,但它是用于颤振的,但它对那里的 api https://medium.com/rive/building-a-responsive-house-with-flare-flutter-有一些见解31af823ba805

更新

这是我尝试阅读 es6 中的类后的新尝试代码,我仍然需要了解更多信息。

那么我该如何在点击或悬停或任何事件上运行第二个动画。动画现在运行一次,但我不知道如何使用控制器?

好的希望有人可以在这里提供帮助,我制作了一个代码框,以便有人可以看到我想要实现的目标。有两个动画,在页面上你可以看到第一个有一个控制器应该混合​​两者,然后是另外两个动画。我想要发生的是第一个动画运行,然后是第二个在悬停时运行。这里是代码沙箱https://codesandbox.io/s/frosty-water-jnj9m

0 投票
1 回答
176 浏览

android - 带有 Flutter 的 Rive(flare) 文件显示并在 QEMU Android 模拟器上运行良好,但不会在真实 Android 设备中的内置 APK 上显示

颤振医生:

我在 pubspec.yalm 上明确声明了两个耀斑对象:

我已经尝试过flare_flutter: ^2.0.1并且smart_flare依赖,都不适用于内置的 apk。

我在两个不同的 android 设备上进行了测试。flr (rive) 文件仅显示在模拟器上。

https://github.com/ericodex/ericodigos

0 投票
0 回答
481 浏览

flutter - 我可以使用 Rive / Flare 动画作为可下载的 Flutter 资源吗?

我需要在颤振应用程序中下载可下载的动画。这些动画在 apk 编译时是未知的,因此需要下载。我知道可以下载图像或声音文件,将它们解压缩到用户目录(getApplicationDocumentsDirectory)并显示它们。

是否可以下载 rive 动画并显示它们或者动画是否需要使用 APK 编译?

0 投票
2 回答
1484 浏览

flutter - 在颤振网络中运行flare / rive动画时出错

我现在开发了一个应用程序,在颤振网络中使用相同的动画。但它的抛出错误。我已经下载了flutter的二进制文件并将其提供给flare,但它不起作用。相同的代码在android中运行良好,但在flutter web Plzz帮助中抛出错误。错误:

代码:

0 投票
1 回答
1607 浏览

flutter - Flutter Flare, Rive,它可以用作背景吗?

我刚刚为我的颤振小部件成功颤振

但我找不到将其用于背景的示例(容器)

这可能吗?

0 投票
0 回答
132 浏览

flutter - 在 Flutter 中确定 Flare/Rive 对象内组的边界

我有一个大的 Flare/Rive 对象。当用户单击 Flare 对象时,我想知道用户单击的位置以及单击距 Flare 对象树中特定节点的距离以动画化树的单击特征。

如何访问有关 Flare 对象树中节点边界的信息?

0 投票
0 回答
139 浏览

flutter - 带有 Flutter 的 iMessage 效果

有谁知道是否有像 iMessage 中那样的效果的预制包?

https://www.youtube.com/watch?v=gfAPip-QtTc

我特别在寻找类似于五彩纸屑或气球效果的东西(但有心)

如果没有预先制作的包装,那么制作这样的东西(作为覆盖物)的最佳方法是什么。本地做还是使用 Rive 之类的东西容易(https://rive.app/

谢谢!

0 投票
2 回答
1512 浏览

flutter - 在河中改变颜色(耀斑)

我有一个奴才的 .flr 动画。是否可以在 Flutter 应用中动态地单独更改他的身体、裤子、眼睛等的颜色?

在此处输入图像描述

PS Minion 只是我在 rive.app 上找到的一个例子。会有另一个角色有很多不同的部分。

PPS 也许有更好的方法来制作一个简单的动画角色?现在,我有一个带有已定位颜色过滤图像的堆栈,但我想使用 rive 应该更容易。

0 投票
1 回答
136 浏览

flutter - 如何在 Flutter 中以编程方式更改 Rive/Flare 中渐变填充的开始/结束位置?

我有一个简单的球,它使用渐变填充使其看起来像是从一侧点亮:

球

我想在运行时在 Flutter 中修改渐变填充(例如,让它看起来像灯光相对于球移动)。我能够找到这样的坐标:

但是,我找不到修改这些值的方法。我尝试使用Vec2D覆盖这些值,但是它不会改变渲染(可能是因为从这些需要无效的值计算了一些东西?):