问题标签 [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.
react-native - 我可以使用本机动画驱动程序来跟踪平移手势吗?
React-Native Animated 文档将此示例显示为使 Animated.Value (_panX) 跟踪平移手势的一种方式:
同样,Animated.event 文档说我可以传递第二个配置参数,其中:
useNativeDriver:为真时使用本机驱动程序。默认假。
不幸的是,这样做似乎被打破了:
特别是,因为PanResponder.create
具有执行以下操作的onResponderMove
功能:
这会导致错误,当它被视为config.onPanResponderMove
一个函数时,当它实际上是一个对象时......
难道我做错了什么?还是在进行手势跟踪useNativeDriver
时不受支持?Animated.Value
要是能像这样无缝地跟踪鼠标就好了……
react-native - 基于道具变化的组件连续动画
我正在尝试创建一个类似于 Snackbar 的状态消息组件,其签名如下所示:
当“open”设置为 true 时,消息应该在屏幕上显示动画,在屏幕上停留一段时间,然后再次关闭。
因此,下面的代码可以正常工作,除了在一个相当常见的用例中:当调用组件在旧消息动画关闭屏幕之前设置新消息时。在这种情况下,下面的代码只是替换当前显示的消息并使用相同的计时器。
理想情况下,当添加新消息时,应该首先使旧消息在屏幕外显示动画,然后在新消息中显示动画。(即使新消息文本与旧消息文本相同,我也想确保它这样做。)
我似乎无法弄清楚如何做这样的事情。我最好的猜测是 StatusMsg 实际上应该是一个工厂,用于创建包含消息的动画视图,但我不知道如何使其工作。具体来说,如何使先前的消息在创建新消息时自行关闭。
react-native - 使用 Animated.Flatlist 和 Animated.ScrollView 动画 Animated.View 不流畅
我想做一个动画标题。
- 我创建了一个 FlatList 的动画组件,
- 使用
onScroll
函数更新动画值。 - 使用绝对位置放置一个视图 (Animated.View) 作为动画 FlatList 上方的标题。
- 最后,使用变换属性插入动画值以更改视图 (Animated.View)。
动画效果很好,但动画一点也不流畅。
我看到了这个问题如何使用scrollEventThrottle
有助于平滑度。所以我认为使用 FlatList 会很顺利,但事实并非如此。如果按下时滚动,则很流畅。但是如果你滚动并离开手指,它会很跳跃(我不知道如何描述它。对不起)。滚动很流畅,但动画视图(标题)动画一点也不流畅。
环境
- 反应:16.0.0-alpha.12,
- 反应原生:^0.47.0,
- 节点:v7.7.3
- npm:4.1.2
- 纱线:0.21.3
目标平台: iOS和Android
构建工具: expo
更新
因此,我尝试使用 ScrollView 实现相同的功能。但是,我认为,与 FlatList 相比,使用 ScrollView 的情况更糟。
这是世博小吃演示:Animated ScrollView Header
我想我需要先提一下我是如何来到这里的。因此,我尝试通过Medium 中的一个非常好的教程以及观看Brent 的这个很棒的 youtube react conf viedo来实现这一点。但是,youtube 视频上使用的确切代码具有相同的效果。另外,在 Medium 教程中,作者给出了一个指向他的expo Animated header 链接的链接,效果非常好。但是当我复制粘贴代码时,相同的代码无法顺利运行。所以,我认为问题在于反应或反应本机版本。如果我有任何新的更新,我会更新。谢谢你。
react-native - 在反应原生的动量滚动期间动画?
我正在尝试在呈现 ScrollView 的屏幕上创建自定义 NavBar。在 NavBar 内部,有一个按钮,当按下该按钮时,会导致 NavBar 向下平移,从而呈现出 NavBar 正在扩展的外观(使用选项完成此操作Animated.spring()
)useNativeDriver
。一切都很好,除非在点击按钮时 ScrollView 仍在滚动(即:当“动量”滚动发生时)。在这种情况下,启动 NavBar 动画的 onPress 处理程序按预期调用,但调用Animated.spring()
不会导致任何动画发生。是否可以在滚动期间发生 NavBar“扩展”动画,或者暂停滚动以允许动画继续?
reactjs - 反应原生卡片翻转动画点击
我有 2 张卡片,点击时可以翻转。目前,当任何一张牌被点击时,两张牌都在翻转。我只想翻转被抽出的牌。如何完成这项工作?示例代码可在此处获得https://snack.expo.io/rkBr-Ezpb
react-native - React Native 平滑同步两个 flatlist
我有两个平面列表,一个包含数据(dataScroll),另一个包含每个数据项的复选框(checkScroll)。
这样做的原因是,当用户在 dataScroll 上水平滚动时,复选框必须始终可见(我将 dataScroll 放在可水平滚动的滚动视图中)。
演示:
到目前为止尝试过:
在 dataScroll 的滚动事件中,我得到了 y 偏移并将 checkScroll 移动到那个 y 位置。
它(几乎)完成了这项工作,但是滚动时 2 个平面列表之间存在巨大延迟。
--
我读到可能是使用动画组件的方式,但我无法弄清楚动画在本机反应中是如何工作的。
因此,我想就如何将两个平面列表绑定在一起获得一些帮助,以便如果我在一个列表上滚动,另一个列表会跟随它而没有(或至少最小)延迟。
如果只有 dataScroll flatlist 是可滚动的,那也没关系。
react-native - React Native:动画在 android 上无法正常工作
过去两天我一直在尝试解决问题,它在 iOS 上运行良好
这个组件是 child ,在 parent 中这样使用:<FeedBack ref={ref => this.feedback = ref}/>
没有任何条件检查是否显示(因为动画比例在构造函数中设置为零,所以不需要)
toggle()
按下按钮时,从父级调用该方法。
现在this works fine on iOS
,当组件加载时,视图不存在,直到按下按钮(然后缩放)。但是在android
组件加载时,视图已经存在。当我按下按钮时,动画视图消失并重新出现(带有动画缩放),随后的切换工作正常。android中的问题是即使initialValue
比例为零,视图在第一次加载时仍然存在。
animation - 父边界内的可拖动视图
我面临一个任务,我想在背景图像上放置一个可拖动的标记,然后在背景图像中获取标记的坐标。
我已经按照这个简洁的教程使用Animated.Image
,PanResponder
和Animated.ValueXY
. 问题是我无法弄清楚如何将可拖动视图限制为仅在其父级(背景图像)的边界内移动。
很感谢任何形式的帮助 :)
最好的问候
Jens