Voltei pessoal! E falando da Mootools, que andei estudando recentemente, mais especificamente sobre efeitos, uma parte muito divertida e legal.
Os efeitos na Mootools são divididos em algumas classes, que estão dentro de Fx, cada uma delas com um objetivo diferente. Falarei hoje nesse post da Fx.Style, Fx.Styles e inevitávelmente da Fx.Transitions, as duas primeiras basicamente mudam uma propriedade de estilo CSS gradualmente ao longo de um tempo de acordo com uma determinada transição, que está contida dentro da última classe referida. A principal diferença entre as duas classes é que a primeira só aplica efeito sobre uma propriedade e a segunda sobre mais de uma propriedade, as duas relacionadas a um elemento.
Transições
A classe Fx.Transitions nos fornece uma lista de transições, que alterarão a animação, para serem usadas em nossos efeitos. Transições são responsáveis por modificar os valores intermediarios entre o inicio e o fim de uma animação. Por exemplo, quando se quer modificar a largura de um elemento de 10 a 15 pixels, a transição será responsável por definir que, por exemplo, no 300º milissegundo da animação a largura terá 12 pixels. Cada transição, exceto a linear, contem 3 opções de easing:
- easeIn: o efeito é mais intenso no ínicio da animação
- easeOut: o efeito é mais intenso no final da animação
- easeInOut: o efeito é mais intenso no ínicio e no final
Escolhida a transição e o método easing, você pode obte-lá desse modo:
// Fx.Transitions.[tipo de transição].[método easing]
Fx.Transitions.Sine.easeInOut
A dica pra escolher a combinação certa é testando, verifique cada transição nesse demo de transições.
Alterando Uma Única Propriedade CSS Com Fx.Style
Primeiro nos precisamos decidir o elemento que receberá o efeito, depois disso temos dois meios de criar o efeito. O primeiro, clássico, usando o construtor, que aceita três argumentos: o primeiro o elemento em si, o segundo a propriedade CSS que será modificada e o terceiro uma lista de opções:
var obj = $("box");
var fx = new Fx.Style(obj, "height", {
"transition": Fx.Transitions.Sine.easeInOut, // Transição a ser usada na animação
"duration": 1000, // Duração em milissegundos
"unit": "px", // Unidade usada para alterar a propriedade
"wait": true, // Aguardar ou não a animação anterior de mesma instância para começar
"fps": 50 // Quadros por segundo da animação, quanto maior melhor e mais lento
});
O segundo meio, que eu prefiro, é um atalho no próprio objeto (instância de Element), o método effect, que recebe os argumentos 2 e 3 iguais do construtor acima:
var obj = $("box");
var fx = obj.effect("height", {
// Mesmas opções
});
Terminada a criação do efeito, temos que iniciá-lo efetivamente, para isso temos o método start. Ele aceita 1 ou 2 argumentos, no primeiro caso o primeiro argumento é o valor final da propriedade, o inicial será o valor atual:
fx.start(350); // O objeto terá a largura igual a 350 pixels no final
Já no segundo caso, o primeiro argumento é o valor inicial e o segundo o final:
fx.start(10, 350); // O objeto terá 10 pixels no ínicio do efeito e 350 depois de terminado
Dica: Se você for alterar a mesma propriedade várias vezes não crie uma nova instância a cada vez, use a que já foi criada e chame o método start pra cada efeito.
Pronto, bem mais legal do que mudar propriedades sem efeito, né?!
Alterando Várias Propriedades CSS Com Fx.Styles
Quase a mesma coisa que a classe Fx.Style, porém algumas diferenças. Continuamos com 2 meios de se obter a instância, ou pelo construtor, que aceita 2 argumentos iguais ao anterior: o elemento e as opções, a exeção é o nome da propriedade que será modificada, já que são mais de uma propriedades elas serão definidas na hora de iniciar o efeito:
var obj = $("box");
var fx = new Fx.Styles(obj, {
// Mesmas opções
});
Ou pelo método effects do objeto:
var obj = $("box");
var fx = obj.effects({
// Mesmas opções
});
Agora vamos iniciar o efeito, a diferença principal para Fx.Style é que é aqui que serão definidos os valroes das propriedades atrávez de um objeto (JSON):
fx.start({
"height": 350, // Efeito iniciará com altura atual e terminará com 350 pixels
"width": [10, 350], // Efeito iniciará com largura 10 pixels e terminará com 350 pixels
"background-color": ["#FF0000", "#0000FF"], // Cor de fundo vermelha no início e azul no final
"color": "#FFFFFF" // Cor do texto atual no início e branca no final
});
Como se pode perceber, se você fornecer um Array como valor da propriedade, o primeiro elemento será o valor para ser usado no início do efeito e o segundo no final, ou se fornecer somente um valor, esse será o valor final e o inicial será o valor atual da propriedade.
A mesma dica anterior também vale aqui, porém como aqui se modificam várias propriedades, a regra é: se você tiver que aplicar vários efeitos a um elemento várias vezes, use a mesma instância e chame o método start.
Viu como não é difícil brincar com a Mootools, gostei muito do suporte a efeitos, animações, esse tipo de coisa, é muito transparente, quem já implementou (ou tentou implementar) algo assim sabe como é difícil fazer um trabalho bem feito e ao mesmo tempo simples de se usar. Esse é um ponto forte da Mootools.
Flws pessoal, até a próxima!
3 Comentários | 
Javascript, Ruby On Rails | 
Permalink
Escrito por Bernardo Rufino
