0

我有一个位于屏幕中央的图像，我希望它移动到左上角并缩小尺寸以适应我的乞丐抽屉在屏幕上的位置。

乞丐只能靠近顶部或底部，它的行为就像一个抽屉，因此我忽略了 x 值。我可以根据 dy 值将其捕捉到任一位置。

挑战在于屏幕尺寸不同，因此“animatedStyles”中的 translateX 和 translateY 并非对所有屏幕尺寸都有用。我在某处读过你可以使用夹子来确保它适合你的屏幕，但我不确定如何正确使用它。

我的想法是，我需要更改我的“animatedStyles”，因为乞丐代码按我的预期工作。任何帮助都会很棒。

minDrawHeight = 50; // its the screen height mines this value
maxDrawHeight = 100 //

componentWillMount() {

    this.animation = new Animated.ValueXY({ x: 0, y: SCREEN_HEIGHT - this.minDrawHeight })

    this.panResponder = PanResponder.create({
        onMoveShouldSetPanResponder:()=> true,
        onPanResponderGrant: (evt, gestureState) => {
            this.animation.extractOffset()
        },
        onPanResponderMove: (evt, gestureState) => {
            console.log('height', SCREEN_HEIGHT);
            /*console.log('the cdata be staetid(%o), moveX(%o),moveY(%o), x0(%o),y(%o),dx(%o),dy(%o),vs(%o),VY(%o)',gestureState.stateID,gestureState.moveX,
                gestureState.moveY,gestureState.x0,gestureState.y0,
                gestureState.dx,gestureState.dy,gestureState.vx,gestureState.vy);*/

            this.animation.setValue({ x: 0, y: gestureState.dy })
        },
        onPanResponderRelease: (evt, gestureState) => {
            //check if you are going down from the lowest acceptable height
            // if you are srping back to the min height of the draw
            if ((gestureState.moveY > SCREEN_HEIGHT- this.minDrawHeight) && (gestureState.dy > 0)) {
                console.log('the option ',gestureState.moveY,gestureState.dy,SCREEN_HEIGHT-this.minDrawHeight );
                this.animation.flattenOffset();
                Animated.spring(this.animation.y, {
                    toValue: SCREEN_HEIGHT - this.minDrawHeight,
                    tension: 10,
                    useNativeDriver: false,
                }).start(()=>{
                    console.log('the new value', this.animation.y,SCREEN_HEIGHT - this.minDrawHeight)
                })
            }
            /*
                    IF you are at the lowest point but going up then automatically set to the highest point

            * */
            else if ((gestureState.moveY < SCREEN_HEIGHT- this.minDrawHeight) && (gestureState.dy < 0)) {
                this.animation.flattenOffset();
                Animated.spring(this.animation.y, {
                    toValue:this.maxDrawHeight,
                    tension: 80,
                    useNativeDriver: false,
                    //bounciness:12,
                    friction:5
                }).start()
            }
            /*
            *       IF you are at the highest point and still scrolling up
            *       then spring back to highest point
            *
            *
            * */
            else if ((gestureState.moveY < this.maxDrawHeight) && (gestureState.dy < 0)) {
                this.animation.flattenOffset();
                Animated.spring(this.animation.y, {
                    toValue:this.maxDrawHeight,
                    tension: 1,
                    useNativeDriver: false,
                }).start()
            }
            /*
            *          IF you are at the highest point and scrolling down set to lowest point
            *
            *
            * */
            else if ((gestureState.moveY > this.maxDrawHeight) && (gestureState.dy > 0)) {
                this.animation.flattenOffset();
                Animated.spring(this.animation.y, {
                    toValue:SCREEN_HEIGHT - this.minDrawHeight,
                    tension: 80,
                    useNativeDriver: false,
                    //bounciness:12,
                    friction:5
                }).start()
            }



        }
    })
}

render(){
let animateCardWidth = this.animation.y.interpolate({
        inputRange: [this.maxDrawHeight, SCREEN_HEIGHT-this.minDrawHeight],
        outputRange: [65, 175],
        extrapolate: "clamp"
    })

    let animateCardHeight = this.animation.y.interpolate({
        inputRange: [this.maxDrawHeight, SCREEN_HEIGHT-this.minDrawHeight],
        outputRange: [65, 175],
        extrapolate: "clamp"
    })
const animatedStyles = {
        transform: [
            {
                // Move the div by 120px to the left when value === 1
                translateX: this.animation.y.interpolate({
                    inputRange: [this.maxDrawHeight,SCREEN_HEIGHT-this.minDrawHeight],
                    outputRange: [-140, 0],

                    // Tells Animated to never go outside of the outputRange
                    extrapolate: 'clamp',
                })

            },
                {
                    translateY: this.animation.y.interpolate({
                        inputRange: [this.maxDrawHeight,SCREEN_HEIGHT-this.minDrawHeight],
                        outputRange: [-SCREEN_HEIGHT+500,0],
                        extrapolate: 'clamp',
                    })
                }

            ]
            }
 return (
       <Animated.View style={[{flex: 1, justifyContent: "center", alignItems: "center", backgroundColor:this.state.color}]}>
          <Animated.View style={[{{textAlign:"center", justifyContent:"center",alignItems: "center", backgroundColor:"#fff"}]}>
             <Animated.Image source={myImage} style={[animatedStyles,{resizeMode: "contain", height: animateCardHeight, width: animateCardWidth}]}/>
          </View>
          <Animated.View
                    {... this.panResponder.panHandlers}>
          DRAWER CODE HERE.....
          </Animated.View>
       </Animated.View>
 )


}
4

0 回答 0