SlideShare une entreprise Scribd logo
Bienvenue !
Bonjour !
Samuel Blanchard
Responsable
Développement & Innovation
NavisoDev
@samoteph
Benjamin Launay
Designer UI/UX
NavisoDev
@AieAieEye
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)
• Des Transformations (=RenderTransform)
• Des animations (=Storyboard++)
• Des scrollings
• Des effets (blur,…)
• Des lumières
Passer de XAML à Composition :
Visual elementVisual =
ElementCompositionPreview.GetElementVisual(elementXAML);
Visual : Element de base de Composition
ContainerVisual : un Visual avec des enfants (une sorte de Canvas)
SpriteVisual : Un ContainerVisual avec un Brush (couleur image)
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
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
• Séduction de l’utilisateur
• Marquer l’esprit
• Recommandation
• Viralité
Alien, Ridley Scott, 1979 Flash Gordon, Mike Hodges, 1980
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
…
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
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
• Semblable au Storyboard
• Storyboard  Composition dans les futures versions
• Completed ? Compositor.CreateScopedBatch
var animation =
rootVisual.Compositor.CreateScalarKeyFrameAnimation();
animation.InsertKeyFrame(0f, 0f);
animation.InsertKeyFrame(1f, 90f);
animation.Duration = TimeSpan.FromMilliseconds(500);
rootVisual.StartAnimation("Offset.X", animation);
• CreateScalarKeyFrameAnimation : float
• CreateColorKeyFrameAnimation : Color
• CreateVector2KeyFrameAnimation : Vector2
• CreateVector3KeyFrameAnimation : Vector3
• CreateVector4KeyFrameAnimation : Vector4
• CreateQuaternionKeyFrameAnimation : Quaternion
• Pas de durée
• Correspond à une fonction
var animation = compositor.CreateExpressionAnimation();
animation.SetReferenceParameter("hostVisual", hostVisual);
animation.Expression = "hostVisual.Size / 2";
glassVisual.StartAnimation(« Size", animation);
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
• 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))
LES D EC OR S
FlipView
TileControl
TileControl
TileControl
TileControl
• Var scroller =
ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollviewer);
• Dans l’expression :
• Expression.SetReferenceParameter(« scroller », scroller);
• expression.Expression = « scroller.Translation.X * 1.5»
• Var container = rootVisual.Compositor.CreateContainerVisual();
• ElementCompositionPreview.SetElementChildVisual(rootElement,
container);
• Chargement d’une image : nuget
Robmikh.Util.CompositionImageLoader
• Creation de SpriteVisuals puis dans le container
Contrôle : 100px
ContainerVisual
(2 + 1) x SpriteVisual
(50px par image)
The Fog, John Carpenter, 1980 ET, Steven Spielberg, 1982
• 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
Icônes Tags
Cover
Avatar
Description
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)
}
}
};
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);
• Ajoute une lumière ou un spot à une image, un TextBlock…
• Animable !
Compositor.CreateSpotLight
Compositor.CreateAmbientLight
• ImplicitCollection : Animation automatique liée à une propriété
• AlphaMask et Shadow : Ombrage en perfect pixel !
• Clipping : Clipping animable !
• Bonus : Gif animé supporté dans Anniversary !
N° 46
@microsoftfrance @Technet_France @msdev_fr
N° 47
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

Contenu connexe

En vedette

Matt Fagan MSM Analysis
Matt Fagan MSM AnalysisMatt Fagan MSM Analysis
Matt Fagan MSM Analysis
Matt Fagan
 
Infografia sobre politicas del estado venezolano para fomentar la ciencia y t...
Infografia sobre politicas del estado venezolano para fomentar la ciencia y t...Infografia sobre politicas del estado venezolano para fomentar la ciencia y t...
Infografia sobre politicas del estado venezolano para fomentar la ciencia y t...
AlbanyGonzalezE
 
Los carnavales
Los carnavalesLos carnavales
Los carnavales
Rocío Maricarmen
 
Celebrating canadas 150th birthday
Celebrating canadas 150th birthdayCelebrating canadas 150th birthday
Celebrating canadas 150th birthday
Arts Cubed
 
