Using Expression Animations to Create Engaging & Custom UI Microsoft Build 2016 4/18/2019 10:46 PM Using Expression Animations to Create Engaging & Custom UI 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 Expression Animations in UI Microsoft Build 2016 4/18/2019 10:46 PM Demo Expression Animations in UI © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Platform Basics Key Frame Animations Expression Animations 4/18/2019 10:46 PM Platform Basics Key Frame Animations Expression Animations © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Hello World Example Gears Expression Microsoft Build 2016 4/18/2019 10:46 PM Demo Hello World Example Gears Expression © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Operators Functions Constructors Keywords + - * / % ? 4/18/2019 10:46 PM Operators + - * / % ? Functions Abs(), Min(), Clamp(), Lerp(), Ln(), ToRadians(), and more... Constructors Vector2(), Vector3(), Matrix4x4(), Quaternion(), and more... Keywords this.StartingValue this.Target © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo A Few More Samples Microsoft Build 2016 4/18/2019 10:46 PM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Property Sets //App will update this property when needed 4/18/2019 10:46 PM Property Sets //App will update this property when needed _propSet.InsertScalar(“hour”, GetHourOfDay()); ExpressionAnimation colorExpression = _compositor.CreateExpressionAnimation(); colorExpression.Expression = “(props.hour >= 6) && (props.hour <= 18) ? color1 : color2"; colorExpression.SetReferenceParameter(“props", _propSet); colorExpression.SetColorParameter(“color1", Colors.LightBlue); colorExpression.SetColorParameter(“color2", Colors.DarkBlue); _visualA.Brush.StartAnimation(“Color", colorExpression); © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Expression Keyframe in Gears Microsoft Build 2016 4/18/2019 10:46 PM Demo Expression Keyframe in Gears Performance Tips: Templates & Property Sets © 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