React Native:react-native-maps。根据ScrollView偏移量为活动标记设置动画

时间:2017-03-20 11:38:41

标签: react-native react-native-maps

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

我的方法是为每个标记创建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可以得到相同的结果吗?

enter image description here

0 个答案:

没有答案