Windows.UI.Composition ENTERPRISE DEVELOPER MEETUP, 2016.02.24. DEME TAMÁS Windows.UI.Composition Rövid intro… az új vizuális réteg a Xaml és a DirectX között

Gyönyörű alkalmazások Mozgás Dinamika, effektek A tömegből kiemelő design Hozz el új, korábban lehetetlen UI megoldásokat UWP appjaidba a Composition API segítségével! Az API célja a következő generációs felhasználói élmények lehetővé tétele: az előadás során megmutatom, hogy hogyan lehet kihasználni az új visualokat, effekteket és animációkat a skálázható, gördülékeny és gyönyörű eredményekért.

A ma bemutatásra kerülő API célja a videóban látott jövő alapjainak lerakása. A csapat szavaival élve

A Composition réteg bemutatása A megismert újdonságok használata Demók (shiny!) Ma az alábbi 3 dolgot szeretném nektek megmutatni

Miért van rá szükség? Sok mélyen gyökerező probléma megoldására hivatott A XAML jó, és tudsz vele cool dolgokat csinálni De mégsem tűnik annyira fluidnak az eredmény… Illetve nyilván sok dolgot _nem_ tudsz vele megcsinálni

Windows.UI.Composition a “next-gen UI framework” Egy új megjelenítési réteg Az alap minden jövőbeli Windows platform számára Dinamikus, interakív tartalomra optimalizálva DX és XAML interop Használható C#, C++, C++/CX alól Megjegyezni: Tudunk appot írni akár csak composition használatával, nem kell Xaml egyáltalán

Megjelenítési réteg? dwm.exe A videókártyád A monitorod System Compositor Composition API dwm.exe XAML Keret-rendszerek Windows shell Grafikus hardver A videókártyád Előbb azt mondtam, hogy ez egy új megjelenítési réteg… ez mit jelent pontosan? Microsoft Edge / IE Win32 appok Képernyő A monitorod

Mi nem? Nem raszterizáló “Képet eszik”, D2D, D3D és Dwrite tartalmakat Nem egy magas-szintű keretrendszer, tehát nincs: App Modell Komplex layout Controlok Scriptelés Adatkötés Stílusok Most, hogy tudjuk, hogy mi ez – fontos tudni azt is, hogy ez mi nem.

Beillesztés a meglévő technológiák közé Könnyű Universal Windows Application Windows.UI.Xaml Visualok, animációk, effektek… Controlok, layout, adatkötés… Raszterizáció, renderelés… Keretrendszer Windows.UI.Composition Megjelenítési réteg Nézzük meg, h hogy illeszkedik be a meglévő technológiák közé DirectX megoldások Grafikus réteg Lehetséges

Ez van a csomagban Content Visual-ok Effekt rendszer Pehelykönnyű rendering objektumok családja Effekt rendszer Valós időben animálható, láncolható effektek Animációs rendszer Keretrendszer független, UI száltól nem függő animációk SpriteVisual Szín kitöltés Kép kitöltés D2D/D3D tartalom Composition-DrawingImage AnchorPoint Hátlap láthatóság Alap XAML interop Szín effektek Kontraszt Szürkeárnyalat Gamma eltolás Színárnyalat eltolás … Keyframe-es animációk Expression animációk Operátorok! Szín animációk Quaterniók 3 fő része van a composition api-nak

Visual objektum Windows Composition Visual Tree Composition Visual Target CompositionObject Tulajdonságai Statikusan megadva Animációhoz kötve Alap pozicionálás Eltolás a szülőhöz vagy az ablakhoz képest Kivágás (Clipping) Transzformációk 2D és 3D egyaránt Fa felépítés Raszterizált tartalmak megjelenítése Visual Visual Visual Visual ContainerVisual Tulajdonságok felsorolása. … CompositionObject -> compositorra referencia, Visual adja az alapokat, Containernek lehet gyereke, Sprite-nak brush-ja… Brush Brush SpriteVisual Windows Composition Visual Tree Composition Visual hierarchia

Effektek Gazdag UI: Blending és Composite módok Animálhatóság: Szinte minden effekt tulajdonság animálható (pl. színtelítettség mértéke) Flexibilitás: Testreszabás, és sorba kötés Konzisztencia: Ugyanazt az effekt leírást használjuk képekhez, grafikákhoz és akár videókhoz Teljesítmény: Válogatott effektek a nagyon reszponzív (60FPS+) eredményekhez, sok objektumon Win2D megemlítése, descriptionök onnan

