"Microsoft Composition est une librairie permettant de créer des effets graphiques de haut niveau pour les applications UWP. C'est le chaînon manquant entre les développeurs et les designers d'interfaces. Voyons comment ajouter le fameux et recherché effet Wahou, en faisant travailler de concert un designer et un développeur."

1. Bienvenue !

4. Bonjour !
Samuel Blanchard
Responsable
Développement & Innovation
NavisoDev
@samoteph
Benjamin Launay
Designer UI/UX
NavisoDev
@AieAieEye

6. Sous Vista (Aéro)
• bord des fenêtres transparents et flou
• Desktop Windows Manager (DWM)
• Une fenêtre = buffer vidéo (GPU)
Sous Windows 8
• DirectComposition = Api de DWM
• Un élément = buffer vidéo (GPU)
Sous Windows 10
• Composition pour UWP (Accès aux elements)

7. • Des Transformations (=RenderTransform)
• Des animations (=Storyboard++)
• Des scrollings
• Des effets (blur,…)
• Des lumières

8. Passer de XAML à Composition :
Visual elementVisual =
ElementCompositionPreview.GetElementVisual(elementXAML);

9. Visual : Element de base de Composition
ContainerVisual : un Visual avec des enfants (une sorte de Canvas)
SpriteVisual : Un ContainerVisual avec un Brush (couleur image)

10. Compositor : Usine à d’objet Composition (Visual, Animation,
Brush, Light,…)
Offset : déplace le Visual
Scale : Zoom
RotationAngleInDegrees: rotation 2D ou 3D
RotationAxis : axe de rotation en 3D
Size : Taille du Visual

14. Effet de surprise + admiration = WAOUH
L’effet Waouh est généralement obtenu par une caractéristique forte et innovante du produit.
||
INNOVATION
||
FINITION DESIGN

15. • Séduction de l’utilisateur
• Marquer l’esprit
• Recommandation
• Viralité

18. Alien, Ridley Scott, 1979 Flash Gordon, Mike Hodges, 1980

20. A oublier :
Le montage
Les situations
Les dialogues
…
A retenir :
L’ambiance graphique
• Les lumières
• L’étalonnage
• Les effets (filtres)
La bande originale
Les accessoires
…

21. LES PER SON N A GES
C r é d i t s B a n n o n R u d i s - @ b a n n o n r u d i s

22. Storyboard ? Naaaan
CompositionAnimation ! OUI !
• Rapide et fluide
• Non lié à un thread (pas sur le thread UI)
• S’applique à une propriété ou un enfant d’une propriété (« Scale » ou
« Offset.X »)
• StartAnimation pour lancer, StopAnimation pour stopper
• Possibilité de faire des groupes d’animation: Compositor.CreateAnimationGroup()
• 2 types disponibles : par durée et par Expression

23. • Semblable au Storyboard
• Storyboard  Composition dans les futures versions
• Completed ? Compositor.CreateScopedBatch

24. var animation =
rootVisual.Compositor.CreateScalarKeyFrameAnimation();
animation.InsertKeyFrame(0f, 0f);
animation.InsertKeyFrame(1f, 90f);
animation.Duration = TimeSpan.FromMilliseconds(500);
rootVisual.StartAnimation("Offset.X", animation);

25. • CreateScalarKeyFrameAnimation : float
• CreateColorKeyFrameAnimation : Color
• CreateVector2KeyFrameAnimation : Vector2
• CreateVector3KeyFrameAnimation : Vector3
• CreateVector4KeyFrameAnimation : Vector4
• CreateQuaternionKeyFrameAnimation : Quaternion

26. • Pas de durée
• Correspond à une fonction

27. var animation = compositor.CreateExpressionAnimation();
animation.SetReferenceParameter("hostVisual", hostVisual);
animation.Expression = "hostVisual.Size / 2";
glassVisual.StartAnimation(« Size", animation);

28. On peut injecter des :
• Réference à des CompositionObjets : SetReferenceParameter
• Constantes :
• Float: SetScalarParameter
• Color : SetColorParameter
• Bool : SetBooleanParameter
• Vectors : SetVectorNParameter ou N=2,3,4
• Propriétés notifiables

29. • Paramètres externes
• Condition (if) => condition ? resultatTrue : resultatFalse
• Fonction mathématique : % Abs Ceil
• Exemple d’expression (TileControl)
((scroller.Translation.X + tileOffsetX) * speed) < 0 ? -
(Abs(((scroller.Translation.X + tileOffsetX) * speed) -
Ceil(((scroller.Translation.X + tileOffsetX) * speed) / imageWidth) *
imageWidth) % imageWidth) : -(imageWidth - (((scroller.Translation.X +
tileOffsetX) * speed) % imageWidth))

30. LES D EC OR S

32. FlipView
TileControl
TileControl
TileControl
TileControl

33. • Var scroller =
ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollviewer);
• Dans l’expression :
• Expression.SetReferenceParameter(« scroller », scroller);
• expression.Expression = « scroller.Translation.X * 1.5»

34. • Var container = rootVisual.Compositor.CreateContainerVisual();
• ElementCompositionPreview.SetElementChildVisual(rootElement,
container);
• Chargement d’une image : nuget
Robmikh.Util.CompositionImageLoader
• Creation de SpriteVisuals puis dans le container

35. Contrôle : 100px
ContainerVisual
(2 + 1) x SpriteVisual
(50px par image)

36. The Fog, John Carpenter, 1980 ET, Steven Spielberg, 1982

37. • Win2D (nuget Win2D.uwp) pour dessiner
• Tous les effets Win2D ne sont pas disponibles
https://msdn.microsoft.com/fr-
fr/windows/uwp/graphics/composition-
effects?f=255&MSPPError=-2147217396
• Couplé à Composition pour l’appliquer
• Affichage en temps réels des effets

39. Icônes Tags
Cover
Avatar
Description

41. var glassEffect = new GaussianBlurEffect
{
BlurAmount = 15.0f,
BorderMode = EffectBorderMode.Hard,
Source = new ArithmeticCompositeEffect
{
MultiplyAmount = 0,
Source1Amount = 0.5f,
Source2Amount = 0.5f,
Source1 = new CompositionEffectSourceParameter("backdropBrush"),
Source2 = new ColorSourceEffect
{
Color = Color.FromArgb(0xFF, 0x30, 0x30, 0x30)
}
}
};

42. var effectFactory = compositor.CreateEffectFactory(glassEffect);
var effectBrush = effectFactory.CreateBrush();
var backdropBrush = compositor.CreateBackdropBrush(); // C’est le fond
effectBrush.SetSourceParameter("backdropBrush", backdropBrush);
var glassVisual = compositor.CreateSpriteVisual();
glassVisual.Brush = effectBrush;
ElementCompositionPreview.SetElementChildVisual(glassHost,
glassVisual);

44. • Ajoute une lumière ou un spot à une image, un TextBlock…
• Animable !
Compositor.CreateSpotLight
Compositor.CreateAmbientLight

45. • ImplicitCollection : Animation automatique liée à une propriété
• AlphaMask et Shadow : Ombrage en perfect pixel !
• Clipping : Clipping animable !
• Bonus : Gif animé supporté dans Anniversary !

46. N° 46

47. @microsoftfrance @Technet_France @msdev_fr
N° 47

48. Notez cette session
Et tentez de gagner un Surface Book
Doublez votre chance en répondant aussi au
questionnaire de satisfaction globale
* Le règlement est disponible sur demande au commissariat général de l’exposition. Image non-contractuelle