Télécharger pour lire hors ligne
Téléchargé parMicrosoft
Microsoft Composition, pierre angulaire de vos applications ?
Le document présente des techniques avancées de composition et d'animation sous Windows, détaillant des concepts comme les transformations, les animations, et les effets visuels. Il aborde également les interactions avec l'interface utilisateur et des fonctionnalités comme le flou, les lumières et la création d'animations fluides. En outre, il souligne les éléments innovants qui peuvent captiver les utilisateurs et améliorer l'expérience visuelle.
Contenu connexe
![[XamarinDay] Développez en XAML avec Xamarin Forms](https://cdn.slidesharecdn.com/ss_thumbnails/xamarinforms-160916160001-thumbnail.jpg?width=640&height=640&fit=bounds)
Similaire à Microsoft Composition, pierre angulaire de vos applications ?
![[Motion & animation dans un design system] FoF Cotonou event.pptx](https://cdn.slidesharecdn.com/ss_thumbnails/motionanimationdansundesignsystemfofcotonouevent-221202145758-91c34d24-thumbnail.jpg?width=640&height=640&fit=bounds)
Microsoft Composition, pierre angulaire de vos applications ?
- 1.
- 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 : Elementde 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 del’utilisateur • Marquer l’esprit • Recommandation • Viralité
- 18. Alien, Ridley Scott,1979 Flash Gordon, Mike Hodges, 1980
- 20. A oublier : Lemontage 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 SONN 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 auStoryboard • 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 deduré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 injecterdes : • 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 ECOR S
- 32.
- 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, JohnCarpenter, 1980 ET, Steven Spielberg, 1982
- 37. • Win2D (nugetWin2D.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.
- 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 unelumiè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.
- 47.
- 48. Notez cette session Ettentez 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
Notes de l'éditeur
- #3 SAM Bonjour à a tous et merci de votre présence pendant ces temps un peu sombre que vivent pour les dev UWP Heureusement la lumiere viendra toujours de la jonction de l’art et de la technique et c’est en soit la sujet de notre session
- #4 SAM
- #5 BEN & SAM
- #6 SAM
- #7 SAM DWM renvoie les HWND vers les buffers de GPU. on peut appliquer des effets sur ceux-ci mais pas écrire dedans directement (comme Direct2D)
- #8 SAM DWM renvoie les HWND vers les buffers de GPU. on peut appliquer des effets sur ceux-ci mais pas écrire dedans directement (comme Direct2D)
- #9 SAM
- #10 SAM
- #11 SAM
- #12 SAM
- #13 BEN On parle de la série
- #15 BEN Dans le contexte d’une app on a plusieurs types d’effet Waouh : Le Waouh UI (beauté suprême de l’interface : traitement graphique inédit, composition forte) Le Waouh Animé (transition et animation de dingo) Le Waouh Ergonomique (surprendre l’utilisateur avec une gesture inhabituelle) Petit warning : Chacun de ces types de Waouh peux nuire à L’UX de l’app s’il est mal utilisé. (surtout en ergo)
- #16 BEN
- #17 BEN
- #18 BEN Créateur Ed Benguiat. Typographe et Graphiste créateur des logos de Reader Digest, Ford ou encore Playboy.
- #19 BEN Richard Greenberg designer spécialiste des titres de films et de Livres. Connu pour DeadZone, Superman, Alien. www.artofthetitles.com
- #20 BEN Session sur Composition et comment s’en servir pour faire des effets Waou. Mais un effet waou l’est réellement s’il arrive à faire naitre d’une part de la surprise mais aussi et surtout des émotions. Amener un utilisateur à ressentir des émotions en utilisant une app n’est pas chose facile (une app est souvent avant tout fonctionnelle). Donc nous avons essayé de créer un univers dans notre démo et plutôt que de le créer à partir de zéro nous avons emprunté et transcrit en mode « appli » l’univers très riche de la série Stranger Things. Pourquoi cette série spécifiquement? parcequ’elle exploite à merveille le filon de la nostalgie d’une époque, les années 80. Bourrée de référence à la culture des années 80, début 90, Stranger Things nous replonge dans l’univers de notre jeunesse en utilisant notamment les codes graphiques de ces années bénies.
- #21 BEN Comment réussir la conversion d’un univers cinématographique en une application? Quels éléments peut-on réutiliser? Ce dont qu’il vaut mieux laisser de côté? Retranscrire ces éléments dans un mode vidéo ludique. (utilisation du 8bits, des référence rétro gaming > effets composition).
- #22 BEN choix d’un passage en illustration 8 bit > rétro gaming (réf 80’s) Permet tt de même de garder certaines caractéristiques des perso Certain accessoires récurrents du film.
- #23 SAM
- #24 SAM Pour Compositor.CreateScopedBatch voir l’exemple CompositionHelper.cs ligne 40
- #25 SAM Create CreateVector3KeyFrameAnimation pour deplacer « Offset » et non « Offset.X » Exemple de rotation de la page (MainPage.cs ligne 127) la respiration des personnage ou du Press Start
- #26 SAM
- #27 SAM
- #28 SAM
- #29 SAM Exemple des tuiles
- #30 SAM
- #31 BEN Les décors sont également traités en pixel. Permet de conserver l’ambiance via un jeu de couleur (bleuté pour l’ambiance glauque et mystérieuses) Techniquement rien ne vous empêche d’aller mettre un coup de pipette couleur sur la photo originale du décor pour retrouver les couleurs et l’ambiance sur votre créa.
- #32 BEN Placer le background, une série d’arbres assez sombres. Je place une deuxième série d’arbre, un dessin différent pour éviter le côté trop systématique de la répétition. On note que les arbres du fond sont plus sombres pour créer la sensation de profondeur. Une première série de buisson La route qui est en fait une section répétée à l’infini pour créer le scroll (cf Sam). Une 2eme série de buisson d’un différent type (plus clair car plus proche) Enfin on place nos personnages, à noter qu’on peut varier le positionnement sur la hauteur ainsi que le scale pour donner un effet de profondeur.
- #33 BEN Placer le background, une série d’arbres assez sombres. Je place une deuxième série d’arbre, un dessin différent pour éviter le côté trop systématique de la répétition. On note que les arbres du fond sont plus sombres pour créer la sensation de profondeur. Une première série de buisson La route qui est en fait une section répétée à l’infini pour créer le scroll (cf Sam). Une 2eme série de buisson d’un différent type (plus clair car plus proche) Enfin on place nos personnages, à noter qu’on peut varier le positionnement sur la hauteur ainsi que le scale pour donner un effet de profondeur.
- #34 SAM Exemple des tuiles : TileControl.cs Line 319
- #35 SAM TileControl.cs line 219
- #36 SAM
- #37 BEN L’autre chose qui va nous apporter de l’émotion c’est les éléments fantastiques qui possèdent leurs propres codes visuels : • Les éléments naturels qui apportent du mystère – La neige (le brouillard – The Fog de Carpenter) • Le clair obscur - Démo Lumière (utilisation des lampes torches) > Samos Utilisation d’une lumière dans Composition
- #38 SAM
- #39 BEN Grâce au frosted Glass on reproduit l’effet cinématographique de la mise au point. L’effet de blur permet à l’œil d’oublier l’image en dessous pour se concentrer sur l’image au premier plan Tout en restant immergé dans l’univers créé par l’ image de fond (couleur, forme). On retrouve l’effet de profondeur de champ qui est largement utilisé dans le cinéma. Permet de se concentrer sur la Card, Comment est elle construite?
- #40 BEN On a donc intégré des cards pour identifier les différents personnages. Cards = terme Material Design pour identifier des zones de contenus placées dans des conteneurs. Structure des cards sur le modèle des services Google : Un conteneur da taille variable (en fonction du contenu) avec des borders arrondis. Une cover censé représenter l’univers du sujet Un avatar Un texte de description Des tags pour définir le profil du sujet (sous forme de texte ou d’icônes)
- #41 BEN S’arrêter 2min sur le changement de style (Photo + icônes flat) Ce changement de traitement graphique est possible grâce au frosted glass sans que ce soit ressenti comme un manque de cohérence graphique. Le blur sur l’interface principale permet de créer une distance qui permet de changer de style graphique sans que cela choque. Cet effet présente donc bcp d’avantages, Sam vous montre comment faire.
- #42 SAM MainPage.cs line 253
- #43 SAM
- #44 BEN On se concentre sur les effets du monde à l’envers. On créer du sens avec les animations Toujours faire preuve de bon sens et rester logique. Description de l’anim avec passage de page. L’upside down = notre monde en plus dark Maquette = application de courbe + lumière/contraste sur le décors de base. Restranscription de cet effet par Samos? La neige/cendres – référence à the fog ou ET. Assets pixel, effet scaling + animation Samos?
- #45 SAM SplashScreen.xaml.cs line 129
- #46 SAM