一、动画实例代码
var view = new ol.View({
center:new ol.proj.fromLonLat([120,33]),
zoom: 3,
maxZoon: 15,
minZoom: 3,
logo:false
});
var googleMapSource = new ol.source.XYZ({
url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
});
var googleLayer = new ol.layer.Tile({
source: googleMapSource
});
var map = new ol.Map({
view: view,
layers: [googleLayer],
target:"map"
});
//实现旋转动画
var rotate = document.getElementById("rotate");
rotate.addEventListener("click", function() {
var rotateAnitation =ol.animation.rotate({
rotation: Math.PI*2,//本参数单位是弧度,设置为旋转一周
anchor: view.getCenter(),//指定围绕哪一个点进行旋转,默认未然中心点
duration: 2000//动画总共花费时间单位是毫秒
});
map.beforeRender(rotateAnitation);
});
var bounce = document.getElementById("bounce");//实现弹跳效果
bounce.addEventListener("click", function() {
var bounceAnimation = ol.animation.bounce({
resolution: view.getResolution()*2,//根据分辨率缩放或者放大到的级别
duration:2000
});
map.beforeRender(bounceAnimation);
});
var pan = document.getElementById("pan");
pan.addEventListener("click",function() {
var panAnimation = ol.animation.pan({
source: view.getCenter(),//此处为移动到的起始点,既从此处移动到下一处的点
duration: 2000
});
map.beforeRender(panAnimation);
view.setCenter(new ol.proj.fromLonLat([120, 23]));
view.setZoom(10);
}, false);
var flyTo = document.getElementById("flyTo");
flyTo.addEventListener("click", function () {
var flyPan = ol.animation.pan({
source: view.getCenter(),
duration:2000
});
var flyBounce = ol.animation.bounce({
resolution: view.getResolution() * 2,
duration:2000
});
map.beforeRender(flyPan, flyBounce);
view.setCenter(new ol.proj.fromLonLat([111,24]));
}, false);
var easing = document.getElementById("easing");
easing.addEventListener("click", function() {
var easingPan = ol.animation.pan({
source: view.getCenter(),
duration: 2000,
easing: ol.easing.linear
});
map.beforeRender(easingPan);
view.setCenter(new ol.proj.fromLonLat([111,27]));
});
二、关于动画中easing的用法
var easingFunc = document.getElementById("easingFunc");
easingFunc.addEventListener("click", function () {
function myAnitation(t) {
var z = 0;
if (t <= 0.5) {
z = -2 * t + 1;//y=-2x+1;
} else {
z = 2 * t - 1;//y=2*x-1
}
console.log(z);
return z;
}
var easingPan = ol.animation.pan({
source: view.getCenter(),
duration: 2000,
easing: myAnitation
});
map.beforeRender(easingPan);
view.setCenter(new ol.proj.fromLonLat([111, 27]));
});
总结
easing参数是一个函数类型,其返回范围是[0,1],我们可以写一些曲线或者直线的函数来控制,地图怎么进行动画;返回1就是到达目标点,返回0是在起始点。在此,感谢
网友评论