HTML5/Javascript -尝试将画布动画绑定到键盘事件
HTML5/Javascript - Trying to get bind a canvas animation to a keyboard event
这是我第一次在javascript中做键盘事件,但我知道动画是有效的。这个想法很简单:当用户按下回车键时,播放一个矩形移动的动画。下面是我的代码。
//Event listeners
window.addEventListener("keydown", onKeyDown, false);
function onKeyDown(event){
var keyCode = event.keyCode;
switch(keyCode){
case 13 //enter
drawStuff();
break;
}
}
//code to be executed onKeyDown
function drawStuff(){
var x = document.getElementById("myCanvas");
var canvas = x.getContext('2d');
var i = 0;
function animate(){
if(i < 451){
canvas.clearRect(0,0,500,500);
canvas.fillStyle="red";
canvas.fillRect(30,i,50,50);
i++;
}
else{}
}
window.setInterval(animate, 1);
}
有什么建议如何解决这个问题?
看看Paul Irish的requestAnimationFrame
shim;相对于setInterval方法,rAF有很多优点;主要是因为它是为了这样做而构建的,但它也只在浏览器准备好时请求帧,所以当你的网站在后台时,它会暂停发生的事情。我还注意到当我切换到
我想说这样应该可以工作:
var animationHasTriggered = false;
var x = document.getElementById("myCanvas");
var canvas = x.getContext('2d');
var keysDown = {};
var i = 0;
window.addEventListener('load', function()
{
addEventListener("keydown", function(e)
{
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function(e)
{
delete keysDown[e.keyCode];
}, false);
updateAll();
}, false);
function updateAll()
{
if (13 in keysDown || animationHasTriggered)
{
animationHasTriggered = true;
animate();
}
requestAnimationFrame(updateAll);
}
function animate()
{
if (i < 451)
{
canvas.clearRect(0,0,500,500);
canvas.fillStyle="red";
canvas.fillRect(30,i,50,50);
i++;
}
else
{
animationHasTriggered = false;
}
}
(function()
{
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x)
{
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element)
{
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function()
{
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id)
{
clearTimeout(id);
};
}());
相关文章:
- 在VanillaJS中模拟模型双向数据绑定
- 无法通过数组映射绑定
- 主干-不管怎样,检查事件以前是否绑定过
- 用于搜索的聚合物嵌套绑定
- Angular:更新一次性绑定的数据
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- react.js中的密钥绑定
- 使用regex的jquery keydown绑定不会验证撇号和句点
- jquery:将动画绑定到滚动条位置的更好方法
- 如何将角度动画延迟到模型绑定之后
- 为D3.js动画编写绑定的正确方法是什么
- 淘汰绑定中的同步动画
- 动画(绑定到 scrollTop)仅在我停止滚动时完成
- 使用 Knockout.js 绑定 CSS3 动画回调
- 我想防止第二次点击,直到使用绑定和取消绑定完成动画,但它不起作用
- 自定义绑定动画不适用于foreach
- 我可以在无容器淘汰元素中使用动画转换绑定吗?
- 如何触发自定义动画,并在数据绑定前后等待它完成
- 当绑定值发生变化时,如何使元素动画化?
- HTML5/Javascript -尝试将画布动画绑定到键盘事件