Infografia funciones mentales para la emocion albany gonzalez p1 vdlp
Infografia funciones mentales para la emocion albany gonzalez p1 vdlpInfografia funciones mentales para la emocion albany gonzalez p1 vdlp
Infografia funciones mentales para la emocion albany gonzalez p1 vdlp
AlbanyGonzalezE
 
Julie Summa Photography Performance
Julie Summa Photography   PerformanceJulie Summa Photography   Performance
Julie Summa Photography Performance
dolphindancer_2000
 
Vanessa (1)
Vanessa (1)Vanessa (1)
Vanessa (1)
Vanessa Ojeda
 
Nvf slides 4 may 16 final
Nvf slides 4 may 16 finalNvf slides 4 may 16 final
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
Microsoft
 
Obra (Torre Altus)
Obra (Torre Altus)Obra (Torre Altus)
Obra (Torre Altus)
Rosaura Machado
 
vocabulario
vocabulario vocabulario
vocabulario
andres diaz
 
GUERRA DO PARAGUAI 1864-1870
GUERRA DO PARAGUAI 1864-1870GUERRA DO PARAGUAI 1864-1870
GUERRA DO PARAGUAI 1864-1870
Isabel Aguiar
 
A EUROPA NO SÉCULO XIX
A EUROPA NO SÉCULO XIXA EUROPA NO SÉCULO XIX
A EUROPA NO SÉCULO XIX
Isabel Aguiar
 

En vedette (13)

Matt Fagan MSM Analysis
Matt Fagan MSM AnalysisMatt Fagan MSM Analysis
Matt Fagan MSM Analysis
 
Infografia sobre politicas del estado venezolano para fomentar la ciencia y t...
Infografia sobre politicas del estado venezolano para fomentar la ciencia y t...Infografia sobre politicas del estado venezolano para fomentar la ciencia y t...
Infografia sobre politicas del estado venezolano para fomentar la ciencia y t...
 
Los carnavales
Los carnavalesLos carnavales
Los carnavales
 
Celebrating canadas 150th birthday
Celebrating canadas 150th birthdayCelebrating canadas 150th birthday
Celebrating canadas 150th birthday
 
Infografia funciones mentales para la emocion albany gonzalez p1 vdlp
Infografia funciones mentales para la emocion albany gonzalez p1 vdlpInfografia funciones mentales para la emocion albany gonzalez p1 vdlp
Infografia funciones mentales para la emocion albany gonzalez p1 vdlp
 
Julie Summa Photography Performance
Julie Summa Photography   PerformanceJulie Summa Photography   Performance
Julie Summa Photography Performance
 
Vanessa (1)
Vanessa (1)Vanessa (1)
Vanessa (1)
 
Nvf slides 4 may 16 final
Nvf slides 4 may 16 finalNvf slides 4 may 16 final
Nvf slides 4 may 16 final
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
 
Obra (Torre Altus)
Obra (Torre Altus)Obra (Torre Altus)
Obra (Torre Altus)
 
vocabulario
vocabulario vocabulario
vocabulario
 
GUERRA DO PARAGUAI 1864-1870
GUERRA DO PARAGUAI 1864-1870GUERRA DO PARAGUAI 1864-1870
GUERRA DO PARAGUAI 1864-1870
 
A EUROPA NO SÉCULO XIX
A EUROPA NO SÉCULO XIXA EUROPA NO SÉCULO XIX
A EUROPA NO SÉCULO XIX
 

Similaire à Microsoft Composition, pierre angulaire de vos applications ?

Animations avec Jetpack Compose
Animations avec Jetpack ComposeAnimations avec Jetpack Compose
Animations avec Jetpack Compose
Antoine Robiez
 
Core animation pour les nul ls et les moins nuls
Core animation pour les nul ls et les moins nulsCore animation pour les nul ls et les moins nuls
Core animation pour les nul ls et les moins nulsMathieu Vaidis
 
Guide Unity 3D pdf
Guide Unity 3D pdfGuide Unity 3D pdf
Guide Unity 3D pdf
Antho Cardinale
 
Unity 3D : Guide débutant
Unity 3D : Guide débutantUnity 3D : Guide débutant
Unity 3D : Guide débutant
Antho Cardinale
 
Formation Unity 3D Réalité Virtuelle
Formation Unity 3D Réalité VirtuelleFormation Unity 3D Réalité Virtuelle
Formation Unity 3D Réalité Virtuelle
Yannick Comte
 
