Клуб API Карт

Найдено на тему «анимация»:
Конфликт анимаций
Мелюков Сергей
5 апреля 2017, 12:41

Привет!

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

Но если в момент такой подстройки сделать setCenter и задать ему duration, то карта начинает дергаться и центруется не в то место, куда было указано и уж точно не в то месте, где была бы видна метка и балун.

Фактически, setCenter + duration во время подстройки карты, запускает одну анимацию во время другой.

Я вижу несколько вариантов решения:

игнорировать другие анимации во время подстройки карты
прервать подстройку, если был вызван setCenter
отключить автоматическую подстройку при выходе метки за пределы карты
иметь возможность определить - находится ли карта в состоянии анимации, чтобы просто не делать setCenter
иметь возможность дождаться окончания подстройки и потом вызвать setCenter
Что-то  из этого реализуемо?

2 комментария
анимация,метка
Анимация распадания точек кластеризатора
Удалённый пользователь
18 сентября 2015, 15:41

Доброго времени суток. Не подскажете, есть ли у Яндекс Карт возможность прикрутить эффект распадания точек как на 2Гис. Пример http://api.2gis.ru/doc/maps/examples/external-modules/, при скроле кластер распадается с небольшой анимацией. Может кто-нибудь поделится ссылкой на пример для яндекс карт?

анимация,кластер
Анимация фильтрации маркеров
nolan23
6 июля 2015, 10:16

Написал статью на хабр.

Может, будет кому интересно.

http://habrahabr.ru/post/261859/

статьи пользователей,анимация,API 2.1
Анимация движения по координатам.
mkoldushko
28 января 2015, 19:34

Друзья! Мне нужно сделать анимацию движения по координатам на карте. Я прочитал эту тему, но мало что понял и к тому же анимация перестала работать. Помогите плиз)

Ссылка на код

1 комментарий
маршрутизация,API 2.1,анимация
Можно ли сделать перемещение метки с анимацией?
alexey-bolonia
22 сентября 2014, 13:34

Необходимо передвигать метки на карте, но, крайне важно сделать это передвижение не мгновенным, а плавным.
Был бы очень благодарен советчикам, наставьте на путь истинный, куда копать, а дальше я сам разберусь.

2 комментария
метка,API 2.1,анимация
Анимация смены координат точки
Иван Пилюгин
5 августа 2013, 14:07

Добрый день.

Возможно ли анимировать смену координат точки? Другими словами, реализовать плавное перемещение точки по карте. Может, пример есть какой?

1 комментарий
метка,API 2.0,анимация
JQuery и балуны карт
Роман
17 июля 2013, 02:46

Добрый вечер, господа.

Требуется, чтобы при наведении курсора на карту открытый балун плавно исчезал. После изучения кода страницы, стало очевидно, что балун формируется в блоке .ymaps-overlay-stepwise-pane, а в .ymaps-shadows-pane находится его тень.

Очевидно, что командой $('.ymaps-overlay-stepwise-pane, .ymaps-shadows-pane').animate({opacity: "0"}, 500); возможно добиться плавного скрытия блоков за полсекунды (как должно было произойти с любым обычным дивом), но ничего не получается.

Кто-нибудь сталкивался с подобной задачей? Как и возможно ли решить проблему? 

1 комментарий
API 2.0,события,jQuery,балун,анимация
ymaps.templateLayoutFactory
iytin-ne
14 июля 2013, 01:44

Здравствуйте. возникла непонятная проблемма с layout меток, почемуто при наведении на метку курсора, стриница виснет. при этом ни одной ошибки консоль не выдает в режиме debug после большого количества попыток выяснилось что 

 ymaps.layout.storage.add('onecar',ymaps.templateLayoutFactory.createClass(//лаяут для активного объекта на карте

        '<img class="obj-route" src="images/icons/arrow2.png" style="-webkit-transform: rotate($[properties.deg]deg); -moz-transform: rotate($[properties.deg]deg);-o-transform: rotate($[properties.deg]deg); -ms-transform: rotate($[properties.deg]deg); ">'

    ));

глючит из-за  style="-webkit-transform: rotate($[properties.deg]deg); -moz-transform: rotate($[properties.deg]deg);-o-transform: rotate($[properties.deg]deg); -ms-transform: rotate($[properties.deg]deg);   по крайней мере если я это удаляю то вроде ничего не глючит, но мне нужен интеравктивный поворот метки.

