问题标签 [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 回答
210 浏览

javascript - React-native 切换选择器效果过渡页面

我正在尝试实现 SwitchSelector,但我遇到了页面更改问题。我希望当用户通过页面内部的移动从右到左和从左到右更改页面时,页面之间会发生转换。链接:https ://snack.expo.io/Sk5GY7Je7 有人可以帮帮我吗?

0 投票
0 回答
563 浏览

javascript - React-native facebook 反应

我正在创建一个这样的模块: 一只忙碌的猫

但是,我在管理围绕情绪的轮廓时遇到了问题。

链接:https ://snack.expo.io/BJuUwZleQ

有人可以帮帮我吗?

0 投票
0 回答
1019 浏览

react-native - 如何在 React Native 中使用 Animated 将宽度设置为自动

我有一个 40x40 的按钮,现在这个按钮有一个活动状态,按钮的容器扩展和菜单项进入。活动状态没有特定的宽度,应该扩展以适应内容(类似于width: auto;CSS )。

有没有办法我可以使用动画这个宽度变化使用Animated

提前致谢

0 投票
1 回答
110 浏览

react-native - 移动对象时无法插入颜色

我有一个简单的组件,它试图将球从一个点移动到另一个点,同时将颜色从绿色变为黄色。没有错误被抛出并且球确实移动。但是我无法弄清楚哪个部分可能出错了。

我已经实现了让动画同时Animated.parallel运行并interpolateborderColorwithinputRange以及1 and 0outputRange

这是你玩转的世博小吃

0 投票
0 回答
223 浏览

reactjs - 通过“Animated.Event”和“setValue”在 onPanResponderMove 方法中设置动画值有什么区别?

如果要使用 PanResponder 拖放元素,可以通过两种方式将移动值传递给 onPanResponderMove 方法:

1. 带动画的.Event

2. 使用 .setValue

在我的测试中,两者似乎都做同样的事情。有什么区别?

0 投票
0 回答
654 浏览

react-native - 如何使用 React Native Animate 为不同的 Svg 属性设置动画

我在 android 上使用 react-native-svg=6.3.1 和 react-native-0.55.4 。使用下面的代码,我可以成功地为圆的半径设置动画,但不能为它围绕某个点的旋转设置动画。这是什么原因。理论上,旋转动画应该与半径相同,因为它也需要一个字符串值。

0 投票
3 回答
3588 浏览

react-native - 开玩笑:如何模拟动画循环?

我正在尝试为具有以下动画代码(在 componentDidMount 上调用)的动画组件运行快照测试:

我尝试使用以下内容模拟 Animated :

但是,运行测试会导致此错误:

我已经将重置模拟放在不同的地方,并检查了 React Native 中“循环”方法的源代码,但没有成功模拟它。有没有人成功地做到过这一点?

0 投票
0 回答
932 浏览

react-native - 反应导航自定义比例过渡动画,例如应用程序打开时

我想在为我的下一个屏幕按下按钮时创建缩小效果,就像从主屏幕按下应用程序并且启动屏幕出现时那样的自定义过渡。

我已经在 stackNavigator 中尝试了 transitionConfig 并使用了带有以下代码的自定义转换

我面临的问题是从屏幕中间开始缩放,所以如果我将位置作为屏幕右上角的 (237,16) 传递,我无法让 translateX 和 translateY 正确设置为下一个比例的动画screen 比屏幕尺寸小(我们正在从最后一个屏幕中按下的按钮为下一个屏幕设置动画),因此它的坐标系没有点 (237,16)。

这不是共享元素动画问题,我也尝试了反应导航文档中推荐的https://github.com/fram-x/FluidTransitions,但是在这个(从它的示例中,没有广泛的文档)我的屏幕在 FluidNavigator 下似乎从来没有标题。

0 投票
2 回答
9516 浏览

animation - 在 React Native Animated 中使用 useNativeDriver 时出错

当我useNativeDriver在 React Native Animated 中使用时

并渲染

这些错误给了我

本机动画模块不支持样式属性“底部”

无法在未安装的组件上调用 setState(或 forceUpdate)。这是一个空操作,但它表明您的应用程序中存在内存泄漏。要修复,请取消 componentWillUnmount 方法中的所有订阅和异步任务。

0 投票
1 回答
3636 浏览

css - 基于多个值的 React Native Animated 插值不透明度

我有一个 React Native Animated.view 组件,我想根据滚动视图位置对其不透明度进行插值。但是,我想使用两个值(x 和 y)而不是一个值来插入不透明度。

这当然不起作用,因为一个不透明度值会覆盖另一个,但它清楚地表明了我想要实现的目标。