Leaflet 传单/OpenLayers3使用velocity.js更改大小动画

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

传单

，和

openlayers3

以下是jsfiddles:

传单动画在我的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);});

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();});

---

免责声明：如果你习惯使用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动画调整贴图容器大小时不会触发。因此，我使用ResizeSensor from，以便在容器调整大小时，能够在map实例上调用

invalidateSize

---

下面是一个关于Plunker的工作示例：

该项目比仅此动画更复杂，因此我更喜欢库。谢谢你的工作，但在firefox中它仍然在颤抖。

小册子

没有div resize的侦听器，您需要调用

invalidateSize（）

，因为我怀疑会发生类似的情况，因此声明如下。你错了

L.Map

会触发

resize

事件，这里是。在代码和预览窗口之间拖动拆分器，弹出警报。