为什么外推钳位不起作用,也不是“钳位”?

时间:2020-11-12 10:01:15

标签: react-native react-native-reanimated

EXTRAPOLATED.CLAMP在此代码中不起作用。我不明白为什么,有什么建议吗?

我是React开发的新手。我想在我的应用程序中添加一些动画,但是我对此卡住了。

这是我的进口货

import Animated, { Extrapolate, interpolate, add, diffClamp, } from 'react-native-reanimated';
import {
  translate,
  usePanGestureHandler,withDecay,withOffset,clamp} from "react-native-redash/lib/module/v1";

返回前的声明:

const {
    gestureHandler,
    translation,
    velocity,
    state,
  } = usePanGestureHandler();
  const X = diffClamp(withDecay({ value: translation.x, velocity: velocity.X, state: state }), -BlHouses.length * screenWidth + screenWidth, 0)

我的组件:

<PanGestureHandler {...gestureHandler}>
        <Animated.View style={{ flexDirection: 'row', flex: 2 }}>

          {Array.isArray(BlHouses) && BlHouses.map((BlHouse, index) => {
            const translateX = interpolate(X, {
              inputRange: [-screenWidth * index, 0],
              outputRange: [-screenWidth * index, 0],
              extrapolate: Extrapolate.CLAMP,
            }
            )
            const positionX = add(X, index * screenWidth);
            const isDisappearing = screenWidth;
            const isOnLeft = 0;
            const isOnRight = (index - 1) * screenWidth;
            const isAppearing = (index + 1) * screenWidth;
            const scale = interpolate(positionX, {
              inputRange: [isOnRight, isOnLeft, isDisappearing, isAppearing,],
              outputRange: [0.5, 1, 0.5, -0.5],
              extrapolate: Extrapolate.CLAMP
            })
            const opacity = interpolate(positionX, {
              inputRange: [isOnRight, isOnLeft, isDisappearing, isAppearing,],
              outputRange: [0.5, 1, 0.5, -0.5],
              extrapolate: Extrapolate.CLAMP
            })

            return (

              <Animated.View key={index} style={[{ height: 270, width: screenWidth }, { opacity, transform: [{ translateX }, { scale: scale }] }]}>
                  <HouseHoldHeader
                    index={index}
                    maxIndex={BlHouses.length}
                    strName={BlHouses[index].str}
                    Nr={BlHouses[index].nr}
                    Bl={BlHouses[index].bl}
                    Sc={BlHouses[index].sc}
                    Ap={BlHouses[index].ap}
                  ></HouseHoldHeader>
              </Animated.View>

            );
          })}
        </Animated.View>
      </PanGestureHandler>

0 个答案:

没有答案
相关问题