使用redash反应本机捏缩放并恢复动画

问题描述

我只是尝试使用复活和重做的缩放缩放图像。

I followed this tutorial

但是我抓取的组件位于上一个组件的顶部，但位于下一个组件的下方。我知道这有点复杂。为此，我试图绘制一个模式以更好地向您解释。

因此，在上面1,2和3上方的图像中，是我的卡，其中装有图像。然后，我将“缩放”捏到第二张图像，但它保持在第一张图像上方（这是我想要的），但也停留在下一张卡（在这种情况下为第三张图像）下方。

如何防止这种情况？

const SIZE = shared === true ? width - 20 : width;
const styles = StyleSheet.create({
    image: {
        ...StyleSheet.absoluteFill,width: undefined,height: undefined,resizeMode: "contain",},});
const state = new Value(State.UNDETERMINED);
const pinchRef = useRef(PinchGestureHandler);
const origin = vec.createValue(0,0);
const pinch = vec.createValue(0,0);
const focal = vec.createValue(0,0);
const scale = new Value(1);
const numberOfPointers = new Value(0);
const pinchGestureHandler = onGestureEvent({
    numberOfPointers,scale,state,focalX: focal.x,focalY: focal.y,});
const zIndex = cond(eq(state,State.ACTIVE),3,0);
const adjustedFocal = vec.add(
    {
        x: -SIZE / 2,y: -SIZE / 2,focal
);
useCode(
    () =>
        block([
            cond(pinchBegan(state),vec.set(origin,adjustedFocal)),cond(
                pinchActive(state,numberOfPointers),vec.set(pinch,vec.minus(vec.sub(origin,adjustedFocal)))
            ),cond(eq(state,State.END),[
                set(pinch.x,timing({ from: pinch.x,to: 0 })),set(pinch.y,timing({ from: pinch.y,set(scale,timing({ from: scale,to: 1 })),]),[adjustedFocal,numberOfPointers,origin,pinch,state]
);
return (
    <>
        <Animated.View style={{ width: SIZE,height: SIZE,zIndex }}>
            <PinchGestureHandler ref={pinchRef} {...pinchGestureHandler}>
                <Animated.View style={StyleSheet.absoluteFill}>
                    <Animated.Image
                        style={[
                            styles.image,{
                                transform: [
                                    ...translate(pinch),...transformOrigin(origin,{ scale }),],]}
                        source={{ uri: app.HOST + photo }}
                    />
                </Animated.View>
            </PinchGestureHandler>
        </Animated.View>
    </>
);

这里是组件

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）