jspopularGL

自定义视角动画

更新时间：2020年08月07日

简介

JSAPI GL支持展示地图的3D动画，您可以自定义从地图上某一地点切换到另一地点的3D过渡动画效果。

注意：由于在渲染动画时，数据资源是随着当前方位和坐标的改变而实时加载的，刚开始播放动画时画面可能会卡顿，属于正常现象；此外，为了减少加载数据资源的性能损耗，在播放动画时隐藏了地图上的POI点。

DEMO详情

提供的3D动画工具

ViewAnimation：一个用来展示地图3D动画的类，您可以自定义动画的关键帧实例，并自由设置动画延迟开始时间、持续时间以及迭代次数等属性。

ViewAnimation使用详情请见类参考

添加自定义关键帧3D动画

您可以通过map.ViewAnimation声明一个动画实例，将其添加到地图容器中。

1参考展示地图创建基本地图

var bmap = new BMapGL.Map("allmap");                          // 创建Map实例
bmap.centerAndZoom(new BMapGL.Point(116.414, 39.915), 17);    // 初始化地图，设置中心点坐标和地图级别
bmap.enableScrollWheelZoom(true);                             // 开启鼠标滚轮缩放
bmap.setTilt(20);                              // 设置地图初始倾斜角度

2自定义关键帧

如下示例，定义了关键帧，关键帧以一个对象数组的形式定义，每一个关键帧作为该数组的一个对象成员，以对象字面量的形式传入。

注意：由于在渲染动画时，数据资源是随着当前方位和坐标的改变而实时加载的，在定义关键帧时相邻两个关键帧的坐标点不宜距离太远，否则会导致当前帧的资源还未加载完毕，就已经进入下一帧的播放，出现视野中看不到地图的现象。

var keyFrames = [
    {
        center: new BMapGL.Point(1116.414,39.915),     // 定义第一个关键帧帧地图中心点
        zoom: 18,                                      // 定义第一个关键帧地图等级
        tilt: 60,                                      // 定义第一个关键帧地图倾斜角度
        heading: 0,                                    // 定义第一个关键帧地图旋转方向
        percentage: 0                                  // 定义第一个关键帧处于动画过程的百分比，取值范围0~1
    },
    {
        center: new BMapGL.Point(1116.414,39.915),     // 定义第二个关键帧地图中心点
        zoom: 18,                                      // 定义第二个关键帧地图等级
        tilt: 60,                                      // 定义第二个关键帧地图倾斜角度
        heading: 180,                                  // 定义第二个关键帧地图旋转方向
        percentage: 0.5                                // 定义第二个关键帧处于动画过程的百分比，取值范围0~1
    },
    {
        center: new BMapGL.Point(1116.414,39.915),     // 定义第三个关键帧地图中心点
        zoom: 18,                                      // 定义第三个关键帧地图等级
        tilt: 60,                                      // 定义第三个关键帧地图倾斜角度
        heading: 360,                                  // 定义第三个关键帧地图旋转方向
        percentage: 1                                  // 定义第三个关键帧处于动画过程的百分比，取值范围0~1
    }
] ;

3设置动画属性

如下示例，设置了动画属性，动画属性以一个对象的形式定义，每一种属性对应该对象的一个属性。

var opts = {
    duration: 10000,     // 设置每次迭代动画持续时间
    delay: 3000,         // 设置动画延迟开始时间
    interation: 2        // 设置动画迭代次数
};

4监听动画事件

JSAPI支持监听自定义关键帧3D动画的事件，您可以监听到自定义动画的开始事件、迭代事件、结束事件以及中途终止事件。

var animation = new BMapGL.ViewAnimation(keyFrames, opts);        // 初始化动画实例
animation.addEventListener('animationstart', function(e) {        // 监听动画开始事件
    console.log('start');
});
animation.addEventListener('animationiterations', function(e) {   // 监听动画迭代事件
    console.log('onanimationiterations');
});
animation.addEventListener('animationend', function(e) {        // 监听动画结束事件
    console.log('end');
});
animation.addEventListener('animationcancel', function(e) {       // 监听动画中途被终止事件
    console.log('cancel');
});

5开始播放动画

您可以通过startViewAnimation方法来开始播放自定义关键帧3D动画，该方法接收一个动画实例作为参数。

bmap.startViewAnimation(animation);         // 开始播放动画

6强制停止动画

您可以通过clearViewAnimation方法来强制停止动画，该方法接收一个动画实例作为参数。

bmap.cancelViewAnimation(animation);         // 强制停止动画

文档全面上新