openLayer学习笔记（二）——对动画的理解

真不知道该整理哪一部分，我就把我在学习过程中我个人认为比较难理解的东西写一下吧。

一、ol动画的主要核心。

第一个是map监听的事件"postcompose"，还有一个是map的render方法。下面先对这两个做一下讲解。
首先是说一下’postcompose’事件，api中没有过多的解释，可以这么理解，动画的帧数在变动时触发这一监听事件，所以就用到了这个事件参数的两个成员，一个是event.vectorContext，就是画布。另一个是event.frameState，api中说比较明白，就是一个控制帧的成员。
第二个map.render()方法就是比较容易理解了，说白了就是渲染动画用的。

二、动画运行的机制（也可以说这个API是怎么样控制动画运行的）

在这个地方，我用代码运行结果来加深大家的理解。

我先postcompose事件成员开始解释，相信大家对event.vectorContext，就是将要素绘制在这个画布中没有疑问，可能event.frameState有点迷糊，什么叫控制帧的成员？？
大家可以看我代码展示event.frameState

这个就是event.frameState，只要使用他的time属性，这个time属性也叫动画帧数的时间。
大家举个例子。

    let map = new ol.Map({
        layers:[
            new ol.layer.Tile({
                source:new ol.source.OSM()
            })
        ],
        target:"map",
        view:new ol.View({
            center: [0, 0],
            zoom: 1
        })
    });

    let vectorSource = new ol.source.Vector({
        wrapX: false
    });
    let vectorLayer = new ol.layer.Vector({
        source:vectorSource
    });
    map.addLayer(vectorLayer);

	//这个函数是用来在地图上添加随机点要素。
    function addRandomFeature() {
        let x = Math.random()*360-180;
        let y = Math.random()*180-90;
        let coordinate = ol.proj.fromLonLat([x,y]);
        let geom = new ol.geom.Point(coordinate);
        let feature =new ol.Feature(geom);
        vectorSource.addFeature(feature)
    }
    
    //动画控制时间，即一个完整的动画只持续三秒
    let duration = 3000;
	//执行动画的函数
    function flash(feature) {
        let stratTime = new Date().getTime();
	//事件监听，需要注意的是在监听的过程中，一个动画的过程中animate函数会被执行多次。
        let listenerKey = map.on("postcompose",animate);
        //每一次监听都会执行的函数。
        function animate(event) {
            let vectorContext = event.vectorContext;
            let frameState = event.frameState;
            let flashGeom = feature.getGeometry().clone();
            let elapsed = frameState.time-stratTime;
            let elapsedRatio = elapsed / duration;
            console.log("frameState:"+frameState.time);
            console.log("stratTime:"+stratTime);
            console.log(elapsed);

            let radius = ol.easing.easeOut(elapsedRatio)*25+5;
            let opacity = ol.easing.easeOut(1 - elapsedRatio);

            // console.log(radius)
            // console.log(opacity)

            let style = new ol.style.Style({
                image:new ol.style.Circle({
                    radius: radius,
                    stroke:new ol.style.Stroke({
                        color:'rgba(255, 0, 0, ' + opacity + ')',
                        width:0.25+opacity
                    })
                })
            });

            vectorContext.setStyle(style);
            vectorContext.drawGeometry(flashGeom);

		//在这里利用动画帧时间与执行flash函数中new Date()的差值来控制动画结束时间
            if (elapsed > duration) {
                ol.Observable.unByKey(listenerKey);
                return;
            }
            // 用来触发Map监听postcompose事件，直到监听事件结束。
            map.render();  
        }
    }
    vectorSource.on('addfeature', function(e) {
        flash(e.feature);
    });
    window.setInterval(addRandomFeature, 5000);    //添加随机点要素的时间，找个时间无所谓，可快可慢，大家可以自行测试。

附上Demo链接：https://openlayers.org/en/latest/examples/feature-animation.html