Keyframe animációk Idő alapú animáció “kulcskockák” alapján Easing funkciók: Lineáris vagy Bézier görbék alapján Változatos típusú tulajdonságok támogatása: Skalár Vector2/3/4 Quaterniók Több száz szimultán animációra optimalizálva Újrahasználhatóság fontos…, van completed event is

Példakód: // a _compositor és az _easing már adott var rectangle = ElementCompositionPreview.GetElementVisual(TopLeft); // nem lehet alább rectangle.Size.X / 2.0f, mert a Size XAML elemeknél 0,0 rectangle.CenterPoint = new Vector3(150.0f / 2.0f, 150.0f / 2.0f, 0.0f); var scaleAnimation = _compositor.CreateVector3KeyFrameAnimation(); scaleAnimation.Duration = TimeSpan.FromSeconds(3.0); scaleAnimation.IterationBehavior = AnimationIterationBehavior.Forever; scaleAnimation.InsertKeyFrame(0.0f, Vector3.One); scaleAnimation.InsertKeyFrame(0.5f, new Vector3(2.0f, 2.0f, 1.0f), _easing); scaleAnimation.InsertKeyFrame(1.0f, Vector3.One); rectangle.StartAnimation(nameof(rectangle.Scale), scaleAnimation);

Demo: Keyframe animációk és effektek

Expression animációk “Expression” = “Kifejezés”, azaz… Az animáció egy tulajdonság értékét egy matematikai funkció eredménye alapján határozza meg minden képkockára Nagyon könnyen készíthetünk: ragadós fejléceket, parallax animációkat, görgetés indikátorokat… Könnyen újrahasznosíthatóak Szintén több száz szimultán animációra optimalizálva Szintén újrahasználhatóság

Példakód var image = ElementCompositionPreview.GetElementVisual(Image); var compositor = image.Compositor; var sps = ElementCompositionPreview .GetScrollViewerManipulationPropertySet(ScrollViewer); var ea1 = compositor .CreateExpressionAnimation("sp.Translation.Y * parallaxModifier"); ea1.SetReferenceParameter("sp", sps); ea1.SetScalarParameter("parallaxModifier", 0.5f); image.StartAnimation("Offset.Y", ea1); Magic string 

Demo: Parallax scrolling demo

Némi mágia A Compositor mindig mindenről tudja, hogy hol van, ezért: Az animációk bármikor megállíthatóak, folytathatóak vagy akár futás közben kicserélhetőek Mindezt akadások nélkül Animációcsere esetén folyamatos átmenet a két állapot között Az animációk a Compositor szálban futnak: akár breakpointot is tehetünk a UI szál kódjába 

XAML és Composition Átjárás a két világ között: a Visual-ok segítségével <Grid> <WebView /> <Button /> </Grid> <ListView /> <SwapChainPanel /> < … /> < … /> Visual 8.1 hibák megemlítése: webview, swapchainpanel overlay lehetetlen volt - mostmár nem!

Átjárás Még kicsit gyerekcipőben ElementCompositionPreview.GetElementVisual() ElementCompositionPreview.GetElementChildVisual() ElementCompositionPreview.SetElementVisual() E… .GetScrollViewerManipulationPropertySet() A XAML elemek helyzete szinkronban marad a Composition-beli Visual párjuk helyzetével: működnek az interakciós események  A második pont annyira azért mégsem igaz…

A jövő Explicit animációk > implicit animációk? Kevesebb boilerplate Expression animációk “magic string”-ek nélkül Könnyebb XAML átjárás Több effekt (pl. Gaussian blur / blur behind ) A Compositor már most is OS szinten 1, szóval mi lenne ha a mindez nem csak appon belül működne?  Kiemelten lehet segíteni, én is írok libet, írjatok ti is.. 

További információk MSDN… nyilván  github.com/Microsoft/composition twitter.com/wincomposition WinComp@microsoft.com A csapat nagyon aktív GitHubon és Twitteren is, szóval írjatok bátran 

Q&A Kérdések? 

Köszönöm a figyelmet!