easing

[julianoPOA 0]

Olá!

 

alguém poderia me explicar qual o segredo do EASING nas modelos do site http://www.mariafilo.com.br/verao2010/#/colecoes/lookbook/look3/

 

Quando o mouse sobe a imagem desce; quando o mouse desce, a imagem sobe.

 

agradeço desde já a ajuda

[carneirinho 7]

Se é segredo eu nem deveria contar, mas vou te dar uma ajuda.

 

Imagine que você tem uma imagem com o height (altura as3) ou _height (altura as2) de 800px, e tenha um palco com a altura de 600px. Com isso você tem a sobra de 200px pra deslocar pra cima e pra baixo, então começaria por isso:

 

var sobra: Number = foto._height - Stage.height;

 

Depois disso você terá que pegar a porcentagem do mouse em relação a aultura do palco:

onEnterFrame = function(){
   pct = (_root._xmouse / Stage.height) / 100;
   trace(pct); // isso vai te retornar valores de 0 a 100 de acordo com a altura do mouse no palco
}

Por fim você precisa fracionar a sobra em 100 e aplicar sobre a porcentagem para que a imagem se desloque de acordo com a posição do mouse:

onEnterFrame = function(){
   pct = (_root._xmouse / Stage.height) / 100;
   trace(pct); // isso vai te retornar valores de 0 a 100 de acordo com a altura do mouse no palco
   fracao = sobra / 100;
}

depois faça a posição da foto em _y ser o resultado da porcentagem + a fração:

onEnterFrame = function(){
   pct = (_root._xmouse / Stage.height) / 100;
   fracao = sobra / 100;
   foto._y = fracao * pct;
}

Isso provavelmente irá fazer a imagem andar no sentido do mouse, dai pra inverter um valor matemáticamente, você multiplica por menos 1, ficando:

 

onEnterFrame = function(){
   pct = (_root._xmouse / Stage.height) / 100;
   fracao = sobra / 100;
   foto._y = fracao * -pct;
}

Por fim, o que você esperava, a mágina, o segredo, a tramóia, o encanto do ease:

 

var sobra: Number = foto._height - Stage.height;
onEnterFrame = function(){
   pct = (_root._xmouse / Stage.height) / 100;
   fracao = sobra / 100;
   posicao = fracao * -pct;
   foto._y = foto._y + (posicao - foto._y) * 0.4; // Alterando o valor de 0.4 para 0.5 ou 0.3 enfim, você terá o controle da velocidade do ease
}

Olá!

 

alguém poderia me explicar qual o segredo do EASING nas modelos do site http://www.mariafilo.com.br/verao2010/#/colecoes/lookbook/look3/

 

Quando o mouse sobe a imagem desce; quando o mouse desce, a imagem sobe.

 

agradeço desde já a ajuda

 

[Thiago de Oliveira Cruz 21]

Ponto para os segredos desvendados por Mister C de carnerinho :D

 

Bela explicação.

 

 

Abraços