使用插值时如何显着设置不透明度

Question

我有一个很大的问题，在使用插值卷轴值时，我无法将图像最初的不透明度设置为0。

因此，当我使用logoOpacity值Animation.View是完全可见的时，但是如果我使用__opacity，它确实应用了有效的值，并且图像部分可见。

使用logoOpacity变量在我开始滚动时确实可以正常工作 - 这全是关于初始值 - 我无法设置为隐藏视图。

如何实现在滚动上插值并启动动画。查看可见性从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是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，这将导致忽略不透明度值。