microsoft composition, pierre angulaire de vos applications ?
TRANSCRIPT
![Page 1: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/1.jpg)
Bienvenue !
![Page 2: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/2.jpg)
LES TEMPS SONT SOMBRES
![Page 3: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/3.jpg)
EFFET WAOUHDESIGN + COMPOSITION
![Page 4: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/4.jpg)
Bonjour !
Samuel BlanchardResponsable
Développement & InnovationNavisoDev
@samoteph
Benjamin LaunayDesigner UI/UXNavisoDev
@AieAieEye
![Page 5: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/5.jpg)
COMPOSITION : LES BASES
![Page 6: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/6.jpg)
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)
COMPOSITION C’EST QUOI ?
![Page 7: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/7.jpg)
• Des Transformations (=RenderTransform)• Des animations (=Storyboard++)• Des scrollings• Des effets (blur,…)• Des lumières
POUR QUOI FAIRE ?
![Page 8: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/8.jpg)
Passer de XAML à Composition :
Visual elementVisual = ElementCompositionPreview.GetElementVisual(elementXAML);
COMPOSITION & XAML
![Page 9: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/9.jpg)
Visual : Element de base de CompositionContainerVisual : un Visual avec des enfants (une sorte de Canvas)SpriteVisual : Un ContainerVisual avec un Brush (couleur image)
LES OBJETS DE COMPOSITION
![Page 10: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/10.jpg)
Compositor : Usine à d’objet Composition (Visual, Animation, Brush, Light,…)
Offset : déplace le VisualScale : ZoomRotationAngleInDegrees: rotation 2D ou 3DRotationAxis : axe de rotation en 3DSize : Taille du Visual
QUELQUES PROPRIÉTÉS DE VISUAL
![Page 11: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/11.jpg)
DÉMO : 1ER PAS
![Page 12: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/12.jpg)
![Page 13: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/13.jpg)
LA DEMO WAOUUUUH
![Page 14: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/14.jpg)
Effet de surprise + admiration = WAOUH
LE WAOUH C’EST QUOI ?
L’effet Waouh est généralement obtenu par une caractéristique forte et innovante du produit.
||INNOVATION
||FINITION DESIGN
![Page 15: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/15.jpg)
• Séduction de l’utilisateur• Marquer l’esprit• Recommandation• Viralité
POURQUOI FAIRE DU WAOUH ?
![Page 16: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/16.jpg)
LA NOSTALGIE
![Page 17: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/17.jpg)
LA TYPO
![Page 18: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/18.jpg)
LA TYPO
Alien, Ridley Scott, 1979 Flash Gordon, Mike Hodges, 1980
![Page 19: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/19.jpg)
![Page 20: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/20.jpg)
DE LA VIDEO A L’APP
A oublier :
Le montageLes situationsLes dialogues…
A retenir :
L’ambiance graphique• Les lumières• L’étalonnage• Les effets (filtres)
La bande originaleLes accessoires
…
![Page 21: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/21.jpg)
DE LA VIDEO A L’APPLES PERSONNAGES
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
![Page 22: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/22.jpg)
Storyboard ? NaaaanCompositionAnimation ! 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
LES ANIMATIONS
![Page 23: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/23.jpg)
• Semblable au Storyboard• Storyboard Composition dans les futures versions• Completed ? Compositor.CreateScopedBatch
ANIMATIONS PAR DURÉE
![Page 24: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/24.jpg)
var animation = rootVisual.Compositor.CreateScalarKeyFrameAnimation(); animation.InsertKeyFrame(0f, 0f); animation.InsertKeyFrame(1f, 90f);animation.Duration = TimeSpan.FromMilliseconds(500); rootVisual.StartAnimation("Offset.X", animation);
EXEMPLE D’ANIMATION : DÉPLACEMENT
![Page 25: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/25.jpg)
• CreateScalarKeyFrameAnimation : float• CreateColorKeyFrameAnimation : Color• CreateVector2KeyFrameAnimation : Vector2• CreateVector3KeyFrameAnimation : Vector3• CreateVector4KeyFrameAnimation : Vector4• CreateQuaternionKeyFrameAnimation : Quaternion
PROPRIÉTÉS ANIMABLES
![Page 26: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/26.jpg)
• Pas de durée• Correspond à une fonction
ANIMATIONS PAR EXPRESSIONS
![Page 27: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/27.jpg)
var animation = compositor.CreateExpressionAnimation();
animation.SetReferenceParameter("hostVisual", hostVisual);
animation.Expression = "hostVisual.Size / 2";glassVisual.StartAnimation(« Size", animation);
EXEMPLE D’ANIMATION : EXPRESSIONS
![Page 28: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/28.jpg)
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
EXPRESSIONS : PARAMÈTRES
![Page 29: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/29.jpg)
• 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))
CONSTRUIRE UNE EXPRESSION
![Page 30: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/30.jpg)
DE LA VIDEO A L’APPLES DECORS
![Page 31: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/31.jpg)
CONSTRUCTION DE L’INTERFACE
![Page 32: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/32.jpg)
ET EN XAML ?
FlipView
TileControl
TileControl
TileControl
TileControl
![Page 33: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/33.jpg)
• Var scroller = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollviewer);
• Dans l’expression :• Expression.SetReferenceParameter(« scroller », scroller);• expression.Expression = « scroller.Translation.X * 1.5»
PARALLAX AVECSCROLLVIEWER
![Page 34: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/34.jpg)
• Var container = rootVisual.Compositor.CreateContainerVisual();• ElementCompositionPreview.SetElementChildVisual(rootElement,
container);• Chargement d’une image : nuget
Robmikh.Util.CompositionImageLoader
• Creation de SpriteVisuals puis dans le container
CONSTRUIRE UN CONTRÔLE : TILECONTROL
![Page 35: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/35.jpg)
TILE CONTROL
Contrôle : 100px
ContainerVisual(2 + 1) x SpriteVisual
(50px par image)
![Page 36: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/36.jpg)
LES EFFETS
The Fog, John Carpenter, 1980
ET, Steven Spielberg, 1982
![Page 37: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/37.jpg)
• Win2D (nuget Win2D.uwp) pour dessiner• Tous les effets Win2D ne sont pas disponibleshttps://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
EFFECT
![Page 38: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/38.jpg)
LE FROSTED GLASS
![Page 39: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/39.jpg)
LES CARDS
Icônes Tags
Cover
Avatar
Description
![Page 40: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/40.jpg)
LES CARDS
![Page 41: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/41.jpg)
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)
}
}
};
EXEMPLE :CRÉER UN EFFET FROSTED GLASS
![Page 42: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/42.jpg)
var effectFactory = compositor.CreateEffectFactory(glassEffect);var effectBrush = effectFactory.CreateBrush();
var backdropBrush = compositor.CreateBackdropBrush(); // C’est le fondeffectBrush.SetSourceParameter("backdropBrush", backdropBrush);
var glassVisual = compositor.CreateSpriteVisual();glassVisual.Brush = effectBrush;ElementCompositionPreview.SetElementChildVisual(glassHost, glassVisual);
EXEMPLE : APPLIQUER L’EFFET
![Page 43: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/43.jpg)
L’UPSIDE DOWN
![Page 44: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/44.jpg)
• Ajoute une lumière ou un spot à une image, un TextBlock…• Animable !
Compositor.CreateSpotLightCompositor.CreateAmbientLight
LIGHT
![Page 45: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/45.jpg)
• ImplicitCollection : Animation automatique liée à une propriété• AlphaMask et Shadow : Ombrage en perfect pixel !• Clipping : Clipping animable !
• Bonus : Gif animé supporté dans Anniversary !
AUTRES
![Page 46: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/46.jpg)
N° 46
![Page 47: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/47.jpg)
@microsoftfrance @Technet_France @msdev_fr
N° 47
![Page 48: Microsoft Composition, pierre angulaire de vos applications ?](https://reader036.vdocuments.mx/reader036/viewer/2022070516/58715e951a28ab8e5b8b705f/html5/thumbnails/48.jpg)
Notez cette sessionEt 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