Continous

This is to animate a parameter continously. For example, changing the y value of a view as user scrolls a list.

Continous animation

Loading...

Here the code we are concerned with onScroll of list component.

  onScroll: ({methodValues, getUi, animateUi}) => {
    const animView = getUi('reanimated_text');
    animView['animation']['advanced'][0]['run'] = [
      {
        type: 'continuous',
        animationProps: {
          input: [0, 100],
          output: [20, 80],
          type: 'clamp',
        },
        componentProps: {
          style: {
            fontSize: methodValues[0].nativeEvent.contentOffset.y, // we are giving the contentOffset y value to fontsize
          },
        },
      },
    ];
    animateUi('reanimated_text', animView);
  },

animationProps is optional and can have three properties as shown below

    animationProps: {
      input: [0, 100],
      output: [20, 80],
      type: 'clamp',
    },

input is for the input range of values

output is for the final mapped values range based on input type has to be clamp to use clamping while interpolating from input range to output range

In the above onScroll code, contentOffset.y is given to fontSize, as the contentOffset.y changes (when the user scrolls), fontSize will be updated continously. By doing so, Nano will update the fontSize when the user scrolls listview.