¿Hay un complemento de jQuery o una biblioteca de JavaScript que admita un efecto de animación "genio" como el Apple Mac OS X Dock?Genie animation Javascript?
Bono: ¿biblioteca Actionscript? C/C++? .¿RED? ¿C objetivo?
No es que yo sepa. El efecto 'genio' es una distorsión que no se puede lograr con CSS: las transformaciones de CSS (incluido el filtro de matriz de IE) le dan un cambio de tamaño en ambos ejes, rotación y cortante. WebKit también te brinda perspectivas lineales. Las distorsiones curvilíneas como el genio no se pueden reproducir con esas herramientas.
Para hacerlo en JavaScript, tendría que dividir la imagen (u otro elemento si es realmente ambicioso) en una línea por píxel y aplastar horizontalmente mediante una transformación CSS. Sería terriblemente ineficiente para renderizar y probablemente parecería desigual y parpadeante, así como un alias desagradable.
El Actionscript allí se puede usar como punto de partida para crear lo mismo con canvas. Gracias. – guya
he logrado reproducir este efecto con JS + CSS ... no es terminado todavía, pero aquí es una vista previa de la animación en acción:
Danos algún algoritmo o código fuente para que podamos comenzar. El efecto se ve genial –
https://github.com/hbi99/genie.js –
Gracias .. Ahora puedo experimentar con eso. Intentaré cerrar la imagen grande de nuevo a su miniatura usando el reverso de ella. Un pulgar hacia ti hombre –
Inspirada en la implementación de Hakan, escribí mi versión de la biblioteca de transiciones Genie Effect.
Salida https://github.com/kamilkp/geniejs
y http://kamilkp.github.io/ para la demostración.
Funciona en todos los navegadores incluyendo móvil (no siempre sin problemas en Firefox sin embargo). Es compatible con las transiciones de efecto Genie en todas las direcciones (arriba, abajo, izquierda, derecha). Funciona incluso si el elemento html de destino es hijo de algún contenedor que tiene desbordamiento automático u oculto. Es independiente de la biblioteca en sí, pero también escribí un plugin jQuery de conveniencia. Y si también incluye la biblioteca html2canvas en su proyecto, el complemento le permite animar elementos HTML con efecto genio (ejemplo de expansión aquí: http://kamilkp.co.nf/genie/canvas/)
El único requisito para el navegador es que necesita soportar transiciones CSS. Es una solución pura de javascript + CSS.
Esta implementación parece demasiado problemática ya que no considera que el 'getBoundingClientRect' tenga en cuenta el desplazamiento. La posición del contenedor debe ser *** NOT *** ser 'absoluta'. Debería ser 'arreglado' en su lugar. – minmaxavg
Me encanta cuando alguien requiere nodejs para ejecutar un ejemplo – momomo
Se puede hacer utilizando la transformación de CSS pura, pero es mucho más fácil con SASS. La idea general es que quiere convertir un rectángulo en un triángulo de una manera suave (de modo que a mitad de camino sea un trapezoide). El problema con esto es que cualquier transformación lineal transformará un rectángulo en un paralelogramo (un quad con todos los lados paralelos) y queremos un triángulo. Esto significa que necesitamos una transformación no lineal. La buena noticia es que puede hacer transformaciones no lineales pretendiendo que se trata de transformaciones en 3D y luego proyectar el rectángulo en el espacio de pantalla 2D. Piensa en una loooong acera: parece un triángulo. Así que queremos rotar el rectángulo y hacerlo muy largo.
Las transformaciones de los fotogramas clave de inicio y de animación son muy sencillo entonces: el primero tiene la transformación de identidad, y el último tiene
-webkit-transform: matrix3d(
1, 0, 0, 0,
0 , 1, 0, -9/$height,
0, 0, 1, 0,
0, 0, 0, 10
);
la única columna interesante siendo el último el que afirma que la distancia desde el espectador debe ser 10 "para píxeles en la fila superior y bajar a 10-9 = 1 para los píxeles inferiores.
El problema es con marcos intermedios, ya que el algoritmo de interpolación predeterminado utilizado por los navegadores intenta interpretar matrices como composición de operaciones elementales como rotaciones y traducciones y luego interpo lates cada operación de forma independiente. Y dado que nuestra transformación final se asemeja a la rotación por 90 combinada con estiramiento infinito, la interpolación intentará realizar la rotación y el estiramiento simultáneamente, lo que parece extraño, ya que uno de estos movimientos "es circular" mientras que el otro "lineal" y la velocidad del dos no coincide.
Para compensar esto, se pueden generar muchos marcos intermedios y para eso utilizo SASS. El resultado final es aquí: http://codepen.io/anon/pen/ApHkc
Y la mayor parte del mérito de esta solución debe recaer en el autor http://persistent.info/web-experiments/distortion/ que me convenció de que esto es posible. Además, tenga en cuenta que posiblemente haya muchas transformaciones diferentes que transforman un rectángulo dado en un triángulo dado, que solo difieren en la forma en que se mapean sus interiores; quizás mi solución no sea la mejor al respecto.
esperarán este efecto. : P – booota
No es impossbile. Creo que se puede hacer con scale y translate3D, pero requeriría duplicar el elemento x número de veces, cortarlos en el lugar apropiado y apilarlos uno encima del otro en las ubicaciones apropiadas. Si alguna vez implementa esto, hágamelo saber. Para mí, creo que es demasiado trabajo, y potencialmente no effeciente de todos modos. – momomo
También podría ser posible usar solo un elemento y tener un genio como lienzo en la parte superior. Luego, el elemento se mueve de abajo hacia arriba debajo de este lienzo. También se puede hacer que comience pequeño y se expanda a medida que avanza. ¿No creará eso el efecto genio? – momomo