Анимация не остается на виду - PullRequest
Новая
       24

Анимация не остается на виду

1 голос
/ 29 марта 2019

Я создал анимацию, и она оживляет, отлично!

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

Вот GIF https://user -images.githubusercontent.com / 7225808 / 55251949-0a826d00-5228-11e9-9c0a-8591d32756d5.gif 

render() {
return ([
    <View >
        <View style={style.arrow}>
        <Animatable.View 
        duration={3000} 
        style={style.arrow} 
        animation="slideInUp" 
        easing="ease-out" 
        iterationCount="infinite" 
        direction="alternate">
            <Image source={require('./ConnectArrow.png')} />
        </Animatable.View>
        </View>
    </View>,
    <View style={style.textView}>
        <Text style={style.textView}>Tap to Connect</Text>
    </View>
]);
}
}

    arrow: {
      alignItems: 'center',
      height: 30,
      marginTop: -10
    },
    textView: {
        alignItems: 'center',
        color: "#CCCCCC",
        fontSize: 18,
    }
  }

1 Ответ

0 голосов
/ 06 апреля 2019

Вы сделали это очень хорошо, по умолчанию анимация animation="slideInUp", но для вашего требования, чтобы анимация в представлении, вы должны сделать это с помощью пользовательской анимации.

Вы можете сделать это с помощью пользовательской анимации, вы можете установить анимацию как хотите. При этом вы должны установить анимацию в направлении Y в пределах желаемого диапазона.

Только для справки. 

animation={{
      0: {
        translateY:20,
      },
      0.5: {
        translateY: 40,
      },[
      1: 
        translateY: 60,
      },
    }}

см. Этот пример

https://github.com/oblador/react-native-animatable/blob/master/Examples/MakeItRain/App.js

...