Animacja Genie JavaScript?

Question

Czy istnieje wtyczka jQuery lub biblioteka javascript obsługująca efekt animacji "genie", taki jak Apple Mac OS X?

Bonus: Biblioteka Actionscript? C/C++? .NETTO? Cel C?

Answer 1

Nie to, co wiem. Efekt "dżin" jest zniekształceniem, którego nie można osiągnąć za pomocą CSS: transformacje CSS (w tym filtr matrycowy IE) umożliwiają zmianę rozmiaru obu osi, obrotu i ścinania. WebKit zapewnia dodatkowo liniową perspektywę. Zakrzywione zniekształcenia, takie jak dżin, nie mogą być odtworzone za pomocą tych narzędzi.

Aby to zrobić w JavaScript, musisz podzielić obraz (lub inny element, jeśli jesteś naprawdę ambitny) w jedną linię na piksel i zgnieść poziomo za pomocą transformacji CSS. Byłoby to strasznie nieefektywne do renderowania i prawdopodobnie wyglądałoby zgrzytliwe i migotliwe, a także nieprzyjemnie aliasingowane.

Answer 2

http://wonderfl.net/c/qnTR

http://swingpantsflash.com/genie_transition/genietransition.html

Answer 3

udało mi się odtworzyć ten efekt z JS + CSS ... to nie jest jeszcze ukończony, ale tutaj jest podgląd animacji w akcji:

http://www.youtube.com/watch?v=UwUxo-R-mzU

Answer 4

Zainspirowany implementacją Hakana, napisałem swoją wersję biblioteki przejść Genie Effect.

Wyjazd https://github.com/kamilkp/geniejs

i http://kamilkp.github.io/ na demo.

Działa w każdej przeglądarce, w tym w telefonie komórkowym (nie zawsze jednak w trybie firefox płynnie). Obsługuje przejścia Genie Effect w każdym kierunku (góra, dół, lewo, prawo). Działa nawet wtedy, gdy docelowy element html jest dzieckiem jakiegoś kontenera, który ma przepełnienie automatyczne lub ukryte. Jest samo w sobie agnostykiem biblioteki, ale napisałem również wtyczkę jQuery dla wygody. Jeśli do projektu zostanie dołączona biblioteka html2canvas, wtyczka pozwala animować elementy HTML z efektem dżina (przykład rozwijany tutaj: http://kamilkp.co.nf/genie/canvas/)

Jedynym wymaganiem przeglądarki jest to, że musi obsługiwać przejścia CSS. Jest to czyste rozwiązanie javascript + CSS.

Answer 5

Można to zrobić za pomocą czystej transformacji CSS, ale jest znacznie łatwiejsza przy użyciu SASS. Generalnie chodzi o to, że chcesz przekształcić prostokąt w trójkąt w gładki sposób (tak, aby w połowie koryta był trapez). Problem polega na tym, że każda transformacja liniowa przekształci prostokąt w równoległobok (quad ze wszystkimi stronami równoległymi) i chcemy trójkąta. To oznacza, że ​​potrzebujemy transformacji nieliniowej. Dobrą wiadomością jest to, że można wykonywać transformacje nieliniowe, udając, że są to przekształcenia w 3D, a następnie rzut prostokąt na ekran 2D. Pomyśl o cholernym chodniku - wygląda jak trójkąt. Chcemy więc obrócić prostokąt i uczynić go bardzo długim.

Przemiany dla pierwszych i ostatnich klatek kluczowych animacji są bardzo proste następnie: pierwsza ma transformacji tożsamości, a ostatni z nich ma

-webkit-transform: matrix3d(
    1, 0, 0, 0, 
    0 , 1, 0, -9/$height, 
    0, 0, 1, 0, 
    0, 0, 0, 10 
); 

jedyną ciekawą kolumnę jako ostatni taki, który stwierdza, że ​​odległość od Przeglądarka powinna mieć rozmiar 10 "9" dla pikseli w górnym wierszu i przejść do 10-9 = 1 dla najniżej położonych pikseli:

Problem dotyczy ramek pośrednich, ponieważ domyślny algorytm interpolacji używany przez przeglądarki próbuje interpretować macierze jako kompozycję operacji elementarnych, takich jak rotacje i tłumaczenia, a następnie interpo każda operacja jest niezależna. A ponieważ nasza ostateczna transformacja przypomina obrót o 90 w połączeniu z nieskończonym rozciągnięciem, interpolacja będzie próbowała jednocześnie wykonywać ruchy obrotowe i rozciągające, co wygląda trochę dziwnie, ponieważ jeden z tych ruchów "jest okrągły", podczas gdy drugi "liniowy" i prędkość dwa nie pasują.

Aby to zrekompensować, można wygenerować wiele ramek pośrednich i do tego używam SASS. Ostateczny wynik jest tutaj: http://codepen.io/anon/pen/ApHkc

I większość zasług dla tego rozwiązania powinna być skierowana do autora http://persistent.info/web-experiments/distortion/, który przekonał mnie, że jest to możliwe. Należy również zauważyć, że istnieje prawdopodobnie wiele różnych transformacji, które przekształcają dany prostokąt w dany trójkąt, które różnią się tylko sposobem, w jaki są mapowane ich wnętrza - być może moje rozwiązanie nie jest najlepsze pod tym względem.