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.