七章-82-水纹效果

作者: 彩云飘过 | 来源:发表于2020-03-27 17:55 被阅读0次

七章-82-水纹效果
模拟水纹波动效果
2021-01-12：今日PS+AI小练习
Vue<水纹背景效果>
潮湿效果之水纹
PS笔刷(photoshop水纹理效果笔刷)
Cesium添加水纹效果
CardView适配5.0以上没有投影效果问题
水纹波浪效果实现
iOS水纹波动动画效果

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1082.html ，对应的官网示例 https://openlayers.org/en/latest/examples/feature-animation.html?q=Geometry

image.png

map.on('postcompose', function(event) {})
绑定了layer的'postcompose'事件
根据framestate的时间计算波纹半径

<!DOCTYPE html>
<html>

<head>
 <title>水纹效果</title>
 <link rel="stylesheet" href="../include/ol.css" type="text/css" />
 <script src="../include/ol.js"></script>
</head>
<style></style>

<body>

 <div id="map" class="map"></div>

<script>
   var map = new ol.Map({
     layers: [
       new ol.layer.Tile({
         source: new ol.source.OSM({
           wrapX: false //控制是否重复显示地图
         })
       })
     ],
     target: 'map',
     view: new ol.View({
       center: [0, 0],
       zoom: 1
     })
   });

   var source = new ol.source.Vector({
     wrapX: false
   });
   var vector = new ol.layer.Vector({
     source: source
   });
   map.addLayer(vector);

   //添加一个位置随机的要素
   function addRandomFeature() {
     var x = Math.random() * 360 - 180;
     var y = Math.random() * 180 - 90;
     var geom = new ol.geom.Point(ol.proj.fromLonLat([x, y]));
     var feature = new ol.Feature(geom);
     source.addFeature(feature);
   }

   var duration = 3000; //超过3秒中，动画就终止，所以同一时间只有三个动画效果
   //实现动画效果的函数
   function flash(feature) {
     var start = new Date().getTime();
     var listenerKey = map.on('postcompose', animate);
     //绑定后渲染事件，可看做动画的“start”  
     function animate(event) {
       var vectorContext = event.vectorContext;
       var frameState = event.frameState;
       var flashGeom = feature.getGeometry().clone();//克隆方法，获取当前动画的点位坐标集合
       var elapsed = frameState.time - start; //计算出动画已经执行的事件
       var elapsedRatio = elapsed / duration;//计算出动画执行进度
       //easeOut返回一个0-1之间的数值，渐变式，速度逐渐减慢
       var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5;//计算半径
       var opacity = ol.easing.easeOut(1 - elapsedRatio);//计算透明度
       console.log(elapsedRatio);
       
       console.log("easeOut:"+ol.easing.easeOut(elapsedRatio));

       var 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);
       //超过3秒钟就取消绑定
       if (elapsed > duration) {
         ol.Observable.unByKey(listenerKey); //解绑事件，结束动画效果
         return;
       }
       //可看做动画的“下一帧”
       map.render();
     }
   }
   //绑定了addFeature事件，回调函数中调用了flash这个工具函数
   source.on('addfeature', function (e) {
     flash(e.feature);
   });

   //每隔1秒添加一个位置随机的要素
   window.setInterval(addRandomFeature, 1000);
 </script>
</body>

</html>