Painel de Usuário
Mensagens: 0
-
Alterar
-
Ver
-
Tópicos e mensagens
Contador de Visitas
Como Fazer Efeito Loding
5 participantes
Viciados BR :: Design :: Tutoriais
Página 1 de 1
Como Fazer Efeito Loding
Pois é gente, muita gente quer me bater pois so posto coisas do HTML5 de CANVAS, bem, primeiro é porque o CANVAS é a unica ferramenta do HTML5 funcionando direitinho, e também da pra fazer coisinhas legal com CANVAS.
Bem vamos começar logo com essa "joça"
Como de costume, vamos criar uma index.html e estruturar o CANVAS.
index.html
Efeito Loading com CANVAS by Luis-701
var canvas = document.createElement('canvas');
canvas.height = 100;
canvas.width = 300;
Agora dentro do script que criamos o canvas, vamos falar como ele vai fira, e quantos graus vai girar e para onde vai girar.
index.html
Efeito Loading com CANVAS by Luis-701
buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
function buildSpinner(data) {
var canvas = document.createElement('canvas');
canvas.height = 100;
canvas.width = 300;
document.getElementsByTagName('article')[0].appendChild(canvas);
var ctx = canvas.getContext("2d"),
i = 0, degrees = data.degrees, loops = 0, degreesList = [];
for (i = 0; i < degrees; i++) {
degreesList.push(i);
}
// reset
i = 0;
// so I can kill it later
window.canvasTimer = setInterval(draw, 1000/degrees);
function reset() {
ctx.clearRect(0,0,100,100); // clear canvas
var left = degreesList.slice(0, 1);
var right = degreesList.slice(1, degreesList.length);
degreesList = right.concat(left);
}
function draw() {
var c, s, e;
var d = 0;
if (i == 0) {
reset();
}
ctx.save();
d = degreesList[i];
c = Math.floor(255/degrees*i);
ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
ctx.lineWidth = data.size;
ctx.beginPath();
s = Math.floor(360/degrees*(d));
e = Math.floor(360/degrees*(d+1)) - 1;
ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e,
false);
ctx.stroke();
ctx.restore();
i++;
if (i >= degrees) {
i = 0;
}
}
}
Pronto, agora é so salvar e curtir o efeito LOADING, barrinhas girando cicurlamente.
Fiquem ligados nos meus próximos tutoriais!!
Bem vamos começar logo com essa "joça"
Como de costume, vamos criar uma index.html e estruturar o CANVAS.
index.html
var canvas = document.createElement('canvas');
canvas.height = 100;
canvas.width = 300;
Agora dentro do script que criamos o canvas, vamos falar como ele vai fira, e quantos graus vai girar e para onde vai girar.
index.html
buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
function buildSpinner(data) {
var canvas = document.createElement('canvas');
canvas.height = 100;
canvas.width = 300;
document.getElementsByTagName('article')[0].appendChild(canvas);
var ctx = canvas.getContext("2d"),
i = 0, degrees = data.degrees, loops = 0, degreesList = [];
for (i = 0; i < degrees; i++) {
degreesList.push(i);
}
// reset
i = 0;
// so I can kill it later
window.canvasTimer = setInterval(draw, 1000/degrees);
function reset() {
ctx.clearRect(0,0,100,100); // clear canvas
var left = degreesList.slice(0, 1);
var right = degreesList.slice(1, degreesList.length);
degreesList = right.concat(left);
}
function draw() {
var c, s, e;
var d = 0;
if (i == 0) {
reset();
}
ctx.save();
d = degreesList[i];
c = Math.floor(255/degrees*i);
ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
ctx.lineWidth = data.size;
ctx.beginPath();
s = Math.floor(360/degrees*(d));
e = Math.floor(360/degrees*(d+1)) - 1;
ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e,
false);
ctx.stroke();
ctx.restore();
i++;
if (i >= degrees) {
i = 0;
}
}
}
Pronto, agora é so salvar e curtir o efeito LOADING, barrinhas girando cicurlamente.
Fiquem ligados nos meus próximos tutoriais!!
Luis-701- Membro Novato
- Post : 25
Reputação : 0
Data de Inscriçao : 16/04/2011
Re: Como Fazer Efeito Loding
desculpa galerinha tem alguns erros ebreve eu ajeito
Luis-701- Membro Novato
- Post : 25
Reputação : 0
Data de Inscriçao : 16/04/2011
Re: Como Fazer Efeito Loding
Cuidado com o Duplo-Post ... *-*
@Marcos Lima- Moderador
- Post : 58
Reputação : 0
Data de Inscriçao : 12/02/2011
Idade : 24
Localização : Aqui No Neet
Re: Como Fazer Efeito Loding
Cuidado com o Duplo Post ...
Chokito- Membro Novato
- Post : 26
Reputação : 0
Data de Inscriçao : 16/04/2011
Idade : 29
Localização : Pulmão do Mundo .
Re: Como Fazer Efeito Loding
Luis-701 +10 ocorrencias Dual-post
Tome mais cuidado
Tome mais cuidado
Hunter- Membro Novato
- Post : 32
Reputação : 0
Data de Inscriçao : 07/04/2011
Localização : Atras de você muahahahah
Tópicos semelhantes
» como fazer um banner pra blog e site
» [Tutorial] Como fazer uma sign GFX
» Como fazer Gif Animado Com Photoshop
» Tutorial Como fazer Um extrator de icones
» [Fixo] Como fazer um barco voador.
» [Tutorial] Como fazer uma sign GFX
» Como fazer Gif Animado Com Photoshop
» Tutorial Como fazer Um extrator de icones
» [Fixo] Como fazer um barco voador.
Viciados BR :: Design :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|