Advanced page transition animation controls

[christopherabouabdo]

I recently submitted a PR (which was approved) that adds transitionFriction and transitionTension as props that control the friction and tension props of the page transition animation. I realized afterward that I would prefer to have the option to choose between animation types spring vs timing and pass an object containing values for whichever properties each of those animation types accepts.

Like this:

Animated Transition Controls

• animationType: 'spring' or 'timing'
• animationProps: object that holds the necessary properties for the animationType provided. Each property should be of the type expected by the corresponding React.Animated method or a function that accepts the gestureState of the swipe that initiated the transition and returns the expected value type.

Example:

var ViewPager = require('react-native-viewpager');
<ViewPager
    dataSource={this.state.dataSource}
    renderPage={this._renderPage}
    animationType="timing"
    animationProps = {{
      duration: (gs) => {
        // Use the horizontal velocity of the swipe gesture
        // to affect the length of the transition so the faster you swipe
        // the faster the pages will transition
        var velocity = Math.abs(gs.vx);
        var baseDuration = 300;
        return (velocity > 1) ? 1/velocity * baseDuration : baseDuration;
      },
      easing: Easing.out(Easing.exp)
    }}
/>

I have implemented this approach in my fork of the repo which I am currently using in my project. I'd love to hear thoughts/ideas on the approach and eventually create another PR if there is interest.

[race604]

Excellent idea. Maybe we can make one step forwards by expose the Animation operation as property, user can set any Animations if they want. How do you think? @christopherabouabdo

[christopherabouabdo]

Hmmm... that could work. Add an animation property that accepts a function that returns an Animated configuration. We can pass the animatedValue, toValue and gestureState for calculations.

something like this?

<ViewPager
  animation = {(animatedValue, toValue, gestureState) => {
    // Use the horizontal velocity of the swipe gesture
    // to affect the length of the transition so the faster you swipe
    // the faster the pages will transition
    var velocity = Math.abs(gestureState.vx);
    var baseDuration = 300;
    var duration = (velocity > 1) ? 1/velocity * baseDuration : baseDuration;

    return Animated.timing(animatedValue,
    {
      toValue: toValue,
      duration: duration,
      easing: Easing.out(Easing.exp)
    });
  }}
/>

Good idea, this is cleaner and more flexible. I've implemented this approach in my fork and I'm liking it. What do you think?

[race604]

Great, that' exactly what I want! Would you please share the feature to this repo by send a PR?