Question

我试图使用地图的velocity.js制作动画。我尝试了两个不同的库：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);});

的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

免责声明：如果您喜欢使用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的'调整大小'事件在调整大小时似乎没有触发通过CSS动画映射容器。所以我使用了来自CSS Element Queries的ResizeSensor，可以在容器调整大小时调用地图实例上的invalidateSize。

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

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

1 个答案: