Листовки/OpenLayers3 изменяют размер анимации с помощью velocity.js

Question

Я пытаюсь сделать анимацию с помощью velocity.js карты. Я попробовал две разные библиотеки: leaflet и openlayers3.

Вот jsfiddles: leaflet, openlayers3

Листовка анимация гладкая на моем хром, но не на FireFox, края или даже кварт WebView.

Я знаю, что invalidateSize()/updateSize() просто измените положение плиток и загружайте новые, но я хочу, чтобы они создавали гладкую анимацию.

желание кто-то видел этот вид анимации. Или знаете, как я могу решить проблему, спасибо.

листовка

$(document).ready(function() { 
var position = { 
    lat: 43.180176, 
    lng: 13.792964, 
    zoomLevel: 4 
}; 

var swBound = L.latLng(-90, -180); 
var neBound = L.latLng(90, 180); 
var maxBounds = L.latLngBounds(swBound, neBound); 

var entityMap = L.map($("#smallMapContainer")[0], { 
    minZoom: 2, 
    maxBounds: maxBounds, 
    zoomControl: false 
}); 

var streetMapURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; 

L.tileLayer(streetMapURL, { 
    maxZoom: 18 
}).addTo(entityMap); 

//entityMap.fitWorld(); 
entityMap.setView(L.latLng(position.lat, position.lng), position.zoomLevel); 
var nextIndexes = 0; 

var aaa = function() { 
    var smallMapPosition = $("#smallMapContainer").position(); 
    var newW = $("body").width() - 90; 
    var newH = $("body").height() - 90; 

    var newX = smallMapPosition.top + newH/2 - 100; 
    var newY = smallMapPosition.left + newW/2 - 150; 

    $("#smallMapContainer").velocity({ 
     top: newX, 
     left: newY 
    }, { 
     duration: 500, 
     complete: function() { 
      $("#smallMapContainer").velocity({ 
       width: newW, 
       height: newH, 
       top: smallMapPosition.top, 
       left: smallMapPosition.left 
      }, { 
       duration: 1000, 
       progress: function() { 
        entityMap.invalidateSize(); 
       }, 
       complete: function() { 
        if (nextIndexes++ % 2 == 0) { // with animation 
         entityMap.setView(L.latLng(55.751674, 37.637059), position.zoomLevel); 
        } else { 
         entityMap.setView(L.latLng(43.180176, 13.792964), position.zoomLevel); 
        } 

        $("#smallMapContainer").velocity({ 
         width: 300, 
         height: 200, 
         top: newX, 
         left: newY 
        }, { 
         delay: 1000, 
         duration: 1000, 
         progress: function() { 
          entityMap.invalidateSize(); 
         }, 
         complete: function() { 
          $("#smallMapContainer").velocity({ 
           top: smallMapPosition.top, 
           left: smallMapPosition.left 
          }, { 
           duration: 1000 
          }); 
         } 
        }); 
       } 
      }); 
     } 
    }); 
} 
aaa(); 

setTimeout(function() { 
    aaa(); 
}, 10000);}); 

OpenLayers

$(document).ready(function() { 
var view = new ol.View({ 
    // the view's initial state 
    center: ol.proj.fromLonLat([13.792964, 43.180176]), 
    zoom: 4 
}); 
var map = new ol.Map({ 
    layers: [ 
     new ol.layer.Tile({ 
      preload: 4, 
      source: new ol.source.OSM() 
     }) 
    ], 
    loadTilesWhileAnimating: true, 
    target: 'smallMapContainer', 
    controls: ol.control.defaults({ 
     attributionOptions: ({ 
      collapsible: false 
     }) 
    }), 
    view: view 
}); 
nextIndexes = 0; 

var animateMap = function() { 
    var smallMapPosition = $("#smallMapContainer").position(); 
    var newW = $("body").width() - 90; 
    var newH = $("body").height() - 90; 

    var newX = smallMapPosition.top + newH/2 - 100; 
    var newY = smallMapPosition.left + newW/2 - 150; 

    $("#smallMapContainer").velocity({ 
     top: newX, 
     left: newY 
    }, { 
     duration: 500, 
     complete: function() { 
      $("#smallMapContainer").velocity({ 
       width: newW, 
       height: newH, 
       top: smallMapPosition.top, 
       left: smallMapPosition.left 
      }, { 
       duration: 1000, 
       progress: function() { 
        map.updateSize(); 
       }, 
       complete: function() { 
        if (nextIndexes++ % 2 == 0) { 
         var pan = ol.animation.pan({ 
          duration: 1000, 
          source: /** @type {ol.Coordinate} */ (view.getCenter()) 
         }); 
         map.beforeRender(pan); 
         view.setCenter(ol.proj.fromLonLat([37.637059, 55.751674])); 
        } else { 
         var pan = ol.animation.pan({ 
          duration: 1000, 
          source: /** @type {ol.Coordinate} */ (view.getCenter()) 
         }); 
         map.beforeRender(pan); 
         view.setCenter(ol.proj.fromLonLat([13.792964, 43.180176])); 
        } 

        $("#smallMapContainer").velocity({ 
         width: 300, 
         height: 200, 
         top: newX, 
         left: newY 
        }, { 
         delay: 1000, 
         duration: 1000, 
         progress: function() { 
          map.updateSize(); 
         }, 
         complete: function() { 
          $("#smallMapContainer").velocity({ 
           top: smallMapPosition.top, 
           left: smallMapPosition.left 
          }, { 
           duration: 1000 
          }); 
         } 
        }); 
       } 
      }); 
     } 
    }); 
} 

animateMap();}); 

Answer 1

Предупреждение: Если вы adament об использовании Velocity это отнюдь не означает VALIDATE ответ, но я думал, что i'de брось здесь, потому что я думаю, что нет необходимости тянуть всю библиотеку анимации, чтобы выполнить что-то, что можно легко сделать со стандартным CSS.

Вы можете добиться того же эффекта с помощью CSS ключевого кадра анимации, он будет работать более гладко, чем при использовании внешней библиотеки анимации:

#leaflet { 
    width: 300px; 
    height: 200px; 
    position: absolute; 
    top: 55px; 
    left: 45px; 
    animation-name: move; 
    animation-duration: 5s; 
    animation-iteration-count: infinite; 
    animation-direction: normal; 
    animation-timing-function: linear; 
} 

@keyframes move { 
    0% { 
     top: 55px; 
     left: 45px; 
    } 
    25% { 
     top: calc(50% - (200px/2)); 
     left: calc(50% - (300px/2)); 
     width: 300px; 
     height: 200px; 
    } 
    50% { 
     top: calc(5%); 
     left: calc(5%); 
     width: 90%; 
     height: 90%; 
    } 
    75% { 
     top: calc(50% - (200px/2)); 
     left: calc(50% - (300px/2)); 
     width: 300px; 
     height: 200px; 
    } 
    100% { 
     top: 55px; 
     left: 45px; 
    } 
} 

Единственный недостаток/проблема заключается в том-то (надо смотреть дальше в этом , но на данный момент я неактивен) L.Map 's resize' событие, похоже, не срабатывает при изменении размера контейнера карты с помощью анимации CSS. Поэтому я использовал ResizeSensor от CSS Element Queries, чтобы иметь возможность позвонить invalidateSize на экземпляр карты, когда контейнер будет изменен.

Вот рабочий пример на Plunker: http://plnkr.co/edit/EyQFbm?p=preview