Godot Engine, le guide de démarrage du débutant
Godot Engine, le guide de démarrage du débutantGodot Engine, le guide de démarrage du débutant
Godot Engine, le guide de démarrage du débutant
Antho Cardinale
 
Introduction aux interfaces.
Introduction aux interfaces.Introduction aux interfaces.
Introduction aux interfaces.
Jean-Baptiste Yunès
 
SapiensM14 - Video numérique
SapiensM14 - Video numériqueSapiensM14 - Video numérique
SapiensM14 - Video numérique
Philippe Cazeneuve
 
Javascript proprement
Javascript proprementJavascript proprement
Javascript proprement
Guillaume Collic
 
Transitions et Animations – Donnez une nouvelle dimension à vos applications ...
Transitions et Animations – Donnez une nouvelle dimension à vos applications ...Transitions et Animations – Donnez une nouvelle dimension à vos applications ...
Transitions et Animations – Donnez une nouvelle dimension à vos applications ...
Microsoft
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}
Idean France
 
JavaSwing.pdf
JavaSwing.pdfJavaSwing.pdf
JavaSwing.pdf
imanebirjmel
 
Nouveautes Flash CS4, par Nicolas Gans - Regart.net formations
Nouveautes Flash CS4, par Nicolas Gans - Regart.net formationsNouveautes Flash CS4, par Nicolas Gans - Regart.net formations
Nouveautes Flash CS4, par Nicolas Gans - Regart.net formations
maru.maru
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
Le futur du Responsive Web Design
Le futur du Responsive Web DesignLe futur du Responsive Web Design
Le futur du Responsive Web Design
Microsoft
 
Initiation à Puppeteer et Rendertron en action
Initiation à Puppeteer et Rendertron en actionInitiation à Puppeteer et Rendertron en action
Initiation à Puppeteer et Rendertron en action
Audrey Schoonwater - Witamine
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
Thomas Bassetto
 

Similaire à Microsoft Composition, pierre angulaire de vos applications ? (20)

Animations avec Jetpack Compose
Animations avec Jetpack ComposeAnimations avec Jetpack Compose
Animations avec Jetpack Compose
 
Core animation pour les nul ls et les moins nuls
Core animation pour les nul ls et les moins nulsCore animation pour les nul ls et les moins nuls
Core animation pour les nul ls et les moins nuls
 
Guide Unity 3D pdf
Guide Unity 3D pdfGuide Unity 3D pdf
Guide Unity 3D pdf
 
Unity 3D : Guide débutant
Unity 3D : Guide débutantUnity 3D : Guide débutant
Unity 3D : Guide débutant
 
Formation Unity 3D Réalité Virtuelle
Formation Unity 3D Réalité VirtuelleFormation Unity 3D Réalité Virtuelle
Formation Unity 3D Réalité Virtuelle
 
Godot Engine, le guide de démarrage du débutant
Godot Engine, le guide de démarrage du débutantGodot Engine, le guide de démarrage du débutant
Godot Engine, le guide de démarrage du débutant
 
Introduction aux interfaces.
Introduction aux interfaces.Introduction aux interfaces.
Introduction aux interfaces.
 
SapiensM14 - Video numérique
SapiensM14 - Video numériqueSapiensM14 - Video numérique
SapiensM14 - Video numérique
 
Javascript proprement
Javascript proprementJavascript proprement
Javascript proprement
 
Transitions et Animations – Donnez une nouvelle dimension à vos applications ...
Transitions et Animations – Donnez une nouvelle dimension à vos applications ...Transitions et Animations – Donnez une nouvelle dimension à vos applications ...
Transitions et Animations – Donnez une nouvelle dimension à vos applications ...
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}
 
JavaSwing.pdf
JavaSwing.pdfJavaSwing.pdf
JavaSwing.pdf
 
Nouveautes Flash CS4, par Nicolas Gans - Regart.net formations
Nouveautes Flash CS4, par Nicolas Gans - Regart.net formationsNouveautes Flash CS4, par Nicolas Gans - Regart.net formations
Nouveautes Flash CS4, par Nicolas Gans - Regart.net formations
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Cours Flash Ppp
Cours Flash PppCours Flash Ppp
Cours Flash Ppp
 
Le futur du Responsive Web Design
Le futur du Responsive Web DesignLe futur du Responsive Web Design
Le futur du Responsive Web Design
 