2 комментария
метка,анимация,API 2.0,макеты
Аналог marker.setAnimation(googl
Георгий Скребцов
5 июля 2013, 18:01

Имеется ли в API яндекс карт аналог функции гугл какрт marker.setAnimation(google.maps.Animation.BOUNCE); ? 

В частности, интересует возможность анимировать момент добавления маркера. 

Пример анимации можно посмотреть тут http://adoptahydrant.org/

1 комментарий
метка,API 2.0,анимация
Плавное увеличение при клике на кластер
Артур Покрашенко
3 июля 2013, 14:08

При клике на кластер он распадается на другие и карта увеличивается рывком.

1. Как сделать так, чтобы масштаб карты менялся плавно при автоматическим его изменении при клике на кластер?

2. Предполагается ли в будущем АПИ поддержка анимации распада кластеров?

Спасибо.

4 комментария
метка,кластеризатор,API 2.0,анимация
Анимация движения
DMX1988
21 июня 2013, 11:36

нашел в клубе замечательную статью Жмак, проблема в тос что не видно этой движщейся метки елки палки, но о том что работает код свидетельсвует появления надписи Приехали в конце маршрута =)

 

Почему не видно движущейся метки?

3 комментария
маршрутизация,API 2.0,анимация
анимация маркера как на realty.yandex.ru
Евгений
13 марта 2013, 09:24

когда наводим на объявление в списке, маркер увеличивается

как сделать само это увеличение?

3 комментария
метка,API 2.0,анимация
Вращение Placemark
xtestosteron
26 февраля 2013, 10:55

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

7 комментариев
метка,API 2.0,анимация
Пример: анимация движения по маршруту
tekunova
5 сентября 2012, 15:53

Огромное спасибо 

Пример: анимация движения по маршруту

Пользователь  сделал и поделился с нами отличным примером анимации движения по маршруту.



Пример красивый и довольно простой: он не требует ничего, кроме API Яндекс.Карт и браузера. Маршрут расчитывается заранее и сохраняется, поэтому ситуация, когда пользователь переключает вкладку и т.п. не учитывается.

Посмотреть пример в новом окне.

Код на гитхаб.

Спасибо автору примера!

P.S.: Если вы сделали интересный или полезный пример, присылайте его нам в клуб, facebook или на почту ymapsapi@ya.ru.

API 2.0,маршрутизация,примеры пользователей,примеры,анимация
Перенести на 2.0
backhood
11 августа 2012, 16:02

Ребят, помогите, пожалуйста перенести сей пример на 2.0 http://ymlib.narod.ru/1.1/demos/animate.html

Уже по - всякому испробовал, никак не хочет работать =(

  

 

<script type="text/javascript">

 

        // Как только будет загружен API и готов DOM, выполняем инициализацию

        ymaps.ready(init);

 

        function init () {

            var myMap = new ymaps.Map("map", {

                    center: [57.131311, 34.576128],

                    zoom: 5

                });

 

            // Прокладывание маршрута от станции метро "Смоленская"

            // до станции Третьяковская (маршрут должен проходить через метро "Арбатская").

            // Точки маршрута можно задавать 3 способами:  как строка, как объект или как массив геокоординат.

            ymaps.route([

                'Москва, метро Смоленская',

                {

                    type: 'viaPoint', // метро арбатская - транзитная точка (проезжать через эту точку, но не останавливаться в ней)

                    point: 'Москва, метро Арбатская'

                },

                [55.74062, 37.62561] // метро "Третьяковская"

            ], {

                // Опции маршрутизатора

                mapStateAutoApply: true // автоматически позиционировать карту

            }).then(function (route) {

                myMap.geoObjects.add(route);

                  // Получаем первый маршрут (от метро "Крылатское" до "Молодежная").

                  var way = route.getPaths().get(0),

                      // Маршрут состоит из сегментов. Сегмент - участок маршрута, который нужно проехать

                      // до следующего изменения направления движения.

                      segments = way.getSegments(),

                      // открываю массив с точками

                      moveList = [];

                      // выполняю операцию для всех сегментов

                  for (var i = 0; i < segments.length; i++) {

                      // беру координаты начала и конца сегмента

                      var street = segments[i].getCoordinates();

                      // и добавляю их в массив

                      moveList += (street);

                  }

                     // пробую вывести - все отлично, выводится то, что нужно

                    alert(moveList); 

                  // а вот дальше затуп =(

                  // вместо класса машинки использовал метку

                // Создаем машинку

                myGeoObject = new ymaps.GeoObject({

                    // Геометрия.

                    geometry: {

                        // Тип геометрии - точка

                        type: "Point",

                        // Координаты точки.

                        coordinates: [55.8, 37.8]

                    }

                });

             // вывел на карту

            myMap.geoObjects

                .add(myGeoObject);

               // тут я вообще смутно представлю что происходит, судя по всему тут и загвоздка ...

               // Запуск анимации

                myGeoObject.moveTo(moveList, function () {

                    alert("Приехали!"); 

                });

            // тут сообщение в случае ошибки (опять все понятно) =|

            }, function (error) {

                alert("Возникла ошибка: " + error.message);

            });

        }

    </script>

 

7 комментариев
маршрутизация,анимация
Анимация маркеров
anton.frolov
27 июня 2012, 01:21

Есть ли анимации маркеров при добавлении/удалении с карты?

4 комментария
метка,API 2.0,анимация
Перемещение по карте
Удалённый пользователь
8 июня 2012, 19:37

Ребята, помогите пожалуйста. Работаю с API2. Вот функция, в которой я пытаюсь реализовать перемещение. Данные из базы данных успешно выгружаются в переменную val,  о чем собственно, и свидетельствует проверка alert(). 

 

function searchSt()

{

     $.post('maps/search_station',{num: $('#numSt').attr('value')},function(val){

             myMap.panTo([val],

                {

            flying: true,

            duration: 3000

                });

    })

}

 

 Но в результате работы такого кода меня перебрасывает аж в Залив Бенин, хотя из БД считтываются координаты территории Украины. Самое интересное, если в методе panTo вместо переменной val явно задать координаты, то перемещение проходит корректно. Подскажите пожалуйста.

 

6 комментариев
анимация
panTo - задать масштаб после перемещения карты + база координат населённых пунктов РФ
sergej-serov
27 мая 2011, 16:44

Доброго дня, коллеги-разработчики!

1) На выпадающий список с городами повешен обработчик -> центр карты перемещается на новый город.

