Microsoft Build 2016 1/16/2019 1:17 PM Adding Interactions in the Visual Layer to Create Customized & Responsive Experiences Anthony Young & Lindsay Kubasik Developer & Program Manager Windows UI Platform © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Zoom 3D Microsoft Build 2016 1/16/2019 1:17 PM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Platform Basics Built-in Framework Functionality 1/16/2019 1:17 PM Platform Basics Built-in Framework Functionality Controls like ScrollViewer and ListView November Update Customizations ManipulationPropertySet from XAML ScrollViewer starts to bridge the gap Next Release of Windows More flexibility for customizable input driven animations © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo HelloInteractionTracker Microsoft Build 2016 1/16/2019 1:17 PM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Interactions in the Visual Layer 1/16/2019 1:17 PM Interactions in the Visual Layer Root Canvas Other Photo © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Interactions in the Visual Layer 1/16/2019 1:17 PM Interactions in the Visual Layer Root Canvas InteractionTracker Other Photo © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Interactions in the Visual Layer 1/16/2019 1:17 PM Interactions in the Visual Layer Root VisualInteractionSource Canvas InteractionTracker Other Photo © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Interactions in the Visual Layer 1/16/2019 1:17 PM Interactions in the Visual Layer Root VisualInteractionSource Canvas InteractionTracker Other Photo © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Interactions in the Visual Layer 1/16/2019 1:17 PM Interactions in the Visual Layer Root VisualInteractionSource Canvas InteractionTracker Other Photo ExpressionAnimation “tracker.position” © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Interactions in the Visual Layer 1/16/2019 1:17 PM Interactions in the Visual Layer Root VisualInteractionSource Canvas InteractionTracker Other Photo ExpressionAnimation “tracker.position” © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Interactions in the Visual Layer 1/16/2019 1:17 PM Interactions in the Visual Layer Visual Interaction Source Interaction Tracker Expression Animation Engine Target Visuals User Input Manipulation Data Bindable Properties Animation Updates © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo HelloInteractionTracker Pull to Animate Microsoft Build 2016 1/16/2019 1:17 PM Demo HelloInteractionTracker Pull to Animate © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

What about the Customizations? 1/16/2019 1:17 PM What about the Customizations? Feel of Inertia Autoscroll Page Up/Page Down Snap Points © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Updating InteractionTracker’s Motion 1/16/2019 1:17 PM Updating InteractionTracker’s Motion Simple Properties Decay Rate, Min/Max Position Updating Position & Scale Direct Updates, Animating Updates Complex Conditional Modifiers Endpoint, Motion © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Defining Motion during Inertia 1/16/2019 1:17 PM Defining Motion during Inertia Force-Based System Animates InteractionTracker’s Acceleration © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Inertia Modifiers 3D Zoom Walkthrough Microsoft Build 2016 1/16/2019 1:17 PM Demo Inertia Modifiers 3D Zoom Walkthrough © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Zoom 3D Walkthrough Microsoft Build 2016 1/16/2019 1:17 PM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Call to Action 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