Embed Size (px)
Citation preview
#Build2016
Adding Interactions in the Visual Layer to Create Customized & Responsive ExperiencesAnthony Young & Lindsay KubasikDeveloper & Program ManagerWindows UI Platform
Demo
Zoom 3D
Platform BasicsBuilt-in Framework FunctionalityControls like ScrollViewer and ListViewNovember Update CustomizationsManipulationPropertySet from XAML ScrollViewer starts to bridge the gapNext Release of WindowsMore flexibility for customizable input driven animations
Demo
HelloInteractionTracker
Interactions in the Visual LayerRoot
Canvas
Photo
Other
Interactions in the Visual LayerRoot
Canvas
Photo
Other
InteractionTracker
Interactions in the Visual LayerRoot
Canvas
Photo
Other
InteractionTracker
VisualInteractionSource
Interactions in the Visual LayerRoot
Canvas
Photo
Other
InteractionTracker
VisualInteractionSource
Interactions in the Visual LayerRoot
Canvas
Photo
Other
InteractionTracker
ExpressionAnimation
“tracker.position”
VisualInteractionSource
Interactions in the Visual LayerRoot
Canvas
Photo
Other
InteractionTracker
ExpressionAnimation
“tracker.position”
VisualInteractionSource
Interactions in the Visual Layer
Expression Animation
Engine
Interaction
Tracker
Visual Interactio
nSource
User Input
Bindable Properties
Manipulation Data
AnimationUpdates Target
Visuals
Demo
HelloInteractionTrackerPull to Animate
What about the Customizations?Feel of InertiaAutoscrollPage Up/Page DownSnap Points
Updating InteractionTracker’s MotionSimple PropertiesDecay Rate, Min/Max PositionUpdating Position & ScaleDirect Updates, Animating UpdatesComplex Conditional ModifiersEndpoint, Motion
Defining Motion during InertiaForce-Based SystemAnimates InteractionTracker’s Acceleration
Demo
Inertia Modifiers3D Zoom Walkthrough
Demo
Zoom 3D Walkthrough
• Check out sample code & ask questions via GitHub (https://github.com/Microsoft/composition/)
• Follow us on twitter @WinComposition• Re-visit Build on Channel 9• Continue your education at
Microsoft Virtual Academy online
Call to Action
