Question

当用户向下滚动页面时，需要一些动画以“共享/收藏夹栏”的边框半径动画化。从边界半径“ 25”到边界半径“ 0”。

How the share/favourite bar appears on screen before any scrolling is done. (notice the border radius and current width)

在动画边界半径的同时，当用户向下滚动足够远并且对导航栏保持粘性时，宽度必须延伸到屏幕的边缘。

After being scrolled

当前，我已经尝试实现translateX和/或translateY，scaleX之类的转换，但是它们的效果几乎不像我在此试图实现的一样。

这是我目前的代码，

state = {
    scrollY: new Animated.Value(0),
};

render() {

    const { navigation } = this.props;
    const articleContent = navigation.getParam('itemContent', 'NO-CONTENT');
    const styledContent = articleContent.concat(css);
    const articleImage = navigation.getParam('itemImage', 'NO-IMAGE');
    const articleTitle = navigation.getParam('itemTitle','NO-NAME');

    return(
        <SafeAreaView style={styles.articleRowContainer}>

            <StatusBar barStyle="light-content" />

            <Animated.ScrollView
                scrollEventThrottle={16}
                onScroll={Animated.event(
                    [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
                    { useNativeDriver: true }
                )}>     

                <ImageOverlay source={{uri: articleImage}}
                style={styles.articleImageStyling}
                overlayAlpha={0}
                contentPosition="bottom" />

                <Animated.View style={{
                    position: 'absolute',
                    top: 275,
                    left: 50,
                    right: 50,
                    height: 50,                     
                    borderRadius: 25,
                    backgroundColor: '#c09d6b',
                    //transform: [{scale: animationStyle }],
                    }}>

                    <Image source={require('./../../assets/images/1x/share_variant.png')} 
                    style={{
                        position: 'absolute',
                        top: 15,
                        right: 0,
                        bottom: 0,
                        left: 20,
                    }} />

                    <Text
                        style={{
                            position: 'absolute',
                            top: 15,
                            right: 0,
                            bottom: 0,
                            left: 50,
                            fontFamily: 'quicksand-medium',
                            fontSize: 16,
                        }}
                    >
                        SHARE
                    </Text>

                    <Image source={require('./../../assets/images/1x/favourite_border_black.png')} 
                    style={{
                        position: 'absolute',
                        top: 15,
                        right: 0,
                        bottom: 0,
                        left: 185,
                    }} />

                    <Text style={{
                        position: 'absolute',
                        top: 15,
                        right: 0,
                        bottom: 0,
                        left: 215,
                        fontFamily: 'quicksand-medium',
                        fontSize: 16,
                    }}
                    >
                        FAVOURITE
                    </Text>

                </Animated.View>



                <View style={styles.articleTitleContainer}>

                    <Text
                        style={styles.articleTitle}
                    >
                        {articleTitle}
                    </Text>

                </View>
                {/* Figure out how to add fonts to webpage */}
                <View style={styles.webViewContainer}>                      
                    <HTML html={styledContent} imagesMaxWidth={Dimensions.get('window').width}/>
                </View>
            </Animated.ScrollView>              
        </SafeAreaView>
)
}

谢谢

React-Native动画边框半径，宽度和导航栏的粘性

0 个答案: