1. Using Expression Animations to Create Engaging & Custom UI
Microsoft Build 2016
4/18/ :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.

2. Demo Expression Animations in UI Microsoft Build 2016
4/18/ :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.

3. Platform Basics Key Frame Animations Expression Animations
4/18/ :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.

4. Demo Hello World Example Gears Expression Microsoft Build 2016
4/18/ :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.

5. Operators Functions Constructors Keywords + - * / % ?
4/18/ :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.

6. 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.

7. Property Sets //App will update this property when needed
4/18/ :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.

8. Demo Expression Keyframe in Gears
Microsoft Build 2016
4/18/ :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.

9. Call to Action
Check out sample code & ask questions via GitHub (
Follow us on
Re-visit Build on Channel 9
Continue your education at Microsoft Virtual Academy online