Matematicas, efecto aceleracion.

EnZo

Buenas, estoy haciendo una cosilla en javascript en la que estoy atascado, por no saber las suficientes matematicas.

Tengo una capa. En ella tengo varias secciones. Quiero que cuando se pase el raton por encima esta se aga mas grande poco a poco pero con efecto aceleracion.
Bien la capa dependiendo de las secciones tiene mas o menos altura.

Ejem:
Si tiene 4 secciones la capa mide 100px de altura
Si tiene 2 secciones la capa mide 60px
Si tiene 6 secciones la capa mide 140px

El efecto de que crezca la capa con javascript ya lo he conseguido, lo que pasa que tengo que poner la velocidad a mano para que haga bien el efecto aceleracion.

Lo que estoy haciendo hasta el momento es:


altototal=120; //alto de la capa que tiene con 5 secciones
velocidad=6; //es lo que se va a incrementar
//primero cogi una medida que es 100px que son 4 secciones
//y con aceleracion 9.7 me funcionaba bien el efecto
//asi que hago una regla de tres simple
aceleracion=(9.7*altototal)/100;

velocidad*=aceleracion; //incremento la aceleracion para que el numero vaya siendo mas pequeño

alto=altonow+velocidad; //donde altonow es el alto que tiene actualmente la capa, a eso le añado la velocidad que la he calculado antes

Para que veais lo que estoy haciendo:
con 4 secciones -> http://www.galaxys.net/inmoserr/cosas/4.htm
con 8 secciones -> http://www.galaxys.net/inmoserr/cosas/8.htm

Con la regla de tres se supone que deberia hacerlo bien, pero si os fijais en el de 8 la velocidad no llega a ser meno de 0, lo cual hace que el efecto no se consiga del todo.

NOTA: Dependiendo del navegador los valores son diferentes. Hablo de IE no mozilla

Espero que me hayais entendido porque es algo dificil de esplicar tmb. Sorry por el tocho xD

guner

podrías poner el incremento de la altura con setTimeout, disminuyendo el tiempo.

PD: no se como lo has hecho, no he mirado :P, si lo has hecho así, perdón __

s-charli

Esto es lo que tienes tu

altototal=120; //alto de la capa que tiene con 5 secciones
velocidad=6; //es lo que se va a incrementar
//primero cogi una medida que es 100px que son 4 secciones
//y con aceleracion 9.7 me funcionaba bien el efecto
//asi que hago una regla de tres simple
aceleracion=(9.7*altototal)/100;

velocidad*=aceleracion; //incremento la aceleracion para que el numero vaya siendo mas pequeño

alto=altonow+velocidad; //donde altonow es el alto que tiene actualmente la capa, a eso le añado la velocidad que la he calculado antes

altototal = 120;
velocidad=0 (Pa q quieres velocidad inicial si vas a acelerarlo..)
aceleracion=9.7;
tiempo=0; (Esto marcara la aceleracion)

Esta es la ecuacion:
alto = alto + 0.5aceleraciontiempo*tiempo

Deberas bajar la aceleracion kreo yo

Mas o menos creo asi ira nu se

Un Saludo :)

EnZo

Quiza no me entendisteis el planteamiento. Con la funcion setTimeout('agrando()', 100); hago que cada 100 milisegundos se ejecute la funcion agrando().

Voy a simular el proceso de como seria. Teniendo en cuenta:

altototal=120;
velocidad=6;
aceleracion=0.8;
altonow=1;

La capa mide 1px la primera vez que ejecuto la funcion agrando() y aria lo siguiente:



function agrando() {
  altonow=alto;
  velocidad*=aceleracion; //da 4.8
  alto=velocidad+altonow //da 5.8
  setTimeout('agrando()', 100); //llamo de nuevo esta funcion
}

La capa ahora mismo mide 5.8 le ha sumado a lo que tenia 4.8



function agrando() {
  altonow=alto;
  velocidad*=aceleracion; //da 3.84
  alto=velocidad+altonow //da 9.64
  setTimeout('agrando()', 100); //llamo de nuevo esta funcion
}



function agrando() {
  altonow=alto;
  velocidad*=aceleracion; //da 2.28
  alto=velocidad+altonow //da 11.9
  setTimeout('agrando()', 100); //llamo de nuevo esta funcion
}



function agrando() {
  altonow=alto;
  velocidad*=aceleracion; //da 1.36
  alto=velocidad+altonow //da 13.2
  setTimeout('agrando()', 100); //llamo de nuevo esta funcion
}

Asi sucesivamente, si os fijais la velocidad que es lo que realmente se le suma cada vez es menor, que es lo que tiene que hacer para dar el efecto aceleracion. Muy rapido al principio y mas lento conforme avanza hasta que se frena. Porque la velocidad llegara a dar por debajo de 1 y ya no se sumara.

