React Native Fade In Animation не является плавным - PullRequest
Новая
       27

React Native Fade In Animation не является плавным

0 голосов
/ 06 октября 2018

Я создаю анимацию, аналогичную www.icloud.com , войдите в систему. Это означает, что когда пользователь вводит свой адрес электронной почты, появляется окно пароля с анимацией затухания. Ниже я хочудля достижения.

Animation I want to achieve

Мой код

Однако для этого я создал следующий код. 

constructor () {
  super()
  this.animatedValue = new Animated.Value(0)
}

state ={
    hideEmail:false,
} 

animate () {
this.animatedValue.setValue(0)
Animated.timing(
  this.animatedValue,
  {
    toValue: 1,
    duration: 1000,
    easing: Easing.linear
  }
 ).start()
}

render() {

const marginTop = this.animatedValue.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 100]
})

return (
  <View style={styles.container}>
    <View style={{paddingBottom:10}}>
      <TextInput 
        placeholder='Registered Email' 
        returnKeyType='go'
        style={{borderWidth:0.5}}
        onSubmitEditing = {(event) => this.getData()}>
      </TextInput>
    </View>
    <Animated.View style={{marginTop,opacity:!this.state.hideEmail?0:1}}>
      <TextInput 
        placeholder='Code' 
        style={{borderWidth:0.5}}>
      </TextInput>
    </Animated.View>
  </View>
);

getData = (email) => {
  // Validate and if it's correct email, below code will run
  this.animate();
  this.setState({hideEmail:true});
}

Здесь я использовал состояние hideEmail, чтобы изменить непрозрачность Code Вид, чтобы сделать его скрытым и видимым.Тем не менее, это то, что, когда пользователь вводит электронное письмо, оно будет проверено, и остальная часть кода getData () запустится и запустит анимацию, сделав видимым Code View.

Проблемы

Есть две проблемы.

Problems of Animation

Как вы можете видеть, когда типы писем (я не проверял это должным образом.Просто чтобы показать, как это работает) и вводится, появляется окно кода и начинается анимация.Но есть две проблемы.

1) Первое поле (ящик электронной почты) также перемещается вместе с полем Код.

2) Анимация не плавная.Граница появляется и исчезает.Что раздражает и не красиво.

Так как я могу их исправить?Я попробовал все, изменив мой код, но ничего не помогло.

1 Ответ

0 голосов
/ 07 октября 2018

Поскольку вы не опубликовали стили с вашим кодом, я думаю, что контейнер, содержащий оба ваших TextInputs, должен быть выровнен по центру.

Просто проверьте, содержит ли ваш контейнер следующий код. 

JustifyContent: ‘center’

Если это так, удалите его и добавьте marginTop в ваше первое поле TextInput.Движение будет, как вы ожидали.

...