Quick start

With Advanced animations, we can animate individual styles and props of a component. With this level of control we can easily create complex and smooth animations.

Lets see how we can increase the fontsize of a text component via animation from 10 to 50 on a button click using animateUi.

First lets display a sample text component

const animatedText = {
  name: 'reanimated_text',
  component: 'text',
  value: 'Nano Text',
  props:{
    style:{
      color:'black'
    }    
  },
};

now for animation, we need to add an animation object which contains the type of animation and styles/props which has to be animated. You can see it below

   animation: {
      advanced: [
          {
              runIn: 'series',
              run: [
                {
                    type: 'timing',
                    componentProps: {
                      style: {
                          fontSize: 10,
                      },
                    }
                }
              ]
          }
        ]
    }

advanced takes array of objects with each object representing a set of animations. Each object contains two keys runIn and run .

runIn can be series or parallel based on how you want to run the animations defined in run.

As the name suggests, if series is given to runIn, the animations defined in run array are executed one by one and with parallel they all are initiated all at once.

So, now our complete animatedText JSON will be as shown below. We are essentially telling nano to be ready to animate fontSize from value 10 (to another value which we havent defined here yet).

const animatedText = {
  name: 'reanimated_text',
  component: 'text',
  value: 'Nano Text',
  props:{
    style:{
      color:'black'
    }    
  },
  animation: {
    advanced: [
      {
        runIn: 'series',
        run: [
          {
            type: 'timing',
            componentProps: {
              style: {
                fontSize: 10,  
              }
            }
          }
        ]
      }
    ]
  }
};

As the animatable text component is ready, so lets now create a button which animates this text when pressed using animateUi.

const submitButton = {
  component: 'button',
  value: 'check',
  onPress: ({ getUi, animateUi}) => {
    const animView = getUi('reanimated_text'); 
    animView['animation']['advanced'][0]['run'] = [
      {
        type: 'timing',
        config: {
          duration: 300, 
        },
        componentProps: {
          style: {
            fontSize: 50, 
          },
        },
      },
    ];
    animateUi('reanimated_text', animView);  
  },
};

Note that we use animateUi instead of setUi here.

Now on pressing the button, fontSize of text will animate from 10 to 50.

Advanced animation

Loading...

We can achieve complex animations by using series and parallel options in runIn and by providing multiple objects to the advanced array.

If you observe carefully, we have used timing as type in our animation. Nano supports 4 types of type , they are timing , spring, decay and continous

Usage of all these types of animation is similar to what is given above, only few properties of them change. All those changes are explained in detail in later parts of this documentation.