Efeitos Na Mootools

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!

Anúncios

2 Responses to Efeitos Na Mootools

  1. Marcos disse:

    Ola,

    não sei se é aqui que tiro dúvidas, olhei no site e não encontrei outro lugar então resolvi sanar meu problema por aqui, é o seguinte: tentei aplicar o Fx.Slide da Mootools no meu script de muitas formas e nada, copiei a demo que está no site da Mootools do Fx.Slide Demo colei no meu código e nada, baixei a Mootools inteira, compactada e descompactada, também, baixei somente os módulos necessários pra funcionar o efeito Fx.Slide, verifiquei se a libraria estava no caminho certo e estava… as mensagens que tenho de erro são essas:

    missing variable name
    var MooTools = {\n
    mootools1.11.js (line 2554)

    window.addEvent is not a function
    window.addEvent(‘domready’, function() {

    aqui está o código inteiro:

    Untitled Document

    #test {
    background: #222;
    color: #fff;
    padding: 10px;
    margin: 20px;
    border: 10px solid pink;
    }

    #test2 {
    background: #222;
    color: #fff;
    padding: 10px;
    margin: 20px;
    border: 10px solid pink;
    }

    window.addEvent(‘domready’, function() {
    mySlide = new Fx.Slide(‘test’);

    $(‘slidein’).addEvent(‘click’, function(e){
    e = new Event(e);
    mySlide.slideIn();
    e.stop();
    });

    $(‘slideout’).addEvent(‘click’, function(e){
    e = new Event(e);
    mySlide.slideOut();
    e.stop();
    });

    $(‘toggle’).addEvent(‘click’, function(e){
    e = new Event(e);
    mySlide.toggle();
    e.stop();
    });

    $(‘hide’).addEvent(‘click’, function(e){
    e = new Event(e);
    mySlide.hide();
    e.stop();
    });
    });

    Fx.Slide Vertical

    slideout | slidein | toggle | hide

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Obrigado.

  2. Marcos,
    Tenta $(window).addEvent ao invés de window.addEvent.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: