Как изначально установить непрозрачность при использовании интерполяции - PullRequest
Новая
       25

Как изначально установить непрозрачность при использовании интерполяции

0 голосов
/ 03 марта 2019

У меня довольно большая проблема, когда я не могу изначально установить непрозрачность изображения как 0 при использовании интерполированного значения прокрутки.

Так, когда я использую значение logoOpacity, Animated.View полностью виден, но дляНапример, если я использую __opacity, он применяет действительное значение, и изображение частично видно.

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

Как выполнить интерполяцию при прокрутке и запустить Animated.View видимость от 0 до 100?

См. код ниже: 

import React, { Component } from 'react';
import {
  Animated,
  Platform,
} from 'react-native';
import {connectStyle} from "@shoutem/theme/index";

import { View } from '@shoutem/ui/components/View'
import { Text } from '@shoutem/ui/components/Text'
import { Image } from '@shoutem/ui/components/Image'


import { Fonts, Colors, Layout } from '../../constants';

const HEADER_MAX_HEIGHT = 260; //
const HEADER_MIN_HEIGHT = 160; // Layout.NAVIGATION_HEADER_HEIGHT; // Platform.OS === 'ios' ? 60 : 73;
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;

/**
 * https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e
 *
 */
class OpportunityBlock extends Component {
  constructor(props) {
    super(props);

    this.state = {
      scrollY: new Animated.Value(
          // iOS has negative initial scroll value because content inset...
          Platform.OS === 'ios' ? -HEADER_MAX_HEIGHT : 0,
      )
    };
  }

  render() {

    const { style } = this.props

    // Because of content inset the scroll value will be negative on iOS so bring
    // it back to 0.
    const scrollY = Animated.add(
        this.state.scrollY,
        Platform.OS === 'ios' ? HEADER_MAX_HEIGHT : 0,
    );

    // Small logo animations
    const logoOpacity = scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [0, 0, 1],
      extrapolate: 'clamp',
    });

    const __opacity = new Animated.Value(0.3);

    return (
        <View styleName={"vertical"}>

          {/* MAIN CONTENT SECTION **/}
          <Animated.ScrollView
              style={{ flex: 1 }}
              scrollEventThrottle={1}
              onScroll={Animated.event(
                  [{
                    nativeEvent: {
                      contentOffset: { y: this.state.scrollY }
                    }
                  }],
                  { useNativeDriver: true },
              )}
          >

            <View style={style.scrollViewContent}>
              <Text>XX</Text>
            </View>
          </Animated.ScrollView>

          <Animated.View
              style={[
                style.logoContainer,
                {
                  opacity: logoOpacity,
                },
              ]}
          >
            <Image
                styleName={'small'}
                source={{ uri: item.images[0].url }}
            />
          </Animated.View>
        </View>
    );
  }
}

const style = {
  content: {
    flex: 1,
  },
  logoContainer: {
    position: 'absolute',
    top: 0,
    left:0,
    opacity:0,
    // right: -100, // initial position
    marginTop:30,
    paddingLeft:10,
  },

  scrollViewContent: {
    // iOS uses content inset, which acts like padding.
    paddingTop: Platform.OS !== 'ios' ? HEADER_MAX_HEIGHT : 0 // paddingTop: HEADER_MAX_HEIGHT // Platform.OS !== 'ios' ? HEADER_MAX_HEIGHT : 0,
  }
}

// connect the component to the theme
export default connectStyle('mbm.common.OpportunityBlock', style)(OpportunityBlock);

Тествариант использования: кажется, что проблема связана с анимированным значением scrollY, потому что этот случай не работает должным образом, и изображение полностью видно, даже если значение scrollY равно 0. Может быть, что-то со встроенным значением прокрутки? 

const logoOpacityDoesNotWork = scrollY.interpolate({
  inputRange: [0, 0, 250],
  outputRange: [0.1, 0.1, 1],
  extrapolate: 'clamp',
});


const logoOpacityWorks = (new Animated.Value(120)).interpolate({
      inputRange: [0, 0, 250],
      outputRange: [0.1, 0.1, 1],
      extrapolate: 'clamp',
    });

1 Ответ

0 голосов
/ 09 марта 2019

Попробуйте использовать 0,01 в качестве начального значения.Существует ошибка, которая превратит 0 в ноль, что приведет к игнорированию значения непрозрачности.

...