如何在设置字体大小动画时将文本保持在同一位置？反应本机

Question

我正在研究文本缩放，我想在其中缩放文本但保持 x 位置。现在，我正在缩放文本，但它失去了当前位置。有人可以帮我解决吗？

<Animated.View style={{ transform: [{ translateY: transText }] }}>

                                    <Animated.View onLayout={({ nativeEvent: { layout: { width, height } } }) => {
                                        label.current = { width, height };
                                    }} style={{ width: width - (width / 3), transform: [{ scale: textScale }, { translateX: labelTransX }, { translateY: labelTransY }], justifyContent: 'flex-end' }}>
                                        <TouchableWithoutFeedback onPress={handleMenu}>
                                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                <View>
                                                    <Animated.Text style={{ color: isDarkMode ? colors.TextBodyL : 'black', fontSize: 28, fontWeight: 'bold' }} numberOfLines={1}>
                                                        {mainLabel}
                                                    </Animated.Text>
                                                </View>
                                                <Animated.View style={{ transform: [{ rotate: rotate.interpolate({ inputRange: [0, 180], outputRange: ['0deg', '180deg'], extrapolate: 'extend' }) }] }}>
                                                    <Icon name={'caret-down-outline'} size={20} color={isDarkMode ? colors.TextBodyL : 'black'} />
                                                </Animated.View>
                                            </View>
                                        </TouchableWithoutFeedback>
                                    </Animated.View>

                                    <Animated.View style={{ transform: [{ translateY: labelTransY }] }}>
                                        <Text style={{ color: isDarkMode ? colors.TextBodyL : colors.TextBodyD }}>
                                            {notesState.length} notes
                                        </Text>
                                    </Animated.View>

                                </Animated.View>

上面的这段代码以某种方式使文本保持其位置，但不太准确。

Answer 1

有几个选项。

简单：将您的文本放入 justifyContent: 'center', alignItems: 'center'
的容器中
更烦人：将负 marginTop 和 marginLeft 添加到您的动画文本属性中，但将该数量乘以 fontSize 的变化，再乘以 PixelRatio/fontScale.

希望第一个选项适合你；如果没有，请告诉我您是否需要有关第二个的更多信息。

如何在设置字体大小动画时将文本保持在同一位置？反应本机

How to keep text on Same position while animating it's Font Size? React Native

javascript

android-animation

react-native