[HTML|JS|CSS] jQuery : Efekty

Kolejnym powodem, dla którego warto skorzystać z biblioteki jQuery jest proste API dla tworzenia efektów na stronie internetowej. Dzięki animacjom każdy programista może poprawić interaktywność swojej strony internetowej, dopasowując ją do najnowszych standardów wyglądu.

Pierwszą rzeczą, którą można łatwo wykonać przy użyciu jQuery jest pokazywanie / ukrywanie elementu. Służą do tego odpowiednio metody .show() oraz .hide(). Ponadto mamy do dyspozycji metodę .toggle(), która dokonuje przełączeń pomiędzy wspomnianymi stanami. Wszystkie trzy metody dokonują modyfikacji na właściwości display.

$(document).ready(function(){
 $('#showhide').click(function(){  
  if($('.image').first().css('display')=='block')
  {
   $('.image').hide();
  }
  else
  {
   $('.image').show();
  }  
 });
 $('#toggle').click(function(){
  $('.image').toggle();
 });
 });

Analogiczne operacje możemy wykonać wprowadzając nieco animacji. Efekty z grupy slide imitują efekt zwijania / rozwijania elementu, animując jego wysokość. Dla każdej z funkcji możemy podać długość animacji (w ms) oraz callback, który zostanie wywołany w momencie zakończenia animacji.

$(document).ready(function(){
 $('#slideup').click(function(){
  $('.image').slideUp(800, function() {
      console.log('animation completed');
    });
 });

 $('#slidedown').click(function(){
  $('.image').slideDown(800, function() {
      console.log('animation completed');
    });
 });

 $('#slidetoggle').click(function(){
  $('.image').slideToggle('fast', function() {
      console.log('animation completed');
    });
 });
 });

Kolejne bardzo popularne efekty to znikanie i pojawianie się, czyli manipulacja na opacity. Korzystając z jQuery możemy to załatwić w jednej linijce. Proste funkcje fadeIn oraz fadeOut z opcjonalnym callbackiem ofertują taką funkcjonalność. Dodatkowo mamy funkcje fadeToggle(przełączanie przez zanikanie / pojawianie się) oraz fadeTo, która animuje nam opacity obrazka przez zadaną ilość milisekund do zadanej wartości

$(document).ready(function(){ 

 $('#fadein').click(function(){
  $('.image').fadeIn('slow');
 })

 $('#fadeout').click(function(){
  $('.image').fadeOut(1000,function(){
   console.log('animation completed');
  });
 })

 $('#fadeto').click(function(){
  $('.image').fadeTo('slow',0.3);
 })

 });

W przypadku bardziej zaawansowanych potrzeb dostajemy do dyspozycji funkcję animate, gdzie możemy podać, które właściwości chcemy animować, do jakiej wartości docelowej, oraz standardowo czas trwania i callback. Animacja wielu właściwości zostanie wykonana jednocześnie.

$(document).ready(function(){

 $('#animate').click(function(){
  $('.image').animate({
      opacity: 0.25,
      width: '+=50',
      height: '30px'
    }, 5000, function() {
      console.log('animation completed')
    });
 });

 });

Jeżeli zachodzi potrzeba, aby animacje wykonywały się sekwencyjnie można wywoływać je jedna po drugiej w jednej linijce. Api jQuery zapewnia taką wygodę dla programisty, co znacznie redukuje ilość kodu. Pomiędzy kolejnymi animacjami można wprowadzać opóźnienia, przy użyciu funkcji .delay()

$(document).ready(function(){

 $('#delay').click(function(){
  $('.image').slideUp('slow').delay(1500).slideDown('slow');
 });
 });

[HTML|JS|CSS] Compass : Animacje CSS3, Transformacje 2D

CSS3 umożliwia pisanie prostych animacji. Możemy na przykład animować zmianę szerokości kontrolki, zmianę koloru czy położenia. Problemem znowu jest zachowanie takiej animacji przy różnych silnikach przeglądarek. Kolejny raz z pomocą przychodzi Compass, udostępniając Mixiny pozwalające w łatwy sposób tworzyć efekty przejść. Mamy do dyspozycji cztery opcje:

1. transition-property - które property chcemy animować (domyślnie wszystkie).
2. transition-duration - czas trwania animacji (domyślnie 0s)
3. transition-timing-function - funkcja służąca do wyliczenia wartości w kolejnych chwilach czasu (odpowiednik easing function z WPF)
4. transition-delay - opóźnienie, po jakim wykona się efekt (domyślnie 0s)

Przykładowy sposób użycia, przy zdarzenie hover (najechanie myszą):

.inflated{
 @include transition-property(width);
 @include transition-duration(1s);
 @include transition-timing-function(ease-out);
 @include transition-delay(0.2s);
 width: 100px;
 &:hover{
  width : 200px;
 }
}

Dodatkowo za pomocą mixinów Compassa możemy tworzyć proste transformacje 2D, takie jak:

• Translacje

.translated{
 &:hover{
  @include translateX(10px);
  @include translateY(200px);
 }
}

• Rotacje

.rotated{
 &:hover{
  @include rotate(33deg);
 }
}

• Skalowanie

.scaled{
 @include transition-duration(1s);
 &:hover{
  @include scale(3);  
 }
}

Pełna lista możliwości dostępna jest tutaj.

[WPF] Dispatcher : opóźnione wykonanie metody

W przypadku, gdy chcemy, aby dispatcher odczekał określony przez nas czas, a następnie wykonał określoną metodę, możemy skorzystać z klasy ThreadPool.

Poniższa ExtensionMethod rozwiązuje problem opóźnionego wywołania dispatchera.

internal static class Extensions
{
    public static void DelayedInvoke(this Dispatcher dispatcher, int delayMs, Action action)
    {
        ThreadPool.QueueUserWorkItem((o) =>
                                            {
                                                Thread.Sleep(delayMs);
                                                dispatcher.Invoke(action);
                                            });
    }
}