Правильное использование Animated API в React Native
Я новичок в Animated API в React Native. Я прошел через множество руководств по использованию API анимации, и кажется, что в каждом из них элементы позиционируются как абсолютные, необходимо ли позиционировать элемент как абсолютное?
Также я сделал часть анимации, но она выглядит некорректно, я думаю, что представление после ввода текста не имеет абсолютной позиции, которая может вызывать проблему. Можно ли сделать анимацию, которую я пытаюсь сделать, сохраняя абсолютную позицию ввода текста, но другие элементы позиционируются с помощью flexbox?
Вот код
handleFocus = () => {
console.info('starting animation');
this.setState({
isFocused: true
});
Animated.timing(this.isFromViewFocused, {
toValue: 1,
duration: 300
}).start();
}
handleBlur = () => {
console.info('Blurring');
this.setState({
isFocused: false
});
Animated.timing(this.isFromViewFocused, {
toValue: 0,
duration: 300
}).start();
}
render() {
const labelStyle = {
position: this.state.isFocused === true ? 'absolute' : 'relative',
alignItems: 'center',
width: this.isFromViewFocused.interpolate({
inputRange: [0, 1],
outputRange: [DEVICE_WIDTH * 0.45, DEVICE_WIDTH]
}),
left: this.isFromViewFocused.interpolate({
inputRange: [0, 1],
outputRange: [DEVICE_WIDTH * 0.03, 0]
}),
marginBottom: this.isFromViewFocused.interpolate({
inputRange: [0, 1],
outputRange: [0, 80]
}),
top: this.isFromViewFocused.interpolate({
inputRange: [0, 1],
outputRange: [10, 0]
}),
borderWidth: this.isFromViewFocused.interpolate({
inputRange: [0, 1],
outputRange: [0, 5]
}),
borderColor: 'black',
paddingTop: this.state.isFocused === true ? 20 : 0
};
return (
<View style = {styles.container}>
<ScrollView style = {{ flex: 1 }} keyboardDismissMode='on-drag'>
<Animated.View
style = {labelStyle}
>
<TextInput
onFocus = {this.handleFocus}
onBlur = {this.handleBlur}
style = {{
borderColor: 'black',
borderWidth: 1,
width: '90%'
}}
>
<Text>Hey Text</Text>
</TextInput>
</Animated.View>
<Animated.View
style = {[styles.LocationContainer,
{ marginTop: this.isFromViewFocused.interpolate({
inputRange: [0, 1],
outputRange: [20, 80]
})
}
]}>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Использование позиционирования absolute в сочетании с left, top, bottom, right плохо для выступлений. Вот почему ваша анимация выглядит «глючной».
Лучше использовать преобразования, чтобы ваш компонент оставался relative и можно было выполнить собственные оптимизации (так же, как преобразования CSS3).
Кроме того, при использовании свойств, не оптимизируемых в собственном коде (например, используемых вами), вы не можете установить для useNativeDriver значение true. Что еще больше ухудшает характеристики.
К тому же вы не можете (или не должны) выполнять интерполяцию на основе логического значения. AnimatedJS предоставляет вам класс Animated.Value, цель которого - упростить интерполяцию материала.
Вот более простой пример Animated:
export class MyAnimatedComponent extends React.Component {
state = {
animatedValue: new Animated.Value(0);
}
focus = () => {
const { animatedValue } = this.state;
Animated.timing(animatedValue, {
duration: 280,
toValue: 1,
// This will make your animation glitch-free/performant.
useNativeDriver: true,
}).start();
}
blur = () => {
Animated.timing(animatedValue, {
duration: 140,
toValue: 0,
// This will make your animation glitch-free/performant.
useNativeDriver: true,
}).start();
}
render () {
const { animatedValue } = this.state;
const animatedStyles = {
transform: [
{
// Move the div by 120px to the left when value === 1
translateX: animatedValue.interpolate(
inputRange: [0, 1],
outputRange: [0, -120],
// Tells Animated to never go outside of the outputRange
extrapolate: 'clamp',
)
},
{
translateY: animatedValue.interpolate(
inputRange: [0, 1],
outputRange: [0, -50],
extrapolate: 'clamp',
)
}
]
}
return (
<View style = {styles.wrapper}>
<Animated.View style = {animatedStyles} onFocus = {onFocus} onBlur = {onBlur}>
I'm some content into an Animated div.
</Animated.View>
</View>
)
}
}
Нет проблем, может можно отметить ответ как решенный ✅? ;)
Ты спаситель! Спасибо!