我可以在 React Native 中自定义缓动功能吗？

Question

我正在尝试使用 React Native Animated API 制作一些 header 动画，如下所示： https://yalantis.com/blog/toolbar-jelly-animation-kotlin-android/

我成功地改造了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。

我可以这样做吗？

Answer 1

您可以提供自己的缓动函数作为 Animated.timing() 配置对象的缓动属性而不是预定义的。

代码可能是这样的：


    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(() => {
    });

Answer 2

由于TimingAnimationConfig的类型是这样的：


export type TimingAnimationConfig = {
  ...AnimationConfig,
  toValue:
    | number
    | AnimatedValue
    | {
        x: number,
        y: number,
        ...
      }
    | AnimatedValueXY
    | AnimatedInterpolation,
  easing?: (value: number) => number,
  duration?: number,
  delay?: number,
};

ease函数的类型是这样的：

(value: number) => number

代码可能是这样的


    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(() => {
    });

我可以在 React Native 中自定义缓动功能吗？

Can I make custom Easing fuction in React Native?

animation

easing

react-native