问题描述
我目前正在学习使用RN Reanimated和Redash库创建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'],};
在挂载上运行时,我目前遇到了标签动画从useCode
到1
的不良副作用在我与任何一种输入进行交互之前。
是否有使用0
或react-native-reanimated
的通用解决方案?我可以添加另一个react-native-redash
状态或其他内容,但这似乎是一个笨拙的解决方案?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)