animationreact-nativeeasing

Can I make custom Easing fuction in React Native?

I'm trying to use react native Animated API for some header Animation like this: https://yalantis.com/blog/toolbar-jelly-animation-kotlin-android/

I managed to transform the SVG component using Animate.timing and some easing functions, but I wasn't satisfied at these basic easing functions and want to make my own easing function like this.

Can I do this?

Solution

  • You can supply your own easing function as the easing property of the Animated.timing() config object rather than the predefined ones.

    The code might be like this: 

    
    const bezierQuad = (t: number) => {
      return Math.min(1.0, Math.sin(28 * t - 6.16) / (5 * t - 1.1))
    }

    Animated.timing(...., {
      toValue: ...,
      duration: ...,
      easing: bezierQuad,
    }).start(() => {
    });