Windows.UI.Composition

Az előadások a következő témára: "Windows.UI.Composition"— Előadás másolata:

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

2 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.

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

4 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

5 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

6 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

7 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

8 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.

9 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

10 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

11 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

12 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

13 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

14 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);

15 Demo: Keyframe animációk és effektek

16 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

17 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 

18 Demo: Parallax scrolling demo

19 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 

20 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!

21 Á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…

22 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.. 

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

24 Q&A Kérdések? 

25 Köszönöm a figyelmet!