How to animate the backdrop blur clip (Skia), using react native reanimated

24 Views Asked by At

Okay, since last night I'm trying animate the clip from backdrop blur.

Actually it works transform the entire component, something like that:

const backdropBlurClip = useMemo(
    () => rrect(rect(0, 0, FORM_WIDTH, FORM_HEIGHT), 8, 8),
    [FORM_WIDTH, FORM_HEIGHT]
  );

const xBackdropBlur = useSharedValue((width / 2) - (FORM_WIDTH / 2));
const yBackdropBlur = useSharedValue(height - (FORM_HEIGHT) - (height * 0.112676056));

const transformBackdropBlur = useDerivedValue(() => [
    { translateX: xBackdropBlur.value },
    { translateY: yBackdropBlur.value },
  ]);
const backdropBlurClipKeyboardShow = () => {
    xBackdropBlur.value = withTiming((width / 2) - (FORM_WIDTH / 2), { duration: 300 });
    yBackdropBlur.value = withTiming((height / 2) - (FORM_HEIGHT / 1.2), { duration: 300 });
  }

const backdropBlurClipKeyboardHide = () => {
    xBackdropBlur.value = withTiming((width / 2) - (FORM_WIDTH / 2), { duration: 500 });
    yBackdropBlur.value = withTiming(height - (FORM_HEIGHT) - (height * 0.112676056), { duration: 500 });
  }
const handleKeyboardShow = () => {
    backdropBlurLocationY.value = withTiming((height / 2) - (FORM_HEIGHT / 1.2), { duration: 300 });
  }

const handleKeyboardHide = () => {
    backdropBlurLocationY.value = withTiming(height - (FORM_HEIGHT) - (height * 0.112676056), { duration: 500 });
  }

useEffect(() => {
    const onShow = Keyboard.addListener("keyboardDidShow", () => {
      handleKeyboardShow();
      backdropBlurClipKeyboardShow();
    });
    const onHide = Keyboard.addListener("keyboardDidHide", () => {
      handleKeyboardHide();
      backdropBlurClipKeyboardHide();
    });

    return () => {
      onShow.remove();
      onHide.remove();
    };
  }, []);

This code will transform entire component, the next step is make only clip move but the BackdropBlur component receives a prop called clip with type AnimatedProp<ClipDef | undefided> i.e. the core of my question is... how can I make AnimatedStyle works in this context?

0

There are 0 best solutions below