使用 useNativeDriver 反应本机动画位置（左和右）

Question

是否可以扩展 ReactNative 以允许使用本机驱动程序对元素的位置进行动画处理。

虽然您可以通过 translateX 设置动画，但在这种情况下，要通过更改左右样式参数来减小元素的大小。

原生动画不支持 left、right、marginLeft、marginRight、paddingLeft 和 paddingRight。有没有解决这个问题的方法或一些涉及缩放的巧妙想法，不会扭曲元素。

export class ViewScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state= {
            scrollY: new Animated.Value(0)
        }
    }

    render() {
        var VSStickyElementsMargin = this.state.scrollY.interpolate({
            inputRange: [0, 44],
            outputRange: [0, 4]
        });

    return (

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

            <Animated.View style={[
                {left: VSStickyElementsMargin},
                {right: VSStickyElementsMargin}
            ]}>
                <Text>I am content that is not to become distorted</Text>
            </Animated.View>

        </Animated.ScrollView>
        )
    }
}

Answer 1

无法在非变换或不透明度的属性上使用本机驱动程序。

如果我理解您要正确实现的目标，您应该使用 translateX 将元素移出其父元素并在需要时将其设置为动画重新显示在视图中，使用隐藏在父元素上的溢出。

或者，如果这不是您想要的效果，请尝试查看 layoutanimation api，因为使用它来驱动值比动画非 transform/opacity 属性可以获得更好的性能。

使用 useNativeDriver 反应本机动画位置（左和右）

React Native animate position (Left & Right) using useNativeDriver

react-native

position

react-animated