Кто работал с этим методом - подскажите как задать масштаб после перемещения.

Посколькуо сейчас если изменить масштаб, например до уровня дома, то этот масштаб остаётся и после перемещения в другой город.

 

function a_yandex_map_button_region_select(map, destinations) {

    YMaps.jQuery('#a_yandex_map_button_region_select').change(function() {

        var new_region = YMaps.jQuery(this).val(

        map.panTo(destinations[new_region], {flying: 1, callback: _a_yandex_map_set_zoom}

        return false;

    }   

}

 

 

2) Массив с городами задаётся при создании карты. Получается, что необходимо знать координаты центра всех городов, чтобы можно было переместить карту на каждый из них. При использовании геокодера не удалось добиться однозначно верного ответа - поскольку обычно возвращается список из нескольких населённых пунктов.

 

YMaps.jQuery(function() {

    var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0], destinations = {

           'Москва' : new YMaps.GeoPoint(37.609218,55.753559),

           'Санкт-Петербург' : new YMaps.GeoPoint(30.313497,59.938531),

           'Екатеринбург' : new YMaps.GeoPoint(60.617435,56.829748)

       }

   

..... много кода ....

};

 

 

Заранее спасибо за помощь!!

5 комментариев
анимация,геокодирование
Анимированный оверлей
rodlex
22 декабря 2010, 12:39

Стандартные объекты на карте (метки, ломаные и многоугольники) являются статичными. Предлагаю вашему вниманию анимированную машинку, которую можно запустить, например, по вашей схеме проезда. Для ее рисования используется спрайт из 8ми картинками, поэтому ее иногда заносит :)

Использовать ее совсем просто:

// Создаем машинку и добавляем ее на карту
var car = new ymlib.animate.Car();
map.addOverlay(car);

// Запуск анимации
car.moveTo([new YMaps.GeoPoint(37.594646, 55.735397), new YMaps.GeoPoint(37.610997,55.730094)], function () {
    alert("Приехали!");
});

Посмотреть пример использования

Для использования необходимо подключить один файлик
<script src="http://ymlib.narod.ru/1.1/ymlib.js" type="text/javascript"></script>
Также вы можете посмотреть исходные коды на github, они же являются и документацией)
7 комментариев
анимация,API 1.x
Изменение масштаба при плавном перелете
lehion
27 октября 2010, 13:10

Здравствуйте. Воспользовался примером плавного перелета.

из примера:

 // Центрируем карту на первом городе
map.setCenter(destinations['Москва'], 10);

Если я ставлю масштаб 14, то при перелете в другой город он тоже имеет масштаб 14.

Мне нужно для каждой новой точки свой масштаб. Подскажите, пожалуйста, как это сделать?

И еще вопрос. Как добавить свою картинку на карту? Например лого компании в левый нижний угол. Она должна показываься всегда на своем месте, не зависимо от масштаба и координат.

Спасибо!

2 комментария
анимация