百度地图ViewAnimation动画★★★
可以通过类似于css3中关键帧动画的方式来实现高性能的百度地图动画，主要用到ViewAnimation类和地图的startViewAnimation启动动画，当然我们也可以给ViewAnimation动画绑定相关动画事件
一、ViewAnimation类格式如下：
其中：
-
keyFrames:是一 个关键帧动画数组，里面的每一帧都是一个对象，通过定义关键帧属性，API会补全关键帧之间过渡的动画过程。每个属性含义如下：
| 属性 | 类型 | 描述 |
|---|---|---|
| center | Point | 地图中心点，默认值为地图当前状态中心点 |
| zoom | Number | 地图缩放级别，默认值为地图当前状态缩放级别 |
| tilt | Number | 地图倾斜角度，默认值为地图当前状态倾斜角度 |
| heading | Number | 地图旋转角度，默认值为地图当前旋转角度 |
| percentage | Number | 表示当前关键帧处于动画过程的百分比，取值范围0~1 |
-
ViewAnimationOptions 为视角动画的配置，参数如下：
| 属性 | 类型 | 描述 |
|---|---|---|
| delay | Number | 动画开始延迟时间，单位ms，默认0 |
| duration | Number | 动画持续时间，单位ms，默认1000 |
| interation | Number | string | 循环次数，参数类型为数字时循环固定次数，参数为'INFINITE'无限循环，默认为1 |
二、ViewAnimation事件如下：
| 事件 | 参数 | 描述 |
|---|---|---|
| animationstart | {} | 动画开始时触发，如果配置了delay，则在delay后触发 |
| animationiterations | {} | 当动画循环大于1次时，上一次结束既下一次开始时触发。最后一次循环结束时不触发 |
| animationend | {} | 动画结束时触发，如果动画中途被终止，则不会触发 |
| animationcancel | {} | 动画中途被终止时触发 |
案例一完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 1200px;
height: 800px;
border: 1px solid #ccc;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
<script>
let map = new BMapGL.Map("map");
let point = new BMapGL.Point(116.403963, 39.915119);
map.centerAndZoom(point, 20);
map.enableScrollWheelZoom();
map.setTilt(50);
map.setHeading(0);
const keyFrames = [
{
center: new BMapGL.Point(116.403963, 39.915119),
zoom: 21,
tilt: 50,
heading: 0,
percentage: 0,
},
{
center: new BMapGL.Point(116.403963, 39.915119),
zoom: 21,
tilt: 50,
head
最低0.47元/天 解锁文章
604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