Si quito la el atributo de la velocidad no serviria, no se podria hacer. Y en este caso tal y como es javascript no puedes modificar el tiempo, ya que ahora mismo actua como si fuesen fotogramas.

Espero que me entendais ahora, porque no se esplicarlo mejor xD

s-charli

Pos ya lo tienes tonces, aunq la velocidad deberias subirla mas xq eso va muy lento :P

Un Saludo :)

EnZo

Ya esque esos no son los valores reales e puesto unos por poner. Pero el procedimientoe es el mismo.

Se supone que lo deberia de tener pero no lo tengo xD, osea si lo hago a mano, si se que la medida es 120 con certeza pues puedo ir probando velocidades, pero como el alto de la capa no es 120 siempre pues tengo que hacer una regla de tres se supone no? Pues no lo hace bien si no es con 4 secciones.

4 secciones -> http://www.galaxys.net/inmoserr/cosas/4.htm
8 secciones -> http://www.galaxys.net/inmoserr/cosas/8.htm

IS4kO

Creo que las siguientes formulas pueden ayudarte:

La velocidad que lleva un cuerpo que sale con una velocidad inicial vo, y que se mueve sobre una recta con una aceleración constante a, puede expresarse en función del tiempo mediante:

v = vo + a*t

Y el espacio recorrido por un cuerpo que lleva una aceleración constante viene dado por:

s = so + vot +1/2 at2

Donde so es el espacio que lleva recorrido cuando empieza a contar el tiempo. Y s el espacio final recorrido

:)

Edit: thx Guner t2 t al cuadrado :D

guner

an -> a elevado a n XD

yo me refería a hacerlo más grande siempre en la misma medida, pero cada vez más rápido, el efecto no es ===, pero también funciona.

lo bueno es que se podría hacer con un bucle simple.

EnZo

Hace tiempo hice una cosa parecida:
http://www.estrellalevante.es/superior.htm

La capa cuando se acerca al raton se va frenando poco a poco.
Lo que hice fue poner velocidad 20 y tenia que llegar hasta 300px cuando llego a 300px lo hizo bien osea llego sin velocidad ninguna. Pues nada aplique una regla de tres,

si a 300px - 20vel
posiratonPX - Xvel

Inesplicablemente el metodo que use, aqui no me vale :(

He estado probando medidas y valores, que son las que me van perfectas.
Y tengo:

8 celdas
aceleracion=0,928 //Siempre es igual, es constante
velocidad=14,5
tamaño=170

4 celdas
aceleracion=0,928 //Siempre es igual, es constante
velocidad=8,44
tamaño=90

2 celdas
aceleracion=0,928 //Siempre es igual, es constante
velocidad=5,3
tamaño=50

Alguin sabria con esos datos sacar alguna formula, ecuacion, progresion aritmetica... lo que sea
teniendo los datos de '8 celdas' tendria que sacar la velocidad de 5 3... celdas.

Mi regla de tres que no me vale xD:
si 170t - 14,5vel
90t - Xvel


Bueno pues eso no da 8,44 si no 7,6 :(

BEDI

Eso que pretendes no deberias hacerlo con integrales ?? pregunto.. que nose

Asecas

elevalo al cuadrado

Kansei

Quería poderte haber hecho el código pero no he tenido tiempo, a si que te explico lo mejor que pueda mi teoría:

Loa que tu quieres es la capa empiece con una velocidad inicial y se valla frenando de forma paulatina hasta detenerse justo al alcanzar el tamaño máximo de la capa que viene dado por el numero de secciones del submenú.

Para esto lo lógico seria aplicarle una aceleración, en este caso desaceleración, a la capa que le vaya restando velocidad de crecimiento a la capa. Siguiendo esto la velocidad es e/t, con lo cual si cogemos intervalos iguales de espacio (px de la capa) y vamos aumentando el tiempo, obtenemos una velocidad menor y que se va aproximando de forma progresiva a 0.

Conclusión, lo que tenemos que tocar es el intervalo de llamada de la función setTimeout manteniendo igual el incremento de px sobre el alto total de la capa.

Suerte.

EnZo

Gracias, kansei. Lo he dejao, funciona pero no como yo queria.

Tu teoria sobre que el valor que se ha de modificar el tiempo, puede que valga, pero creo que en este caso no. Creo que la cuestion no esta en el tiempo, porque aqui el settimeout actua como si fuesen forogramas en flash.

Usuarios habituales

  • EnZo
  • Kansei
  • Asecas
  • BEDI
  • guner
  • IS4kO
  • s-charli