使用插值时如何初始设置不透明度

Question

我有一个相当大的问题，当使用插值滚动值时，我无法将图像的初始不透明度设置为 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',
    });

Answer 1

尝试使用 0.01 作为初始值。有一个错误会将 0 变为 null，这将导致不透明度值被忽略。