React Native Map (Airbnb) + анимация маркеров

Я хочу анимировать маркеры React-native-maps {Google}.

Пробовал с анимированным модулем, но маркеры не позволяют использовать сложные стили.

Есть ли какая-либо функция для изменения координат маркера и придания ему анимации? Например:

marker.setAnimation(google.maps.Animation.BOUNCE);

Я пробовал с:

<MapView.Marker.Animated>

Но я не могу создать эффект. Есть ли функция, которая редактирует координаты как падение анимации?


react-native google-maps animation markers react-native-maps
person 0123    schedule 15.07.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Собственный маркер карты React по умолчанию «не анимированный», он не может принимать изображения в формате gif, спрайты, анимационные API и т. д. . Тем не менее, я смог анимировать его сложным способом с помощью перехода изображения. Вот мой пример:

constructor(props, context) {
  super(props, context);
  this.state = {
    startTransition: 1,
    endTransition: 4,
  };
}

componentDidMount() {
  this.animate();
}

animate() {
  const {startTransition, endTransition} = this.state;
  if(startTransition < endTransition){
    let currentTransition = startTransition + 1;
    this.setState({startTransition: currentTransition});
  } else {
    this.setState({startTransition: 1});
  }
  let x = setTimeout(()=>{
    this.animate()
  }, 500);
}

renderImg(imgTrans) {
  if(imgTrans === 1) {
    return require('./walk1.png');
  }
  if(imgTrans === 2) {
    return require('./walk2.png');
  }
  if(imgTrans === 3) {
    return require('./walk3.png');
  }
  if(imgTrans === 4) {
    return require('./walk4.png');
  }
}

render() {
  const {startTransition} = this.state;
  return (
    <MapView.Marker
      coordinate={tapCoords}
      image={this.renderImg(startTransition)}
    >
  )
}

Вот как я сделал анимацию на данный момент.

person Website Is Fun    schedule 23.08.2017