使用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，因为与使用非转换/不透明度属性设置动画相比，使用它来驱动值可以获得更好的性能。