Easing w jQuery na szybko

Wykorzystując framework jQuery oraz plugin jQuery Easing istnieje możliwość szybkiego zaimplementowania nieliniowej zmiany dowolnego parametru/właściwości/zmiennej w zależności od czasu. Dostępnych algorytmów jest sporo - przegląd jest dostępny na stronie jQuery Easing. Wykorzystując ten plugin jesteśmy w stanie dodawać ciekawe efekty do zachowania parametrów elementów na stronie. Poniżej zostanie omówiony przykład zmiany szerokości narysowanej linii na Google Maps'ach. 


W przypadku, kiedy są wykorzystywane standardowe efekty jQuery jak slideTo itp., wówczas można dodać parametr z funkcją easingową - ale o tym wszystkim w przykładach na stronie pluginu. Jeżeli zaistnieje potrzeba wykorzystania w zmianie innych parametrów np. css'ów - wówczas wystarczy zrobić funkcję zależną od czasu oraz wykorzystać metodę jQuery.easing.[easingEfekt](null, [wartość czasu], [wartość początkowa], [wartość różnicy końcowej i początkowej], [maksymalna ilość czasu]), np.:

function change(time) {
   if (arguments.length == 0) // sprawdzanie czy jest wywołanie funkcji bez parametru
      var time = 0;
   if (time == 10)      // koniec wywołania efektu
      return;
   $('.border').css('border-right', jQuery.easing.easeInCubic(null, time, 5, 10, 10)) // zmiana wartości zmiennej zgodnie z wybranym algorytmem - zwiększenie od 5 do 15
   setTimeout(function(){change(time+1)}, 20);
}

Rozpatrzmy to na przykładzie ostatnio wałkowanych przeze mnie Google Maps'ach. Załóżmy, że chcemy zrobić efekt pogrubiania linii, kiedy na nią klikniemy. Wówczas konieczne będzie ponowne ustawienie parametrów w zależności od czasu:

var polyline = new google.maps.Polyline({
  path: new Array(
      new google.maps.LatLng(51.07742969478794, 16.985549926757812),
      new google.maps.LatLng(51.076782592536524, 17.02709197998047)
   ),
   strokeColor: '#0000ff',
   strokeOpacity:0.8,
   strokeWeight:5
});
google.maps.event.addListener(polyline, 'click', function(event) {
      change();
});

Funkcja change będzie wyglądać tak:

function change(time) {
   if (arguments.length == 0)
      var time = 1;
   if (time == 10)
      return;
   polyline.setOptions({strokeWeight: jQuery.easing.easeInCubic(null, time, 5, 10, 10)});
   setTimeout(function(){change(time+1)}, 20);
}

A oto przykład (w tym miejscu chciałem przeprosić wszystkich Operowców - niestety Google ma straszną obsługę tej przeglądarki jeśli chodzi o Maps API i niestety może to nie działać, albo się nie animować :( ):

Voila! Przykładem wykorzystania może być dokonana przeze mnie mapka tras biegowych w Spalonej http://spalona.pl/trasy-narciarskie.html