Cichy Fragles

skocz do treści

Facebook Animation

Dodane: 22 grudnia 2010, w kategorii: Techblog

Facebook zdecydowanie nie jest „developer friendly” – pisanie aplikacji na ten serwis to droga przez mękę, a dokumentacja to jeden wielki śmietnik, w połowie nieaktualny, w połowie napisany na kolanie. Ale przynajmniej jedną fajną rzecz zrobili – tytułową bibliotekę do animowania obiektów za pomocą JS. Fajną, bo małą, lekką i banalnie prostą, czego nie da się powiedzieć o większości popularnych frameworków, w których często trzeba sięgać lewą ręką do prawej kieszeni, żeby uzyskać jakiś banalny efekt. Odkryłem ją jakiś rok temu i od razu przypadła mi do gustu, ale akurat nie była mi potrzebna, więc tylko zapamiętałem sobie, żeby ją wykorzystać w przyszłości.

Ale jak ta przyszłość w końcu nadeszła, to nagle się okazało, że Facebook z sobie tylko wiadomych powodów pozbył się tej zabawki nie tylko ze swojej strony, ale nawet wywalił ją z GitHuba (link niby jest, ale nie działa), co już trudno wytłumaczyć inaczej niż czystą złośliwością. Szukam w Google – nie ma, przynajmniej w pierwszej setce wyników. Szukam na facebookowym forum dla developerów – ludzie pytają co się stało i skąd to wziąć, jak na złość nikt nie ma, ewentualnie link nie działa. No żesz cholera, a podobno w necie nic nie ginie.

Szczęśliwie na moim dysku naprawdę nic nie ginie, więc bibliotekę odkopałem i wrzucam pod choinkę dla potrzebujących: animation.zip (11KB). Manuala niestety nie przyszło mi do głowy ściągać, a w Web Archive go nie ma, ale obsługa jest banalnie prosta. Parę przykładów:

// płynnie chowamy element
Animation(element).to("opacity", 0).hide().go();

// ...pokazujemy ponownie...
Animation(element).show().to("opacity", 1).from(0).go();

// ...albo zamiast tego powoooli rozwijamy...
Animation(element).to("height", "auto").from("0px").show().duration(5000).go();

// ...i równie płynnie zmieniamy parę jego właściwości
Animation(element).to("borderColor", "#FF0000").to("color", "#00FF00").go();

Chyba wszystko jest jasne, a pozostałe możliwości łatwo wydedukować z samego kodu. Myślę, że niejednemu Joggerowiczowi się przyda:-).

 

Podobne wpisy

Komentarze

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Formatowanie tekstu:
W zależności od wybranego formatu możesz używać podstawowych tagów HTML (np. <a>, <i>, <b>, <blockquote>) lub ich odpowiedników w Markdown.