使用 JS 暂停、恢复和重新启动 Canvas 个动画
Pause, resume and restart Canvas animations with JS
我的canvas圆弧动画进度条有暂停、恢复和重启的功能吗?我已经添加了点击功能,但不知道从哪里开始才能实现我的目标。
我在这里添加了一个有效的 fiddle:http://jsfiddle.net/4txsqeoh/2/
我想制作单独的函数,以便在需要时从点击事件等中调用
更新
我已经在点击事件和空函数中添加了调用,但不知道从哪里开始,我是 JS 新手。
JS:
function init() {
var c = document.getElementById('draw');
return c.getContext('2d');
}
function clear(ctx) {
ctx.clearRect(0, 0, 200, 200);
}
function PercentProgress(ctx, percent) {
this.ctx = ctx;
this.speed = 4;
this.x = 100;
this.y = 100;
this.radius = 50;
this.setPercent = function (percent) {
this.degrees = 360 * (percent / 100);
this._animationOffset = this.degrees;
this.percent = percent;
};
// Part of initialization
this.setPercent(percent);
this.startProgress = function () {
var self = this;
clear(this.ctx);
this._interval = setInterval(function () {
self.drawProgress();
}, 10);
};
this.pauseProgress = function () {
};
this.resumeProgress = function () {
};
this.restartProgress = function () {
};
this.drawArc = function () {
var startDegrees = -90;
var endDegrees = startDegrees + this.degrees - this._animationOffset;
// Degrees to radians
var startAngle = startDegrees / 180 * Math.PI;
var endAngle = endDegrees / 180 * Math.PI;
// Draw arc
this.setLineStyles();
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, false);
ctx.stroke();
};
this.setLineStyles = function () {
ctx.strokeStyle = '#FF1251';
ctx.lineWidth = 10;
ctx.lineCap = 'round';
};
this.drawProgress = function () {
if (this._animationOffset < 0) {
this._animationOffset = 0;
}
clear(this.ctx);
this.drawArc();
this._animationOffset -= this.speed;
if (this._animationOffset < 0) {
clearInterval(this._interval);
}
};
}
$(document).ready(function () {
// lets start the progress
var ctx = init();
var percentage = 100;
var progress = new PercentProgress(ctx, percentage);
//progress.startProgress();
$(document).on('click', '#pause-progress', function (e) {
// pause progress
progress.pauseProgress();
});
$(document).on('click', '#resume-progress', function (e) {
// resume progress
progress.resumeProgress();
});
$(document).on('click', '#restart-progress', function (e) {
// restart progress
progress.startProgress();
});
});
只需添加这两个功能:
this.stop = function(){
clearInterval(this._interval);
}
this.resume = function(){
var self = this;
clearInterval(self._interval);
this._interval = setInterval(function () {
self.drawAnimation();
}, 10);
}
并像这样设置点击操作
$(document).on('click', '#pause-progress', function (e) {
// pause progress
anim.stop();
});
$(document).on('click', '#resume-progress', function (e) {
// resume progress
anim.resume();
});
$(document).on('click', '#restart-progress', function (e) {
// restart progress
anim.stop();
anim = new PercentAnimation(ctx, percentage);
anim.startAnimation();
});
添加此功能
this.setLineStylesCircle = function () {
ctx.strokeStyle = '#001251'; //set the collor here
ctx.lineWidth = 10;
ctx.lineCap = 'round';
};
并将 drawArc 更改为:
this.drawArc = function () {
var startDegrees = -90;
var endDegrees = startDegrees + this.degrees - this._animationOffset;
// Degrees to radians
var startAngle = startDegrees / 180 * Math.PI;
var endAngle = endDegrees / 180 * Math.PI;
//Draw circle
this.setLineStylesCircle();
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 7, false);
ctx.stroke();
// Draw arc
this.setLineStyles();
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, false);
ctx.stroke();
};
我的canvas圆弧动画进度条有暂停、恢复和重启的功能吗?我已经添加了点击功能,但不知道从哪里开始才能实现我的目标。
我在这里添加了一个有效的 fiddle:http://jsfiddle.net/4txsqeoh/2/
我想制作单独的函数,以便在需要时从点击事件等中调用
更新
我已经在点击事件和空函数中添加了调用,但不知道从哪里开始,我是 JS 新手。
JS:
function init() {
var c = document.getElementById('draw');
return c.getContext('2d');
}
function clear(ctx) {
ctx.clearRect(0, 0, 200, 200);
}
function PercentProgress(ctx, percent) {
this.ctx = ctx;
this.speed = 4;
this.x = 100;
this.y = 100;
this.radius = 50;
this.setPercent = function (percent) {
this.degrees = 360 * (percent / 100);
this._animationOffset = this.degrees;
this.percent = percent;
};
// Part of initialization
this.setPercent(percent);
this.startProgress = function () {
var self = this;
clear(this.ctx);
this._interval = setInterval(function () {
self.drawProgress();
}, 10);
};
this.pauseProgress = function () {
};
this.resumeProgress = function () {
};
this.restartProgress = function () {
};
this.drawArc = function () {
var startDegrees = -90;
var endDegrees = startDegrees + this.degrees - this._animationOffset;
// Degrees to radians
var startAngle = startDegrees / 180 * Math.PI;
var endAngle = endDegrees / 180 * Math.PI;
// Draw arc
this.setLineStyles();
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, false);
ctx.stroke();
};
this.setLineStyles = function () {
ctx.strokeStyle = '#FF1251';
ctx.lineWidth = 10;
ctx.lineCap = 'round';
};
this.drawProgress = function () {
if (this._animationOffset < 0) {
this._animationOffset = 0;
}
clear(this.ctx);
this.drawArc();
this._animationOffset -= this.speed;
if (this._animationOffset < 0) {
clearInterval(this._interval);
}
};
}
$(document).ready(function () {
// lets start the progress
var ctx = init();
var percentage = 100;
var progress = new PercentProgress(ctx, percentage);
//progress.startProgress();
$(document).on('click', '#pause-progress', function (e) {
// pause progress
progress.pauseProgress();
});
$(document).on('click', '#resume-progress', function (e) {
// resume progress
progress.resumeProgress();
});
$(document).on('click', '#restart-progress', function (e) {
// restart progress
progress.startProgress();
});
});
只需添加这两个功能:
this.stop = function(){
clearInterval(this._interval);
}
this.resume = function(){
var self = this;
clearInterval(self._interval);
this._interval = setInterval(function () {
self.drawAnimation();
}, 10);
}
并像这样设置点击操作
$(document).on('click', '#pause-progress', function (e) {
// pause progress
anim.stop();
});
$(document).on('click', '#resume-progress', function (e) {
// resume progress
anim.resume();
});
$(document).on('click', '#restart-progress', function (e) {
// restart progress
anim.stop();
anim = new PercentAnimation(ctx, percentage);
anim.startAnimation();
});
添加此功能
this.setLineStylesCircle = function () {
ctx.strokeStyle = '#001251'; //set the collor here
ctx.lineWidth = 10;
ctx.lineCap = 'round';
};
并将 drawArc 更改为:
this.drawArc = function () {
var startDegrees = -90;
var endDegrees = startDegrees + this.degrees - this._animationOffset;
// Degrees to radians
var startAngle = startDegrees / 180 * Math.PI;
var endAngle = endDegrees / 180 * Math.PI;
//Draw circle
this.setLineStylesCircle();
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 7, false);
ctx.stroke();
// Draw arc
this.setLineStyles();
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, false);
ctx.stroke();
};