Реагируйте на естественную позицию анимации (влево и вправо), используя useNativeDriver - PullRequest
Новая
       51

Реагируйте на естественную позицию анимации (влево и вправо), используя useNativeDriver

0 голосов
/ 04 марта 2020

Можно ли расширить ReactNative, чтобы разрешить анимацию позиции элемента с помощью встроенного драйвера.

Хотя вы можете анимировать с помощью translateX, в этом случае размер элемента будет уменьшен путем добавления путем изменения и его левый и правый параметры стиля.

Ни левый, ни правый, 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>
        )
    }
}

1 Ответ

1 голос
/ 04 марта 2020

Невозможно использовать встроенный драйвер для свойств, которые не являются преобразователями или непрозрачными.

Если я правильно понимаю, что вы пытаетесь достичь правильно, вы должны использовать translateX, чтобы переместить элемент из его родителя и анимировать когда вам это понадобится, используйте переполнение, скрытое на родительском элементе.

В качестве альтернативы, если это не тот эффект, который вам нужен, попробуйте посмотреть на layoutanimation api, так как вы можете добиться лучшей производительности, используя это для получения значений, чем анимация свойств без преобразования / непрозрачности.

...