#Build2016

Using Expression Animations to Create Engaging & Custom UIAnthony Young & Lindsay KubasikDeveloper & Program ManagerWindows UI Platform

Demo

Expression Animations in UI

Platform BasicsKey Frame AnimationsExpression Animations

Demo

Hello World ExampleGears Expression

+ - * / % ?Operators

Keywords

Functions

ConstructorsAbs(), Min(), Clamp(), Lerp(), Ln(), ToRadians(), and more...

Vector2(), Vector3(), Matrix4x4(), Quaternion(), and more...

this.StartingValue this.Target

Demo

A Few More Samples

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);

Demo

Expression Keyframe in GearsPerformance Tips: Templates & Property Sets

• 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