@applicaster/zapp-react-native-ui-components/Components/VideoLive/animationUtils.ts

Applicaster Zapp React Native ui components for the Quick Brick App

import { Animated, Easing, EasingFunction, StyleProp } from "react-native";

type AnimatedInterpolatedStyle =
  | Animated.AnimatedInterpolation
  | [{ [Key: string]: Animated.AnimatedInterpolation }];

type AnimationConfig = {
  duration: number;
  easing: EasingFunction;
  styles: (animatedValue: Animated.Value) => {
    [Key: string]: AnimatedInterpolatedStyle | StyleProp<any>;
  };
  delay?: number;
  onAnimationEnd?: () => void;
};

export type AnimatedInConfig =
  | AnimationConfig
  | {
      in: AnimationConfig;
      out: AnimationConfig;
    };

const IN_DURATION = 1000;

const OUT_DURATION = 1000;

const easing = Easing.in(Easing.bezier(0.25, 0.1, 0.25, 1.0));

const interpolate = (
  animatedValue: Animated.Value,
  from: number = 0,
  to: number = 1
): Animated.AnimatedInterpolation =>
  animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: [from, to],
  });

const fadeInOpacityStyles = (animatedValue: Animated.Value) => ({
  opacity: interpolate(animatedValue),
});

export const overlayFadeIn: AnimatedInConfig = {
  in: {
    styles: fadeInOpacityStyles,
    easing,
    duration: IN_DURATION,
    delay: 0,
  },
  out: {
    styles: fadeInOpacityStyles,
    easing,
    duration: OUT_DURATION,
    delay: 0,
  },
};