Question

我尝试使用本机Animated API对某些标题动画进行如下操作： https://yalantis.com/blog/toolbar-jelly-animation-kotlin-android/

我设法使用SVG component和Animate.timing转换some easing functions，但我对这些基本的缓动功能并不满意，并且想要我自己的缓动功能，如this。

我可以这样做吗？

Answer 1

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

Answer 2


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

缓动函数的类型如下：

(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中制作自定义缓动功能吗？

2 个答案: