Fixed gradient offsets for rectangle shape

aborziak-ms · aborziak-ms · commit e27c69f60f02 · 2021-06-10T16:25:00.000-07:00
diff --git a/source/LottieToWinComp/Brushes.cs b/source/LottieToWinComp/Brushes.cs
@@ -168,7 +168,7 @@ static void TranslateAndApplyLinearGradientStroke(
             ApplyCommonStrokeProperties(
                 context,
                 shapeStroke,
-                TranslateLinearGradient(context, shapeStroke, contextOpacity),
+                TranslateLinearGradient(context, shapeStroke, contextOpacity, null),
                 sprite);
         }
 
@@ -181,7 +181,7 @@ static void TranslateAndApplyRadialGradientStroke(
             ApplyCommonStrokeProperties(
                 context,
                 shapeStroke,
-                TranslateRadialGradient(context, shapeStroke, contextOpacity),
+                TranslateRadialGradient(context, shapeStroke, contextOpacity, null),
                 sprite);
         }
 
@@ -254,7 +254,11 @@ static void ApplyCommonStrokeProperties(
             sprite.StrokeBrush = brush;
         }
 
-        public static CompositionBrush? TranslateShapeFill(LayerContext context, ShapeFill? shapeFill, CompositeOpacity opacity)
+        public static CompositionBrush? TranslateShapeFill(
+            LayerContext context,
+            ShapeFill? shapeFill,
+            CompositeOpacity opacity,
+            Rectangles.InternalOffset? internalOffset)
         {
             if (shapeFill is null)
             {
@@ -264,8 +268,8 @@ static void ApplyCommonStrokeProperties(
             return shapeFill.FillKind switch
             {
                 ShapeFill.ShapeFillKind.SolidColor => TranslateSolidColorFill(context, (SolidColorFill)shapeFill, opacity),
-                ShapeFill.ShapeFillKind.LinearGradient => TranslateLinearGradient(context, (LinearGradientFill)shapeFill, opacity),
-                ShapeFill.ShapeFillKind.RadialGradient => TranslateRadialGradient(context, (RadialGradientFill)shapeFill, opacity),
+                ShapeFill.ShapeFillKind.LinearGradient => TranslateLinearGradient(context, (LinearGradientFill)shapeFill, opacity, internalOffset),
+                ShapeFill.ShapeFillKind.RadialGradient => TranslateRadialGradient(context, (RadialGradientFill)shapeFill, opacity, internalOffset),
                 _ => throw new InvalidOperationException(),
             };
         }
@@ -406,10 +410,40 @@ static CompositionColorBrush TranslateBoundSolidColor(
             return result;
         }
 
+        static void TranslateVector2AnimatableWithInternalOffset(
+            LayerContext context,
+            CompositionObject obj,
+            string propertyName,
+            TrimmedAnimatable<Vector2> value,
+            Rectangles.InternalOffset offset)
+        {
+            // anomate source property first
+            string sourcePropertyName = propertyName + "Source";
+            obj.Properties.InsertVector2(sourcePropertyName, ConvertTo.Vector2(value.InitialValue));
+            Animate.Vector2(context, value, obj, sourcePropertyName);
+
+            // create expression that offsets source property by internal offset
+            WinCompData.Expressions.Vector2 expression = offset.IsAnimated ?
+                ExpressionFactory.InternalOffsetExressionAdded(sourcePropertyName, offset.OffsetExpression!) :
+                ExpressionFactory.InternalOffsetValueAdded(sourcePropertyName, (Sn.Vector2)offset.OffsetValue!);
+
+            var expressionAnimation = context.ObjectFactory.CreateExpressionAnimation(expression);
+            expressionAnimation.SetReferenceParameter("my", obj);
+            if (offset.IsAnimated)
+            {
+                // expression can use geometry
+                expressionAnimation.SetReferenceParameter("geometry", offset.Geometry);
+            }
+
+            // animate original property with expression that applies  internal offset to it
+            Animate.WithExpression(obj, expressionAnimation, propertyName);
+        }
+
         static CompositionLinearGradientBrush? TranslateLinearGradient(
             LayerContext context,
             IGradient linearGradient,
-            CompositeOpacity opacity)
+            CompositeOpacity opacity,
+            Rectangles.InternalOffset? internalOffset)
         {
             var result = context.ObjectFactory.CreateLinearGradientBrush();
 
@@ -419,7 +453,11 @@ static CompositionColorBrush TranslateBoundSolidColor(
             var startPoint = Optimizer.TrimAnimatable(context, linearGradient.StartPoint);
             var endPoint = Optimizer.TrimAnimatable(context, linearGradient.EndPoint);
 
-            if (startPoint.IsAnimated)
+            if (internalOffset is not null)
+            {
+                TranslateVector2AnimatableWithInternalOffset(context, result, nameof(result.StartPoint), startPoint, internalOffset);
+            }
+            else if (startPoint.IsAnimated)
             {
                 Animate.Vector2(context, startPoint, result, nameof(result.StartPoint));
             }
@@ -428,7 +466,11 @@ static CompositionColorBrush TranslateBoundSolidColor(
                 result.StartPoint = ConvertTo.Vector2(startPoint.InitialValue);
             }
 
-            if (endPoint.IsAnimated)
+            if (internalOffset is not null)
+            {
+                TranslateVector2AnimatableWithInternalOffset(context, result, nameof(result.EndPoint), endPoint, internalOffset);
+            }
+            else if (endPoint.IsAnimated)
             {
                 Animate.Vector2(context, endPoint, result, nameof(result.EndPoint));
             }
@@ -453,13 +495,14 @@ static CompositionColorBrush TranslateBoundSolidColor(
         static CompositionGradientBrush? TranslateRadialGradient(
             LayerContext context,
             IRadialGradient gradient,
-            CompositeOpacity opacity)
+            CompositeOpacity opacity,
+            Rectangles.InternalOffset? internalOffset)
         {
             if (!context.ObjectFactory.IsUapApiAvailable(nameof(CompositionRadialGradientBrush), versionDependentFeatureDescription: "Radial gradient fill"))
             {
                 // CompositionRadialGradientBrush didn't exist until UAP v8. If the target OS doesn't support
                 // UAP v8 then fall back to linear gradients as a compromise.
-                return TranslateLinearGradient(context, gradient, opacity);
+                return TranslateLinearGradient(context, gradient, opacity, internalOffset);
             }
 
             var result = context.ObjectFactory.CreateRadialGradientBrush();
@@ -470,7 +513,11 @@ static CompositionColorBrush TranslateBoundSolidColor(
             var startPoint = Optimizer.TrimAnimatable(context, gradient.StartPoint);
             var endPoint = Optimizer.TrimAnimatable(context, gradient.EndPoint);
 
-            if (startPoint.IsAnimated)
+            if (internalOffset is not null)
+            {
+                TranslateVector2AnimatableWithInternalOffset(context, result, nameof(result.EllipseCenter), startPoint, internalOffset);
+            }
+            else if (startPoint.IsAnimated)
             {
                 Animate.Vector2(context, startPoint, result, nameof(result.EllipseCenter));
             }
diff --git a/source/LottieToWinComp/ExpressionFactory.cs b/source/LottieToWinComp/ExpressionFactory.cs
@@ -33,7 +33,8 @@ static class ExpressionFactory
         internal static readonly Scalar RootProgress = RootScalar(TranslationContext.ProgressPropertyName);
         internal static readonly Scalar MaxTStartTEnd = Max(MyTStart, MyTEnd);
         internal static readonly Scalar MinTStartTEnd = Min(MyTStart, MyTEnd);
-        static readonly Vector2 HalfMySize = MySize / Vector2(2, 2);
+        internal static readonly Vector2 HalfMySize = MySize / Vector2(2, 2);
+        internal static readonly Vector2 GeometryHalfSize = NamedVector2("geometry", "Size") / Vector2(2, 2);
         internal static readonly Color AnimatedColorWithAnimatedOpacity =
             ColorAsVector4MultipliedByOpacities(MyColor, new[] { MyOpacity });
 
@@ -46,6 +47,10 @@ static class ExpressionFactory
                                                                         MyPosition.Y - MyAnchor.Y,
                                                                         0);
 
+        internal static Vector2 InternalOffsetExressionAdded(string property, Vector2 offsetExpression) => MyVector2(property) + offsetExpression;
+
+        internal static Vector2 InternalOffsetValueAdded(string property, Sn.Vector2 offsetValue) => MyVector2(property) + Vector2(offsetValue);
+
         internal static Color ThemedColorMultipliedByOpacity(string bindingName, Animatables.Opacity opacity)
             => ColorAsVector4MultipliedByOpacity(ThemedColor4Property(bindingName), opacity.Value);
 
@@ -248,10 +253,14 @@ static Scalar CreateProgressExpression(ArraySegment<Segment> segments, Scalar pr
 
         static Vector2 MyVector2(string propertyName) => Vector2(My(propertyName));
 
+        static Vector2 NamedVector2(string name, string propertyName) => Vector2(Named(name, propertyName));
+
         static Vector4 MyVector4(string propertyName) => Vector4(My(propertyName));
 
         static string My(string propertyName) => $"my.{propertyName}";
 
+        static string Named(string name, string propertyName) => $"{name}.{propertyName}";
+
         // A property on the root property set. Used to bind to the property set that contains the Progress property.
         static string RootProperty(string propertyName) => $"{RootName}.{propertyName}";
 
diff --git a/source/LottieToWinComp/Rectangles.cs b/source/LottieToWinComp/Rectangles.cs
@@ -18,6 +18,41 @@ namespace Microsoft.Toolkit.Uwp.UI.Lottie.LottieToWinComp
     /// </summary>
     static class Rectangles
     {
+        // Rectangles are implemented differently in WinComp API
+        // and Lottie. In WinComp API coordinates inside rectangle start in
+        // top left corner and in Lottie they start in the middle
+        // To account for this we need to offset all the internal points
+        // for (Rectangle.Size / 2)
+        // This class represents this offset (static or animated)
+        public class InternalOffset
+        {
+            public RectangleOrRoundedRectangleGeometry Geometry { get; }
+
+            // Use expression if size is animated
+#nullable enable
+            public Expressions.Vector2? OffsetExpression { get; }
+#nullable disable
+
+            // Use constant value if size if static
+            public Sn.Vector2? OffsetValue { get; }
+
+            public bool IsAnimated => OffsetExpression is not null;
+
+            public InternalOffset(RectangleOrRoundedRectangleGeometry geometry, Expressions.Vector2 expression)
+            {
+                Geometry = geometry;
+                OffsetExpression = expression;
+                OffsetValue = null;
+            }
+
+            public InternalOffset(RectangleOrRoundedRectangleGeometry geometry, Sn.Vector2 value)
+            {
+                Geometry = geometry;
+                OffsetExpression = null;
+                OffsetValue = value;
+            }
+        }
+
         // NOTES ABOUT RECTANGLE DRAWING AND CORNERS:
         // ==========================================
         // A rectangle can be thought of as having 8 components -
@@ -318,10 +353,15 @@ static void ApplyRectangleContentCommon(
             var height = size.InitialValue.Y;
             var trimOffsetDegrees = (width / (2 * (width + height))) * 360;
 
+            InternalOffset internalOffset = size.IsAnimated ?
+                new InternalOffset(geometry, ExpressionFactory.GeometryHalfSize) :
+                new InternalOffset(geometry, ConvertTo.Vector2(size.InitialValue / 2));
+
             Shapes.TranslateAndApplyShapeContextWithTrimOffset(
                 context,
                 compositionRectangle,
                 rectangle.DrawingDirection == DrawingDirection.Reverse,
+                internalOffset,
                 trimOffsetDegrees: trimOffsetDegrees);
 
             compositionRectangle.SetDescription(context, () => rectangle.Name);
@@ -408,10 +448,15 @@ static void ApplyRectangleContentCommonXY(
             var initialHeight = height.InitialValue;
             var trimOffsetDegrees = (initialWidth / (2 * (initialWidth + initialHeight))) * 360;
 
+            InternalOffset internalOffset = width.IsAnimated || height.IsAnimated ?
+                new InternalOffset(geometry, ExpressionFactory.GeometryHalfSize) :
+                new InternalOffset(geometry, ConvertTo.Vector2(width.InitialValue / 2, height.InitialValue / 2));
+
             Shapes.TranslateAndApplyShapeContextWithTrimOffset(
                 context,
                 compositionRectangle,
                 rectangle.DrawingDirection == DrawingDirection.Reverse,
+                internalOffset,
                 trimOffsetDegrees: trimOffsetDegrees);
 
             compositionRectangle.SetDescription(context, () => rectangle.Name);
diff --git a/source/LottieToWinComp/Shapes.cs b/source/LottieToWinComp/Shapes.cs
@@ -34,17 +34,18 @@ public static void TranslateAndApplyShapeContext(
             ShapeContext context,
             CompositionSpriteShape shape,
             bool reverseDirection) =>
-            TranslateAndApplyShapeContextWithTrimOffset(context, shape, reverseDirection, 0);
+            TranslateAndApplyShapeContextWithTrimOffset(context, shape, reverseDirection, null, 0);
 
         public static void TranslateAndApplyShapeContextWithTrimOffset(
             ShapeContext context,
             CompositionSpriteShape shape,
             bool reverseDirection,
+            Rectangles.InternalOffset? internalOffset,
             double trimOffsetDegrees)
         {
             Debug.Assert(shape.Geometry is not null, "Precondition");
 
-            shape.FillBrush = Brushes.TranslateShapeFill(context, context.Fill, context.Opacity);
+            shape.FillBrush = Brushes.TranslateShapeFill(context, context.Fill, context.Opacity, internalOffset);
             Brushes.TranslateAndApplyStroke(context, context.Stroke, shape, context.Opacity);
 
             TranslateAndApplyTrimPath(
diff --git a/source/UIDataCodeGen/CodeGen/InstantiatorGeneratorBase.cs b/source/UIDataCodeGen/CodeGen/InstantiatorGeneratorBase.cs
@@ -2130,7 +2130,13 @@ void WriteCallHelperCreateSpriteShapeWithFillBrush(
 
                 // Call the helper and initialize the remaining CompositionShape properties.
                 WriteMatrixComment(builder, obj.TransformMatrix);
-                builder.WriteLine($"{ConstVar} result = CreateSpriteShape({CallFactoryFromFor(node, obj.Geometry)}, {Matrix3x2(transformMatrix)}, {CallFactoryFromFor(node, obj.FillBrush)});");
+
+                // We need to instantiate geometry first because sometimes it initializes fields
+                // that are used in FillBrush, but CreateSpriteShape(GetGeometry(), ..., GetFillBrush()) code
+                // will result in evaluating GetFillBrush() first which may cause null dereferencing
+                builder.WriteLine($"{ConstVar} geometry = {CallFactoryFromFor(node, obj.Geometry)};");
+
+                builder.WriteLine($"{ConstVar} result = CreateSpriteShape(geometry, {Matrix3x2(transformMatrix)}, {CallFactoryFromFor(node, obj.FillBrush)});");
                 InitializeCompositionObject(builder, obj, node);
                 WriteSetPropertyStatement(builder, nameof(obj.CenterPoint), obj.CenterPoint);
                 WriteSetPropertyStatement(builder, nameof(obj.Offset), obj.Offset);
