react-native - 功能组件中的 Animated.spring 不适用于 onPress?
问题描述
我将创建一个通过单击按钮运行的动画,我通过 Animated.timing 顺利完成此操作,没有任何问题,但是当我尝试通过 Animated.spring 运行动画时,它只运行一次,下次点击不会t 工作 我该如何解决这个问题?Animated.spring 在功能组件中运行流畅吗?这是我的代码
const BoxShape = () => {
const jumpValue = new Animated.Value(0);
const ActiveAnim = () => {
Animated.spring(jumpValue, {
toValue: 1,
friction: 1,
}).start();
}
return (
<View>
<Animated.Image
style={{ transform: [{ scale: jumpValue }], width: 120, height: 120, marginBottom: 30 }}
source={require('.././images/ball.png')}
>
</Animated.Image>
<Button
title='Active Ball'
onPress={ActiveAnim}
/>
</View>
)
}
解决方案
这是正常行为,因为您在第一次运行时将值更新为 1,但从未将其重置为 0,以便动画再次运行。
我建议您在每次运行后将值重置为 0,方法是在代码中添加以下代码段:p:
const ActiveAnim = () => {
Animated.spring(jumpValue, {
toValue: 1,
friction: 1,
}).start(() => jumpValue.setValue(0));
};
start() 接受一个函数作为参数,将在动画结束后调用, https://facebook.github.io/react-native/docs/animated#configuring-animations
推荐阅读
- android - 在 Gradle Android 中使用 Minify true 时应用程序崩溃
- ruby-on-rails - 如何使用 Rails 中的 ActiveRecords 范围根据列的属性过滤表
- java - look for value within two arrays
- c - 为什么我在这个 C 程序中出现段错误?处理 fscanf 和 printf
- html - 水平对齐两个块元素而不是手动使用“位置”
- networking - Kubernetes 网络问题桥接适配器
- java - 这个类的机制是什么?(JSON 解析)
- python - 如何在python中重定向方法调用?
- r - R,stringr - 从数据框中的行中替换多个字符
- flutter - AnimatedList 中最后一个元素的 RangeError