Post on 08-Jan-2017
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