Bienvenue !

LES TEMPS SONT SOMBRES

EFFET WAOUHDESIGN + COMPOSITION

Bonjour !

Samuel BlanchardResponsable

Développement & InnovationNavisoDev

@samoteph

Benjamin LaunayDesigner UI/UXNavisoDev

@AieAieEye

COMPOSITION : LES BASES

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 ?

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

POUR QUOI FAIRE ?

Passer de XAML à Composition :

Visual elementVisual = ElementCompositionPreview.GetElementVisual(elementXAML);

COMPOSITION & XAML

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

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

DÉMO : 1ER PAS

LA DEMO WAOUUUUH

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

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

POURQUOI FAIRE DU WAOUH ?

LA NOSTALGIE

LA TYPO

LA TYPO

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

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

…

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

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

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

ANIMATIONS PAR DURÉE

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

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

PROPRIÉTÉS ANIMABLES

• Pas de durée• Correspond à une fonction

ANIMATIONS PAR EXPRESSIONS

var animation = compositor.CreateExpressionAnimation();

animation.SetReferenceParameter("hostVisual", hostVisual);

animation.Expression = "hostVisual.Size / 2";glassVisual.StartAnimation(« Size", animation);

EXEMPLE D’ANIMATION : EXPRESSIONS

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

• 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

DE LA VIDEO A L’APPLES DECORS

CONSTRUCTION DE L’INTERFACE

ET EN XAML ?

FlipView

TileControl

TileControl

TileControl

TileControl

• Var scroller = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollviewer);

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

PARALLAX AVECSCROLLVIEWER

• 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

TILE CONTROL

Contrôle : 100px

ContainerVisual(2 + 1) x SpriteVisual

(50px par image)

LES EFFETS

The Fog, John Carpenter, 1980

ET, Steven Spielberg, 1982

• 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

LE FROSTED GLASS

LES CARDS

Icônes Tags

Cover

Avatar

Description

LES CARDS

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

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

L’UPSIDE DOWN

• Ajoute une lumière ou un spot à une image, un TextBlock…• Animable !

Compositor.CreateSpotLightCompositor.CreateAmbientLight

LIGHT

• 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

N° 46

@microsoftfrance @Technet_France @msdev_fr

N° 47

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