如何减慢动画? [英] How to slow down the animation?
本文介绍了如何减慢动画?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有动画矩形 jsFiddle演示
如何减慢动画速度并使其更稳定?
How to slow down the animation and make it more stable?
我尝试使用循环延迟,但延迟循环和requestAnimationFrame之间存在冲突
I try to use loop delay but there is conflict between the delay loop and requestAnimationFrame
我不想更改参数 window.setTimeout(f,1e3 / 60);
因为有更多的代码块需要良好的偏好。
becose there is more block of code which require good preferences.
非常感谢。
循环延迟:
loop delay :
for (i = 0; i < 10; i++) {
(function (i) {
window.setTimeout(function () {}, i * 2000);
}(i));
}
我的代码:
My code :
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var my_gradient = ctx.createLinearGradient(0, 0, 0, 300);
window.requestAnimationFrame = function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(f) {
window.setTimeout(f,1e3/60);
}
}();
window.cancelAnimationFrame = function() {
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.msCancelAnimationFrame ||
window.oCancelAnimationFrame ||
function(f) {
window.setTimeout(f,1e3/60);
}
}();
var randompos = {};
RandomPosition();
function DrawBackround() {
ctx.globalAlpha = 1;
ctx.clearRect(0, 0, 200, 200);
my_gradient.addColorStop(0, '#002EB8');
my_gradient.addColorStop(1, '#4D6DCD');
ctx.fillStyle = my_gradient;
ctx.fillRect(0, 0, 200, 200);
}
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
function RandomPosition() {
DrawBackround();
ctx.globalAlpha = 0.5;
var dt = 10;
for (i = 0; i < 3; i++) {
n = Math.floor(Math.random() * 8) + 1;
switch (n) {
case 1:
randompos.x = 0;
randompos.y = dt; //12
break;
case 2:
randompos.x = dt;
randompos.y = dt; //1
break;
case 3:
randompos.x = dt;
randompos.y = 0; //3
break;
case 4:
randompos.x = dt;
randompos.y = -dt; //4
break;
case 5:
randompos.x = 0;
randompos.y = -dt; //6
break;
case 6:
randompos.x = -dt;
randompos.y = -dt;
break;
case 7:
randompos.x = -dt;
randompos.y = 0;
break;
case 8:
randompos.x = -dt;
randompos.y = dt;
break;
default:
}
ctx.fillStyle = get_random_color();
ctx.fillRect(randompos.x + 50, randompos.y + 50, 100, 100);
}
window.requestAnimationFrame(RandomPosition);
for (i = 0; i < 10; i++) {
(function (i) {
window.setTimeout(function () {}, i * 2000);
}(i));
}
}
推荐答案
一个减慢你的特定功能的选项是让它只运行每一个X帧,
One option to slow down your particular function would be to make it run only every X frames,
将RandomPosition()编辑成这样的东西使它每10帧运行一次:
Editing your RandomPosition() to something like this makes it run once every 10 frames:
var counter=0;
function RandomPosition() {
if(++counter % 10){
window.requestAnimationFrame(RandomPosition);
return false;
}
http://jsfiddle.net/jaibuu/kHvaX/1/
这篇关于如何减慢动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文