openlayers3中，鼠标滚轮动画

以前的web地图，使用鼠标滚轮进行放缩时，通常会显示放缩动画，如下图的效果，虽然现在主流web地图中都已经取消了这个功能，但这里还是备忘一下。（网上搜索的代码，这里总结一下）

1.建立放置动画的容器

<div style="left: 285px; top: 183.5px; width: 120px; height: 91px; overflow: hidden; visibility: hidden; position: absolute; z-index: 0; cursor: url(http://webmap0.map.bdimg.com/image/api/openhand.cur), default;" id="zoomer">
                        <div style="left: 0px; top: 0px;" class="BMap_zoomer"></div>
                        <div style="background-position: -7px 0px; top: 0px; right: 0px;" class="BMap_zoomer"></div>
                        <div style="background-position: 0px -7px; left: 0px; bottom: 0px;" class="BMap_zoomer"></div>
                        <div style="background-position: -7px -7px; right: 0px; bottom: 0px;" class="BMap_zoomer"></div></div>

2.建立css样式

.BMap_zoomer {
        width: 7px;
        height: 7px;
        overflow: hidden;
        font-size: 1px;
        position: absolute;
        background-image: url('/Content/Images/GIS/zoomer.png');
        background-repeat: no-repeat;
    }

3.js创建动画

//鼠标滚轮动画
var _timeline;
//动画
function action(t, e) {
    //缩放的容器
    var zoomer = document.getElementById("zoomer");
    //是否正在缩放
    if (!_timeline) {
        //容器是否找到
        if (zoomer) {
            //放大或者缩小
            var zoomInOrOut = e;
            //缩小到的指标
            var zoomIn = 60;
            var zoomOut = 120;
            var a = 4 / 3;
            var r = Math.ceil((zoomInOrOut ? zoomIn : zoomOut) / 2);
            l = Math.max(15, r / a);
            var zoomerStryle = zoomer.style;
            zoomerStryle.width = 2 * r + "px",
                zoomerStryle.height = 2 * l + "px",
                zoomerStryle.visibility = "visible";
            //容器四个角的图片
            var zoomerTLBR = zoomer.children;
            zoomInOrOut ? (zoomerTLBR[0].style.backgroundPosition = "0 0", zoomerTLBR[1].style.backgroundPosition = "-7px 0", zoomerTLBR[2].style.backgroundPosition = "0 -7px", zoomerTLBR[3].style.backgroundPosition = "-7px -7px") : (zoomerTLBR[0].style.backgroundPosition = "-7px -7px", zoomerTLBR[1].style.backgroundPosition = "0 -7px", zoomerTLBR[2].style.backgroundPosition = "-7px 0", zoomerTLBR[3].style.backgroundPosition = "0 0"),
                zoomerTLBR = null;
            var u = t.x - r,
                f = t.y - l;
            if (!isNaN(u) && !isNaN(f)) {
                zoomerStryle.left = u + "px",
                    zoomerStryle.top = f + "px";
                var p = Math.ceil((zoomInOrOut ? zoomOut : zoomIn) / 2),
                    d = Math.max(15, p / a);
                p -= r,
                    d = Math.ceil(d - l);
                zoomerStryle = document.getElementById("zoomer").style;
                _timeline && _timeline.end(),
                    _timeline = new aG({
                        fps: 20,
                        duration: 240,
                        transition: easeInQuad,
                        delay: 100,
                        render: function (t) {
                            if (!(.1 > t)) {
                                var e = Math.ceil(p * t),
                                    i = Math.ceil(d * t);
                                zoomerStryle.width = 2 * (r + e) + "px",
                                    zoomerStryle.height = 2 * (l + i) + "px",
                                    zoomerStryle.left = u - e + "px",
                                    zoomerStryle.top = f - i + "px"
                            }

                        },
                        finish: function () {
                            _timeline = !1,
                                setTimeout(function () {
                                    zoomerStryle.visibility = "hidden"
                                }, 300)
                        }

                    });
            }

        }
    }
}
function aG(t) {
    var e = {
        duration: 1e3, fps: 30, delay: 0, transition: null, onStop: function () { }
    };
    if (this._anis = [], t) for (var i in t) e
        = t
    ;
    if (this._opts = e, M(e.delay)) {
        var n = this;
        setTimeout(function () {
            n.start()
        }
            , e.delay)
    }
    else e.delay != aG.INFINITE && this.start()
}
function M(t) {
    return "number" == typeof t
}
aG.prototype.start = function () {
    this._beginTime = A(), this._endTime = this._beginTime + this._opts.duration, this._launch()
}

function A() {
    return (new Date).getTime()
}
aG.prototype._launch = function () {
    var t = this, e = A();
    if (e >= t._endTime) {
        if (aw(t._opts.render) && t._opts.render(t._opts.transition(1)), aw(t._opts.finish) && t._opts.finish(), t._anis.length > 0) {
            var i = t._anis[0];
            i._anis = [].concat(t._anis.slice(1)), i.start()
        }

    }
    else t.schedule = t._opts.transition((e - t._beginTime) / t._opts.duration), aw(t._opts.render) && t._opts.render(t.schedule), t.terminative || (t._timer = setTimeout(function () {
        t._launch()
    }
        , 1e3 / t._opts.fps))
}
function aw(t) {
    return "function" == typeof t
}
function easeInQuad(t) {
    return t * t
}

4.获取缩放参数，主要是相对于地图的x、y轴、放大还是缩小

var wheel = function(event) {
    var delta = 0;
    var xx = event.clientX;
    var yy = event.clientY;
    if (!event) {
        event = window.event;
    }
    if (event.wheelDelta) {
        delta = event.wheelDelta / 120;
        if (window.opera) {
            delta = -delta;
        }
    } else if (event.detail) {
        delta = -event.detail / 3;
    }
    if (delta < 0 && map.getView().getZoom() != minZoom) {//缩小
        action({ x: xx, y: yy }, false);
    }
    if (delta > 0 && map.getView().getZoom() != maxZoom) {//放大
        action({ x: xx, y: yy }, true);
    }
}

5、地图初始化的时候，绑定鼠标滚轮事件

if(document.addEventListener){
        document.addEventListener('DOMMouseScroll',wheel, false);
    }
document.getElementById("map").onmousewheel = wheel;
window.onmousewheel = document.onmousewheel = wheel;

结束。。。。这基本与ol3无关了。。。

转载自：https://blog.csdn.net/u014529917/article/details/53261045