Transformace prvků v programu Expression Blend

Naučte se používat transformace pro nastavení velikosti, otočení, zkosení a 2.5D

Transformace definuje mapování bodů z jednoho souřadnicového systému do druhého. Transformace umožňují upravit vykreslování prvku při zachování původních hodnot. Stejně jako většinu objektů platformy Silverlight lze transformace snadno animovat. Poskytují základ pro většinu interaktivních rozhraní.

V této lekci znovu použijeme emotikonu z lekce kreslení. Využijeme ji při experimentování s různými typy transformací dostupnými v programu Blend a v platformě Silverlight.

01 Začněte s úsměvem

Otevřete projekt BasicDrawing (Základní kresba) z předchozí lekce. Pokud ho nemáte k dispozici, můžete kopii projektu stáhnout zde. Kresbu emotikony použijeme jako prvek pro experimentování s transformacemi.

02 Vyberte obličej a zadejte jeho název

Vyberte elipsu představující hlavu, prvky rightEye (pravé oko) , leftEye (levé oko) a dráhu představující ústa tak, že podržíte klávesu Shift a kliknete na objekty na panelu Objects (Objekty), nebo tak, že kolem těchto prvků nakreslíte obdélník s použitím nástroje Selection (Výběr), klávesová zkratka V. Klikněte na seskupené prvky pravým tlačítkem a vyberte příkaz Group Into -> Grid (Seskupit do -> Mřížky). Mřížku nazvěte face (obličej) .

03 Změňte velikost prvků

Když měníte velikost prvků na pracovní ploše Artboard přetažením bodů výběru, upravujete vlastnosti Height (Výška) a Width (Šířka) prvků. Je to totéž, jako změna vlastností Width (Šířka) a Height (Výška) v sekci Layout (Rozložení) na panelu Properties (Vlastnosti). Změňte velikost emotikony tak, aby se vešla do levého horního rohu. Až změníte velikost prvků, změňte také velikost mřížek, aby se s nimi dalo snáze pracovat.

04 Transformace pro změnu velikosti

Vyberte mřížku face (obličej) a pomocí kopírování a vložení vytvořte další emotikonu. Změňte název nové emotikony z face_copy (obličej_kopie) na faceScale (obličej pro změnu velikosti) a umístěte ji vpravo od původní emotikony. Na panelu Properties (Vlastnosti) vyhledejte sekci Transform (Transformace) a klikněte na kartu Scale (Změna velikosti). Změňte vlastnost X na hodnotu 2 a Y na hodnotu 0,8.

05 Transformace otočení

Zkopírujte a vložte další mřížku face (obličej) , nazvěte ji faceRotate (obličej pro otočení) a umístěte ji pod původní mřížku. Přesuňte myš na úchyt rohu rámečku výběru a pomalu posunujte myš směrem ven z rohu, dokud se ikona nezmění na dvouhlavou zakřivenou šipku. Kliknutím a přetažením dosáhněte otočení emotikony. Je to totéž, jako změna vlastnosti Angle (Úhel) na kartě Rotate (Otočení) v sekci Transform (Transformace).

06 Změňte střed

Když jste prováděli předchozí otočení, možná jste si všimli, že výchozí souřadnice středu jsou 0,5, 0,5, neboli horizontální a vertikální střed prvku. Na mřížce faceRotate (obličej pro otočení) vyberte dráhu představující ústa a přetáhněte malý bílý čtvereček nacházející se ve středu do pravého horního rohu úst. Nyní ústa otočte a všimněte si, že se otáčejí podle nové polohy kruhu. Střed je možné také upravit na kartě Center Point (Střed) v sekci Transform (Transformace).

07 Transformace zkosení

Zkopírujte a vložte další obličej, nazvěte jej faceSkew (obličej pro zkosení) a umístěte jej vpravo od prvku faceRotate (obličej pro otočení). Přesuňte myš na úchyt ve středu horní hrany rámečku výběru a pomalu ji posunujte pryč, dokud se ikona nezmění na lomítko lemované šipkami. Kliknutím a přetažením proveďte zkosení emotikony. Je to totéž, jako změna vlastností X a Y na kartě Skew (Zkosení) v sekci Transform (Transformace).

08 Transformace projekce roviny

Zkopírujte a vložte další mřížku face (obličej) , nazvěte ji faceProjection (obličej pro projekce) a umístěte ji vpravo od mřížky faceSkew (obličej pro zkosení) . Vyhledejte karty Projection (Projekce) v sekci Transform (Transformace). Transformace PlaneProjection (Projekce roviny) umožňuje upravit vlastnosti projekce X, Y a Z prvku. Nejedná se o skutečné 3D, ale o 2.5D, které někdy bývá označováno jako „Postcards in Space“ („Pohlednice v prostoru“). Můžete přímo nastavit vlastnosti X, Y a Z, nebo můžete použít projekční kouli, která se nachází na kartě Rotation (Otočení). Zkopírujte a upravte pár emotikon, abyste získali cit pro to, jak transformace fungují.

Pokud se chcete naučit něco víc transformacích v programu Expression Blend, můžete si přečíst článek Přesuny a transformace objektů na komunitním webu pro produkty řady Expression.