问题标签 [react-animated]

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 回答
748 浏览

javascript - 使用 panresponder 在按钮点击上刷卡

我正在尝试制作一个类似于 tinder 的应用程序组件来刷卡,当我用手指刷卡时它工作正常,但是,我也想在按钮单击时实现相同的效果。到目前为止,我已经使用 Panresponder 来创建滑动动作,下面是我的代码

}

我想做一个this.swipeRight()可以刷卡的功能,就像我用手指刷卡一样,我尝试过创建一个类似的功能,但它只是立即移除最上面的卡,然后它停止工作

}

任何帮助将不胜感激,我在地图函数中有panresponder

0 投票
0 回答
1562 浏览

animation - 在 ReactNative 中是否可以在动画值插值的输入/输出范围内使用动态值?

在 React Native 中,我试图创建一个像这样的插值:

哪里imageLocation是动态值(由视图的 onLayout 更新)

但在我看来,animateImage样式是在调用之前创建和初始化的,因此它忽略了稍后更新onLayout的动态值。imageLocation

是否可以让输入或输出范围取决于动态更新的值?

0 投票
1 回答
1920 浏览

react-native - 水平 React Native ListView 的“粘性”中心元素

我针对此问题的完整源代码发布为 Expo 应用程序: https : //exp.host/@kevinoldlifeway/swipe-scrollview-of-webviews 以及 Github https://github.com/kevinold/swipe-scrollview -of-webviews

我正在 React Native 中构建一个书本视图。使用 ScrollView,我想左右滑动以浏览可能有几百到几千个标题的页面。

既然是这种情况,我的目标是只使用最少量的数据,以便用户能够在页面之间滑动,查看前一页和下一页。

我正在加载一个 3 元素数组,如下所示:

这将由 Redux 在 state 中更新(为了简单起见,这里没有使用),并且会重新渲染和重新聚焦列表。

我的目标是我ScrollView总是在“当前”页面上“居中”。

页面滚动到上一页和下一页由handleScroll加载适当的预计算数组的方法处理,以便当前页面保持焦点,但上一页和下一页(屏幕外)会适当更新。

我尝试使用以下组合来平衡“当前”页面:

contentOffset={{ x: width, y: 0 }}ScrollView

我也试过scrollTo在回调之后this.setState,但没有任何运气。

我想知道这种“居中”是否可以通过使用Animated.

0 投票
1 回答
1807 浏览

javascript - 如何在 react-native 中插入 Animated 值以生成布尔值或字符串?

我碰巧有一个从 -1 到 1 的动画,我想将这些值转换为以下 2 个字符串:

如果值为负,则为“上一个” 。

如果值为正,则为“下一步” 。

问:我如何使用this.state.anim包含的值来决定是进入下一个屏幕还是上一个屏幕。

更多信息:

this.state.anim从 a 接收它的值PanGesture,我this.state.anim也用于许多其他事情,所以不在这里使用它会很遗憾。

0 投票
0 回答
641 浏览

react-native - 动画值的自定义插值函数

我正在尝试将 X 值从 0 设置为 PI,将 Y 值从 0 设置为 sin(x)。

就像是:

我尝试使用以下方法插入 X 值:

但我仍然得到一个线性近似值并大大减慢了动画速度。

如何以相同的方式Animated.addAnimated.divide工作方式从自定义函数组成 Animated.Value?

0 投票
1 回答
2195 浏览

javascript - 如何使用动画图像进行 React Native 倒计时?

我正在尝试使用一些图像创建一个反应原生动画作为倒计时,如下所示:

我找到了一种通过 react animatable 来做到这一点的方法,但结果并不能说服我,如果有更好的方法,请告诉我。

我想每次我遇到一个新的元素渲染开始倒计时我说反应动画以使每个数字改变图像编号的迭代 3 缓和下来,这不是解决我遇到的问题的自然方法。

暂时没用redux,以后可能会补充。状态的属性:时间,当前开始时间尚未使用。

我所需要的只是在我展示的图像中发生倒计时的效果,在一个定义明确的动画中。

我认为快到了,但肯定有更好的方法来解决这个问题,任何建议都会受到好评,即使它只是作为指导。我也尝试过 react-native-animate-number 但没有运气......

提前致谢

0 投票
2 回答
7921 浏览

reactjs - 反应原生动画滚动视图 onScroll 事件不适用于外部方法

我在 ReactNative 中制作了一个折叠收费栏,当Animated.ScrollView contentOffset.y 等于 240 时,我需要停止动画。如果我设置任何条件或在外部函数中调用 Animated.event 它不起作用。

Animated.Value.stopAnimation()也不起作用。

这有效:

这不起作用:

这也不起作用

我不知道我还能用什么来停止我的动画。

我需要做这个效果:

在此处输入图像描述

0 投票
2 回答
2199 浏览

javascript - 反应原生“尝试为不可变对象设置值”

我正在创建一个可拖动的框。我可以将其拖动到屏幕上的任何位置,但出现此错误,提示“您试图_value在一个本应不可变且已被冻结的对象上设置密钥”。谁能告诉我我做错了什么。

我的代码:

0 投票
1 回答
871 浏览

react-native - 动画循环图像

早在 1996 年,我就为客户创建了旋转徽标,因为我可以,现在在 2017 年我又回来了,这要感谢Animated

下面的代码<hr />可以正常工作,但是重新启动时会有一个小小的颠簸。

知道如何使用Animated.loop吗?它不会:«每次到达终点时,它都会重置并从头开始»。


0 投票
2 回答
2008 浏览

animation - 使用 react-native 为 blurRadius 属性设置动画

我开始在我的 react-native 项目中为图像设置动画,但不知何故我无法为blurRadius属性设置动画。Translate并且Scale工作得很好。这是我interpolat用于模糊、缩放和平移值的代码:

这是我的形象:

我将this.state.scrollY值绑定在ScrollView滚动条上。