仅在TextInput焦点/模糊上运行动画动画

问题描述

我目前正在学习使用RN ReanimatedRedash库创建React Native动画。我设法创建了一个简单的定时动画,该动画将TextInput占位符转换为标签。

[100,100,100]

此动画在聚焦/模糊输入时效果很好,但是当 import Animated,{ Clock,Easing,set,useCode } from 'react-native-reanimated'; import { timing } from 'react-native-redash/lib/module/v1'; const [isFocused,setIsFocused] = useState(false); const clock = new Clock(); const [animation] = useState(new Animated.Value(0)); const shouldAnimateLabel = isFocused || !!value; useCode(() => set( animation,timing({ clock,animation,duration: 150,from: shouldAnimateLabel ? 0 : 1,to: shouldAnimateLabel ? 1 : 0,easing: Easing.inOut(Easing.ease),}),[shouldAnimateLabel],),); const animatedStyles = { top: Animated.interpolate(animation,{ inputRange: [0,1],outputRange: [20,-5],fontSize: Animated.interpolate(animation,outputRange: [18,14],color: Animated.interpolateColors(animation,outputColorRange: ['#aaa','#fff'],}; 在挂载上运行时,我目前遇到了标签动画从useCode1的不良副作用在我与任何一种输入进行交互之前。

enter image description here

是否有使用0react-native-reanimated的通用解决方案?我可以添加另一个react-native-redash状态或其他内容,但这似乎是一个笨拙的解决方案?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)