Animacje w locie – czyli Storyboard w kodzie C#

Storyboardy są bardzo wdzięcznym mechanizmem animacji do umieszczania w kodzie XAML. Attached properties, definiowanie targetu na podstawie nazwy obiektu… Szybko, sprawnie i przyjemnie. Sprawy mają się gorzej jeżeli musimy zdefiniować taką samą animację do wielu obiektów. Całkowita komplikacja następuje w momencie kiedy musimy animować obiekt dodany dynamicznie. W takim wypadku nie pozostaje nic innego jak porzucić XAML i zanurzyć się w kodzie C#.

W tym artykule pod lupę wezmę następującą sytuację: po kliknięciu na przycisk do LayoutRoot dodajemy prostokąt, który ma się natychmiast obrócić wokół osi Y (w 2.5D). Prawda, że proste?

Najpierw tworzymy standardowy prostokąt z Plane Projection.

Rectangle rect = new Rectangle();
rect.Fill = new SolidColorBrush(Colors.Red);
rect.HorizontalAlignment = HorizontalAlignment.Stretch;
rect.VerticalAlignment = VerticalAlignment.Stretch;

PlaneProjection rotate = new PlaneProjection();
rect.Projection = rotate;

LayoutRoot.Children.Add(rect);

Następnie zabieramy się za animację. Zaczynamy od utworzenia DoubleAnimation, który będzie animował właściwość PlaneProjection.RotationYProperty

DoubleAnimation anim = new DoubleAnimation();
anim.Duration = new Duration(new TimeSpan(0,0,1));
anim.From = 0.0;
anim.To = 0.0;

To co pozostało do zrobienia, to skojarzenie anim z rotate oraz umieszczenie wszystkiego w Storyboard.

Storyboard.SetTarget(anim, rotate);
Storyboard.SetTargetProperty(anim,
   new PropertyPath(PlaneProjection.RotationYProperty));

Storyboard storyboard = new Storyboard();
storyboard.Children.Add(anim);
storyboard.Begin();

Jak widać kolejność konstruowania poszczególnych elementów różni się od wersji xamlowej. Moim zdaniem jest to dość mało intuicyjne. Aczkolwiek zrozumienie tego prostego przykładu pozwoli z łatwością budować bardziej zaawansowane animacje.

Share

Dodaj komentarz

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

Spam protection by WP Captcha-Free