ViewAnimation动画正常执行了 但是并没有旋转到360度 总是转个几十度就重新触发animationstart
来源：1-1 学习本课程需要的知识点说明
慕神2393367
2021-06-03
let keyFrames = [
{
center: new BMapGL.Point(118.87263, 28.941708),
zoom: 20,
tilt: this.tilt,
heading: 0,
percentage: 0,
},
{
center: new BMapGL.Point(118.87263, 28.941708),
zoom: 20,
tilt: this.tilt,
heading: 360,
percentage: 1,
},
]
let opts = {
duration: 100000,
interation: 'INFINITE',
}
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')
})
map.startViewAnimation(animation)
写回答
1回答
-
扬_灵
2021-06-03
同学你好，你可以参考一下下面的代码。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} #allmap {position: relative;} #tools {position: absolute;left:0;top:0;z-index: 1000;} </style> <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script> <title>地图展示</title> </head> <body> <div id="allmap"></div> <div id="tools"> <button id="start">播放动画</button> <button id="end">停止播放</button> </div> </body> </html> <script type="text/javascript"> var bmap = new BMapGL.Map("allmap"); // 创建Map实例 bmap.centerAndZoom(new BMapGL.Point(118.87263, 28.941708), 20); // 初始化地图，设置中心点坐标和地图级别 bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 let keyFrames = [ { center: new BMapGL.Point(118.87263, 28.941708), zoom: 20, tilt: 45, heading: 0, percentage: 0, }, { center: new BMapGL.Point(118.87263, 28.941708), zoom: 20, tilt: 45, heading: 360, percentage: 1, }, ] let opts = { duration: 5000, interation: 1 } 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'); }); document.getElementById('start').addEventListener('click', function() { console.log(animation) bmap.startViewAnimation(animation); // 开始播放动画 }); document.getElementById('end').addEventListener('click', function() { bmap.cancelViewAnimation(animation); // 强制停止动画 }); </script>演示效果如下。
00
相似问题