如何使用 reanimated 2 [REACT-NATIVE] 创建捏合以缩放相机应用程序

Posted 2023-02-19

【中文标题】如何使用 reanimated 2 [REACT-NATIVE] 创建捏合以缩放相机应用程序

【英文标题】：How to create a pinch to zoom camera app using reanimated 2 [REACT-NATIVE]

【发布时间】：2021-10-17 10:10:04

【问题描述】：

我正在尝试使用启用相机缩放的 reanimated 2 创建一个反应原生相机应用程序，这是我的代码：

const scale = useSharedValue(1);

  const onGestureEvent = useAnimatedGestureHandler(
    onStart: (_, ctx) => 
      ctx.start = scale.value;
    ,
    onActive: (event, ctx) => 
      scale.value = event.scale * ctx.start;
    ,
  );

const animatedProps = useAnimatedProps(() => 
    return 
      zoom: scale.value / 1000,
    ;
  );

  return (

      <PinchGestureHandler onGestureEvent=onGestureEvent>
        <AnimatedCamera
          style= width, height 
          animatedProps=animatedProps
        />
      </PinchGestureHandler>
  );

但它不起作用，错误在哪里？

【参考方案1】：

试试这个：

const CONTAINER_WIDTH = SCREEN_WIDTH;// edit this to whatever you want
export const clamp = (value, lowerBound, upperBound) => 
     "worklet";
     return Math.min(Math.max(lowerBound, value), upperBound);
;

const scale = useSharedValue(1);
const focalX = useSharedValue(0);
const focalY = useSharedValue(0);

const pinchGestureHandle= useAnimatedGestureHandler(
                
                    onActive: (event) => 
                        scale.value = clamp(event.scale, 0.5, 2);
                        focalX.value = event.focalX;
                        focalY.value = event.focalY;
                    ,
                    onEnd: () => 
                        scale.value = withTiming(1, 
                            duration: 500,
                            easing: Easing.inOut(Easing.ease),
                        );
                    ,
                ,
                [],
            );
            
        const animatedStyles = useAnimatedStyle(() => 
            return 
                transform: [
                    translateX: focalX.value,
                    translateY: focalY.value,
                    translateX: -CONTAINER_WIDTH / 2,
                    translateY: -slHeight.value / 2,
                    scale: scale.value,
                    translateX: -focalX.value,
                    translateY: -focalY.value,
                    translateX: CONTAINER_WIDTH / 2,
                    translateY: slHeight.value / 2,
                ],
            ;
        );
        
        return <Animated.View style=animatedStyles />

【讨论】：

嗨 Hadjar，slHeight 值是多少？

我的错。这是你的 CONTAINER_HEIGHT