Mapbox相机动画整理（3）动作播放整理

播放整理

简单播放

随着时间的递增，不断刷新数据

function animateMarker(timestamp) {
  map.getSource('point').setData(pointOnCircle(timestamp / 1000));

  // Request the next frame of the animation.
  requestAnimationFrame(animateMarker);
}

// Start the animation.
animateMarker(0);

循环播放

在一定时间内，循环播放

var animationDuration = 80000; 
var start;
 
function frame(time) {
	// time 该时间戳是一个十进制数，单位毫秒，最小精度为1ms
	if (!start) start = time;
	// phase determines how far through the animation we are
	var phase = (time - start) / animationDuration;
	 
	// phase is normalized between 0 and 1
	// when the animation is finished, reset start to loop the animation
	if (phase > 1) {
		// wait 1.5 seconds before looping
		setTimeout(function () {
			start = 0.0;
		}, 1500);
	}
 
	// 地图动画 。。。
 	// 根据phase，变化对应的地理要素
 	// 可参考 https://docs.mapbox.com/mapbox-gl-js/example/free-camera-path/
 	
 	window.requestAnimationFrame(frame);
}
window.requestAnimationFrame(frame);

多个动作连续播放

1. 多个动作连续播放
2. 单个动作播放时，平滑过渡

// 可参考 https://docs.mapbox.com/mapbox-gl-js/example/free-camera-point/
var animations = [
  {
    duration: 4000.0,
    animate: function (phase) {
      var start = [138.73375, 35.41914];
      var end = [138.72649, 35.33974];
      var alt = [7000.0, 6000.0];

      // interpolate camera position while keeping focus on a target lat/lng
      var position = lerp(start, end, phase);
      var altitude = lerp(alt[0], alt[1], phase);
      var target = [138.73036, 35.36197];

      updateCameraPosition(position, altitude, target);
    }
  }
]
var lastTime = 0.0;
function frame(time) {
	animationIndex %= animations.length;
	var current = animations[animationIndex];
	 
	if (animationTime < current.duration) {
		current.animate(animationTime / current.duration);
	}
	 
	// allow requestAnimationFrame to control the speed of the animation
	animationTime += 1 / (time - lastTime);
	lastTime = time;
	 
	if (animationTime > current.duration) {
		animationIndex++;
		animationTime = 0.0;
	}
	 
	window.requestAnimationFrame(frame);
}
 
window.requestAnimationFrame(frame);

重播

// Number of steps to use in the arc and animation, more steps means
// a smoother arc and animation, but too many steps will result in a
// low frame rate
var steps = 500;
// Used to increment the value of the point measurement against the route.
var counter = 0;

function animate() {
  // Update the source with this new data
  map.getSource('point').setData(point);

  // Request the next frame of animation as long as the end has not been reached
  if (counter < steps) {
    requestAnimationFrame(animate);
  }

  counter = counter + 1;
}

document
  .getElementById('replay')
  .addEventListener('click', function () {
    // Update the source layer
    map.getSource('point').setData(point);

    // Reset the counter
    counter = 0;

    // Restart the animation
    animate(counter);
  });

// Start the animation
animate(counter);

播放与暂停控制

var speedFactor = 30; // number of frames per longitude degree
var animation; // to store and cancel the animation
var startTime = 0;
var progress = 0; // progress = timestamp - startTime
var resetTime = false; // indicator of whether time reset is needed for the animation
var pauseButton = document.getElementById('pause');

startTime = performance.now();

animateLine();

// click the button to pause or play
pauseButton.addEventListener('click', function () {
  pauseButton.classList.toggle('pause');
  if (pauseButton.classList.contains('pause')) {
  	// 停止动画
    cancelAnimationFrame(animation);
  } else {
    resetTime = true;
    animateLine();
  }
});

// reset startTime and progress once the tab loses or gains focus
// requestAnimationFrame also pauses on hidden tabs by default
document.addEventListener('visibilitychange', function () {
  resetTime = true;
});

// animated in a circle as a sine wave along the map.
function animateLine(timestamp) {
  if (resetTime) {
    // resume previous progress
    startTime = performance.now() - progress;
    resetTime = false;
  } else {
    progress = timestamp - startTime;
  }

  // restart if it finishes a loop
  if (progress > speedFactor * 360) {
    startTime = timestamp;
    // 将线数据置空
    geojson.features[0].geometry.coordinates = [];
  } else {
    var x = progress / speedFactor;
    // draw a sine wave with some math.
    var y = Math.sin((x * Math.PI) / 90) * 40;
    // append new coordinates to the lineString
    geojson.features[0].geometry.coordinates.push([x, y]);
    // then update the map
    map.getSource('line').setData(geojson);
  }
  // Request the next frame of the animation.
  animation = requestAnimationFrame(animateLine);
}

动作播放完后进入下一个动作

function playback(index) {
	// Animate the map position based on camera properties
	map.flyTo(locations[index].camera);
	 
	map.once('moveend', function () {
		// Duration the slide is on screen after interaction
		window.setTimeout(function () {
			// Increment index
			index = index + 1 === locations.length ? 0 : index + 1;
			playback(index);
		}, 3000); // After callback, show the location for 3 seconds.
	});
}
// Start the playback animation for each borough
playback(0);