Initiation à Puppeteer et Rendertron en action
Initiation à Puppeteer et Rendertron en actionInitiation à Puppeteer et Rendertron en action
Initiation à Puppeteer et Rendertron en action
 
Presentation de gwt maven
Presentation de  gwt mavenPresentation de  gwt maven
Presentation de gwt maven
 
Slides de la
Slides de la Slides de la
Slides de la
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
 

Plus de Microsoft

La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
Microsoft
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
Microsoft
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
Microsoft
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
Microsoft
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Microsoft
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
Microsoft
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
Microsoft
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Microsoft
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Microsoft
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
Microsoft
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Microsoft
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
Microsoft
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Microsoft
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
Microsoft
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
Microsoft
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
Microsoft
 
Les nouveautés de C# 7
Les nouveautés de C# 7Les nouveautés de C# 7
Les nouveautés de C# 7
Microsoft
 
La 3D sur le web avec Babylon.js pas à pas
La 3D sur le web avec Babylon.js pas à pasLa 3D sur le web avec Babylon.js pas à pas
La 3D sur le web avec Babylon.js pas à pas
Microsoft
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Microsoft
 
Le développement web : tour d'horizon
Le développement web : tour d'horizonLe développement web : tour d'horizon
Le développement web : tour d'horizon
Microsoft
 

Plus de Microsoft (20)

La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
 
Les nouveautés de C# 7
Les nouveautés de C# 7Les nouveautés de C# 7
Les nouveautés de C# 7
 
La 3D sur le web avec Babylon.js pas à pas
La 3D sur le web avec Babylon.js pas à pasLa 3D sur le web avec Babylon.js pas à pas
La 3D sur le web avec Babylon.js pas à pas
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
 
Le développement web : tour d'horizon
Le développement web : tour d'horizonLe développement web : tour d'horizon
Le développement web : tour d'horizon
 

Dernier

Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU  SOUS WINDOWSCOURS D'ADMINISTRATION RESEAU  SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
AlbertSmithTambwe
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
AlbertSmithTambwe
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
abderrahimbourimi
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
Horgix
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 

Dernier (9)

Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU  SOUS WINDOWSCOURS D'ADMINISTRATION RESEAU  SOUS WINDOWS
COURS D'ADMINISTRATION RESEAU SOUS WINDOWS
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 

Microsoft Composition, pierre angulaire de vos applications ?

  • 2.
  • 3.
  • 4. Bonjour ! Samuel Blanchard Responsable Développement & Innovation NavisoDev @samoteph Benjamin Launay Designer UI/UX NavisoDev @AieAieEye
  • 5.
  • 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
  • 11.
  • 12.
  • 13.
  • 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é
  • 16.
  • 17.
  • 18. Alien, Ridley Scott, 1979 Flash Gordon, Mike Hodges, 1980
  • 19.
  • 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
  • 31.
  • 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
  • 38.
  • 40.
  • 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);
  • 43.
  • 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 !
  • 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

Notes de l'éditeur

  1. 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
  2. SAM
  3. BEN & SAM
  4. SAM
  5. 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)
  6. 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)
  7. SAM
  8. SAM
  9. SAM
  10. SAM
  11. BEN On parle de la série
  12. 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)
  13. BEN
  14. BEN
  15. BEN Créateur Ed Benguiat. Typographe et Graphiste créateur des logos de Reader Digest, Ford ou encore Playboy.
  16. BEN Richard Greenberg designer spécialiste des titres de films et de Livres. Connu pour DeadZone, Superman, Alien. www.artofthetitles.com
  17. 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.
  18. 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).
  19. 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.
  20. SAM
  21. SAM Pour Compositor.CreateScopedBatch voir l’exemple CompositionHelper.cs ligne 40
  22. 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
  23. SAM
  24. SAM
  25. SAM
  26. SAM Exemple des tuiles
  27. SAM
  28. 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.
  29. 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.
  30. 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.
  31. SAM Exemple des tuiles : TileControl.cs Line 319
  32. SAM TileControl.cs line 219
  33. SAM
  34. 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
  35. SAM
  36. 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?
  37. 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)
  38. 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.
  39. SAM MainPage.cs line 253
  40. SAM
  41. 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?
  42. SAM SplashScreen.xaml.cs line 129
  43. SAM