Leaflet/OpenLayers3 使用velocity.js 改变动画大小

Question

我正在尝试使用地图的velocity.js 制作动画。我尝试了 2 个不同的库：leaflet 和 openlayers3。

这里是 jsfiddles：leaflet，openlayers3

传单动画在我的 chrome 上很流畅，但在 firefox、edge 甚至 qt 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);});

开放层

$(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

免责声明：如果您坚持使用 Velocity，这绝不是一个有效的答案，但我想我会把它放在这里，因为我认为没有必要引入整个动画库来完成可以轻松完成的事情使用标准 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 的“resize”事件似乎没有触发（需要进一步研究，但我现在时间不多）通过 CSS 动画。所以我使用了来自CSS Element Queries 的ResizeSensor，以便在容器调整大小时能够在地图实例上调用invalidateSize。

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/EyQFbm?p=preview