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:-).


Komentarze [Atom]

  • 1.
    22 grudnia 2010, 23:42:29 SebaS86

    Cholera, a mi się zdawało, że jQuery też się to robi łatwo.

    $(element).fadeOut('slow', function callback() {})

    Jak na mój gust wygląda niemal identycznie. ;)


  • 2.
    23 grudnia 2010, 20:59:42 Cichy

    Z jQuery niewiele miałem do czynienia, więc nie wykluczam, że jest równie proste, aczkolwiek jak na mój gust możliwość zrobienia praktycznie wszystkiego za pomocą from() i to() jest trochę fajniejsza niż pamiętanie nazw fafnastu funkcji robiących po jednej rzeczy. No ale o gustach się nie dyskutuje;-).


Dodaj komentarz