修改输入框超出最大值问题和进度条修改速度会跳跃问题
This commit is contained in:
@ -80,6 +80,10 @@ export default class Sunshine {
|
|||||||
}
|
}
|
||||||
set speed(v) {
|
set speed(v) {
|
||||||
this.options.speed = v
|
this.options.speed = v
|
||||||
|
this._elms.speed &&
|
||||||
|
this._elms.speed.forEach(item => {
|
||||||
|
item.value = v
|
||||||
|
})
|
||||||
this.viewer.clock.multiplier = this.options.speed;
|
this.viewer.clock.multiplier = this.options.speed;
|
||||||
this.timeLine.setSpeed(v)
|
this.timeLine.setSpeed(v)
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@ export default class TimeLine {
|
|||||||
this.timelineCon = document.getElementsByClassName('timeline-container')[0];
|
this.timelineCon = document.getElementsByClassName('timeline-container')[0];
|
||||||
this.speed = speed;
|
this.speed = speed;
|
||||||
this.animationId;
|
this.animationId;
|
||||||
this.startTime = Date.now();
|
this.startTime = performance.now();
|
||||||
this.manualPosition = null;
|
this.manualPosition = null;
|
||||||
this.isDragging = false;
|
this.isDragging = false;
|
||||||
this.pauseed = false;
|
this.pauseed = false;
|
||||||
@ -28,9 +28,7 @@ export default class TimeLine {
|
|||||||
document.getElementsByClassName('time-marks')[0].appendChild(label)
|
document.getElementsByClassName('time-marks')[0].appendChild(label)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
that.startTime = performance.now() - ((that.manualPosition || 0) * 86400 * 1000 / that.speed);
|
||||||
|
|
||||||
that.startTime = Date.now() - ((that.manualPosition || 0) * 86400 * 1000 / that.speed);
|
|
||||||
|
|
||||||
that.timeline.addEventListener('mousedown', (e) => {
|
that.timeline.addEventListener('mousedown', (e) => {
|
||||||
if (e.srcElement.className === 'handle') {
|
if (e.srcElement.className === 'handle') {
|
||||||
@ -57,21 +55,22 @@ export default class TimeLine {
|
|||||||
document.getElementById('timePause').addEventListener('click', function () {
|
document.getElementById('timePause').addEventListener('click', function () {
|
||||||
that.pauseed = !that.pauseed;
|
that.pauseed = !that.pauseed;
|
||||||
if (that.pauseed) {//暂停
|
if (that.pauseed) {//暂停
|
||||||
|
that.pausedTime = performance.now(); // 记录暂停时刻
|
||||||
document.getElementById('timePause').textContent = '播放';
|
document.getElementById('timePause').textContent = '播放';
|
||||||
that.animationId && cancelAnimationFrame(that.animationId);
|
that.animationId && cancelAnimationFrame(that.animationId);
|
||||||
that.pausedTime = Date.now(); // 记录暂停时刻
|
|
||||||
that.sdk.viewer.clock.shouldAnimate = false
|
that.sdk.viewer.clock.shouldAnimate = false
|
||||||
} else {//播放
|
} else {//播放
|
||||||
|
let now = performance.now()
|
||||||
|
const pausedDuration = now - that.pausedTime;
|
||||||
document.getElementById('timePause').textContent = '暂停';
|
document.getElementById('timePause').textContent = '暂停';
|
||||||
that.manualPosition = null
|
that.manualPosition = null
|
||||||
const pausedDuration = Date.now() - that.pausedTime;
|
|
||||||
that.startTime += pausedDuration; // 补偿暂停期间的时间差
|
that.startTime += pausedDuration; // 补偿暂停期间的时间差
|
||||||
|
|
||||||
if (that.changeDate) {//切换日期后让时间从0开始
|
if (that.changeDate) {//切换日期后让时间从0开始
|
||||||
if (that.changeDateGrag) {
|
if (that.changeDateGrag) {
|
||||||
that.changeDateGrag = undefined
|
that.changeDateGrag = undefined
|
||||||
} else {
|
} else {
|
||||||
that.startTime = Date.now()
|
that.startTime = now
|
||||||
}
|
}
|
||||||
that.changeDate = undefined
|
that.changeDate = undefined
|
||||||
}
|
}
|
||||||
@ -88,14 +87,14 @@ export default class TimeLine {
|
|||||||
that.isDragging = false;
|
that.isDragging = false;
|
||||||
if (that.manualPosition !== null) {
|
if (that.manualPosition !== null) {
|
||||||
// that.sdk.viewer.clock.shouldAnimate = true
|
// that.sdk.viewer.clock.shouldAnimate = true
|
||||||
that.startTime = Date.now() - (that.manualPosition * 86400 * 1000 / that.speed);
|
that.startTime = performance.now() - (that.manualPosition * 86400 * 1000 / that.speed);
|
||||||
that.manualPosition = null;
|
that.manualPosition = null;
|
||||||
that.changeDate && (that.changeDateGrag = true)
|
that.changeDate && (that.changeDateGrag = true)
|
||||||
if (!that.pauseed) {
|
if (!that.pauseed) {
|
||||||
that.update()
|
that.update()
|
||||||
func(that.time)
|
func(that.time)
|
||||||
} else {
|
} else {
|
||||||
that.pausedTime = Date.now(); // 记录暂停时刻
|
that.pausedTime = performance.now(); // 记录暂停时刻
|
||||||
func(that.currentTime.textContent)
|
func(that.currentTime.textContent)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -113,9 +112,9 @@ export default class TimeLine {
|
|||||||
update() {
|
update() {
|
||||||
if (this.manualPosition !== null) return;
|
if (this.manualPosition !== null) return;
|
||||||
if (this.changeDate) {//切换日期后让时间从0开始
|
if (this.changeDate) {//切换日期后让时间从0开始
|
||||||
this.startTime = Date.now()
|
this.startTime = performance.now()
|
||||||
}
|
}
|
||||||
let elapsed = (Date.now() - this.startTime) * this.speed;
|
let elapsed = (performance.now() - this.startTime) * this.speed;
|
||||||
// if (this.elapsed) {
|
// if (this.elapsed) {
|
||||||
// elapsed = elapsed + this.elapsed
|
// elapsed = elapsed + this.elapsed
|
||||||
// this.elapsed = undefined
|
// this.elapsed = undefined
|
||||||
@ -133,23 +132,23 @@ export default class TimeLine {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
setSpeed(v) {
|
setSpeed(v) {
|
||||||
|
let now = performance.now()
|
||||||
if (!this.pauseed) {
|
if (!this.pauseed) {
|
||||||
const currentProgress = this.manualPosition ??
|
const currentProgress = this.manualPosition ??
|
||||||
(Date.now() - this.startTime) * this.speed / (86400 * 1000);
|
(performance.now() - this.startTime) * this.speed / (86400 * 1000);
|
||||||
this.speed = v;
|
this.speed = v;
|
||||||
this.startTime = Date.now() - (currentProgress * 86400 * 1000 / this.speed);
|
this.startTime = performance.now() - (currentProgress * 86400 * 1000 / this.speed);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
let pausedDuration = Date.now() - this.pausedTime;
|
let pausedDuration = now - this.pausedTime;
|
||||||
this.startTime += pausedDuration; // 补偿暂停期间的时间差
|
this.startTime += pausedDuration; // 补偿暂停期间的时间差
|
||||||
|
|
||||||
const currentProgress = this.manualPosition ??
|
const currentProgress = this.manualPosition ??
|
||||||
(Date.now() - this.startTime) * this.speed / (86400 * 1000);
|
(now - this.startTime) * this.speed / (86400 * 1000);
|
||||||
this.speed = v;
|
this.speed = v;
|
||||||
this.startTime = Date.now() - (currentProgress * 86400 * 1000 / this.speed);
|
this.startTime = now - (currentProgress * 86400 * 1000 / this.speed);
|
||||||
|
|
||||||
this.pausedTime = Date.now(); // 记录切换speed暂停时刻
|
this.pausedTime = now; // 记录切换speed暂停时刻
|
||||||
this.speed = v;
|
// this.speed = v;
|
||||||
}
|
}
|
||||||
this.manualPosition = null;
|
this.manualPosition = null;
|
||||||
|
|
||||||
@ -158,7 +157,7 @@ export default class TimeLine {
|
|||||||
}
|
}
|
||||||
updateTime() {
|
updateTime() {
|
||||||
this.manualPosition = null;
|
this.manualPosition = null;
|
||||||
this.startTime = Date.now() - ((this.manualPosition || 0) * 86400 * 1000 / this.speed);
|
this.startTime = performance.now() - ((this.manualPosition || 0) * 86400 * 1000 / this.speed);
|
||||||
this.pauseed && (this.changeDate = true)
|
this.pauseed && (this.changeDate = true)
|
||||||
this.changeDateGrag = undefined
|
this.changeDateGrag = undefined
|
||||||
this.update();
|
this.update();
|
||||||
|
Reference in New Issue
Block a user