Анимация на Marker

sokolirasaha11 commented 2 years ago

Добрый день, не понимаю как докрутить анимацию на маркер. Нужно что бы маркер двигался по разным координатам, но это получается рывками. Помимо этого всего, сейчас я использую для маркера функцию, которая позволяет нам менять его направление (rotate)

function MyMarker(props) {
    const { rotate, ...p } = props;
    const marker = useRef();
    useEffect(() => {
        if (marker.current) {
            // не уверен, что 0 отработает корректно, поэтому лучше использовать какое-то положительное число
            marker.current.animatedRotateTo(rotate, 10);
        }
    }, [rotate])
    const points = useRef();
    useEffect(() => {
        if (marker.current) {
            // не уверен, что 0 отработает корректно, поэтому лучше использовать какое-то положительное число
            marker.current.animatedRotateTo(rotate, 10);
        }
    }, [rotate])
    return <Marker ref={marker} {...p} />

}

Есть варианты докинуть анимацию на маркер? Возможно это проще чем кажется, но я пока не могу этого сделать.

ownikss commented 2 years ago

В примере выше дважды прописан эффект для rotate. Судя по коду с этим проблем быть не должно

Для перемещения маркера нужно использовать animatedMoveTo. При этом важно не изменять положение маркера, которое передается через пропсы - иначе маркер перерендерится с новыми координатами и поэтому происходят рывки

Код для вашей задачи будет примерно таким:

function MyMarker(props) {
    const { rotate, coords, ...p } = props;
    const initialCoords = useRef({...coords});
    const marker = useRef();
    useEffect(() => {
        if (marker.current) {
            marker.current.animatedRotateTo(rotate, 10);
        }
    }, [rotate])
    const points = useRef();
    useEffect(() => {
        if (marker.current) {
            marker.current.animatedMoveTo(coords, 10);
        }
    }, [coords])
    return <Marker ref={marker} {...p} coords={initialCoords} />
}

sokolirasaha11 commented 2 years ago

Супер! Спасибо большое!

microinginer commented 1 year ago

@ownikss Добрый вечер, у меня все таки не получился использовать данный метод она не работает у меня

Сделал компонент CarMarker

import React, {useEffect, useRef} from 'react';
import {Marker} from 'react-native-yamap';

export default function CarMarker(props) {
  const {rotate, ...p} = props;
  const marker = useRef(null);
  useEffect(() => {
    if (marker.current) {
      marker.current.animatedRotateTo(rotate, 10);
    }
  }, [rotate]);

  return <Marker ref={marker} {...p} />;
}

Использую его так

      <YaMap
        initialRegion={{
          lat: 55.755864,
          lon: 37.617698,
          zoom: 12,
        }}
        style={styles.mapContainer}>
        {cars.length > 0 &&
          cars.map(car => {
            return (
              <CarMarker
                source={carIcon}
                key={car.id}
                scale={0.3}
                onPress={e => {
                  console.log(car);
                }}
                rotate={car.last_position.direction}
                point={{lat: car.last_position.lat, lon: car.last_position.lng}}
                visible={isShowCar}
              />
            );
          })}
      </YaMap>

Что не так делаю?

volga-volga / react-native-yamap

Анимация на Marker #127