3

我正在使用react-native-maps并希望根据ScrollViewx 偏移量逐渐为活动和非活动标记的比例设置动画。(下图更好地描述了它)

我的方法是为每个标记创建new Animated.Value并为每个标记创建Interpolate ScrollView偏移量:

//Container
constructor(props) {
    super(props);

    this.state = {
      ...
      scale: [],
      opacity: []
    }
  }

componentWillReceiveProps(props) {

  if (props.places.length) {

    const scale = [];
    const opacity = [];

    props.places.forEach((xx, ii) => {

      this.state[`scale${ii}`] = new Animated.Value(0.5);
      this.state[`scale${ii}`] = this._scrollX.interpolate({
          inputRange: [vw * (ii - 1), vw * ii, vw * (ii + 1)],
          outputRange: [0.5, 1, 0.5],
          extrapolate: 'clamp'
       });
      scale.push(this.state[`scale${ii}`]);

      this.state[`opacity${ii}`] = new Animated.Value(0);
      this.state[`opacity${ii}`] = this._scrollX.interpolate({
          inputRange: [vw * (ii - 1), vw * ii, vw * (ii + 1)],
          outputRange: [0, 1, 0],
          extrapolate: 'clamp'
      });
      opacity.push(this.state[`opacity${ii}`]);
    });

    this.setState({
      scale,
      opacity,
    });
  }

  render() {
    return (
      <PlacesMap scale={this.state.scale} opacity={this.state.opacity} />                  
      <ScrollView onScroll={this._onScroll} ... />
    )
  }

  _onScroll = Animated.event(
      [{ nativeEvent: { contentOffset: { x: this._scrollX }}}],
      { useNativeDriver: true }
    );




//PlacesMap
....

    render {
        return (
            <MapView.Animated>

                {   places && 
                    places.map((place, ii) => {
                        return (
                            <PlaceMarker
                              key={place.id.toString()}
                              place={place}
                              scale={scale[ii]}
                              opacity={opacity[ii]}
                            />
                        )
                     })
                 }

            </MapView.Animated>
     )}

也许有一种我不知道的更优雅(性能)的方法,我不需要为每个标记创建new Animated.ValueInterpolators使用它,我可以获得相同的结果?

在此处输入图像描述

4

0 回答 0