oblador / react-native-animatable

Standard set of easy to use animations and declarative transitions for React Native
MIT License
9.81k stars 702 forks source link

Restrict bouncing height #315

Open jamesawer3 opened 4 years ago

jamesawer3 commented 4 years ago

I'm using bouncing effect in my app. Im using an arrow to indicate an tab but the arrow is bouncing from top of the screen but my expectation is to bounce only for a shorter distance. I have attached my screen recording. My code is

<View style={{ position: 'absolute', top: Platform.OS == 'ios' ? '82%' : '80%', left: '13%', right: '76%' }}>
                    <Animatable.View animation="slideInDown" iterationCount='infinite' direction="alternate" >
                      <Ionicons
                        name='ios-arrow-round-down'
                        color='white'
                        size={80}
                      />
                    </Animatable.View>
                  </View>

Screen Recording 2020-05-27 at 12.39.49 PM.zip

hongweiCui commented 3 years ago

@jamesawer3 Is there any progress? Thanks.

ahmad6242 commented 3 years ago

Anybody able to restrict this ! Please help

maazalam45 commented 2 years ago

you can make your custom animation like this

Animatable.initializeRegistryWithDefinitions({ slideInDown: { // Combined slideInDown & slideInLeft from: {translateY: -130, translateX: 0}, to: {translateY: 130, translateX: 0}, }, });

change X and Y axis as required