Im trying to replicate a plane projection rotation in UWP using the composition api. But I'm having trouble with a projection matrix in my composition code. Here
s what I have:
private void Perspective(FrameworkElement element, double duration, float rotationDepth = 750f)
{
var parent = ElementCompositionPreview.GetElementVisual(element.Parent as FrameworkElement);
var width = (float)element.ActualWidth;
var height = (float)element.ActualHeight;
var halfWidth = (float)(width / 2.0);
var halfHeight = (float)(height / 2.0);
// Initialize the Compositor
var visual = ElementCompositionPreview.GetElementVisual(element);
// Create Scoped batch for animations
var batch = visual.Compositor.CreateScopedBatch(CompositionBatchTypes.Animation);
// Rotation animation
var projectionMatrix = new Matrix4x4(1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 1 / rotationDepth,
0, 0, 0, 1);
// To ensure that the rotation occurs through the center of the visual rather than the
// left edge, pre-multiply the rotation matrix with a translation that logically shifts
// the axis to the point of rotation, then restore the original location
parent.TransformMatrix = Matrix4x4.CreateTranslation(-halfWidth, -halfHeight, 0) *
projectionMatrix *
Matrix4x4.CreateTranslation(halfWidth, halfHeight, 0);
// Rotate along the Y-axis
visual.RotationAxis = new Vector3(0, 1, 0);
visual.CenterPoint = new Vector3(halfWidth, halfHeight, 0f);
visual.RotationAngleInDegrees = 0.0f;
var rotateAnimation = visual.Compositor.CreateScalarKeyFrameAnimation();
rotateAnimation.InsertKeyFrame(0.0f, 90);
rotateAnimation.InsertKeyFrame(1f, 0);
rotateAnimation.Duration = TimeSpan.FromMilliseconds(duration);
visual.StartAnimation("RotationAngleInDegrees", rotateAnimation);
// Batch is ended an no objects can be added
batch.End();
}
So this code above will rotate along the Y-axis. In the gif below, you'll see that I have it animating on top of another animation which is driven by a PlaneProjection for comparison:
The "perspective" of both is fine, both in the middle. Now lets change this line of code to switch it for a rotation on the X-axis:
// Rotate along the Y-axis
visual.RotationAxis = new Vector3(0, 1, 0);
Now notice the gif below:
The composition animation seems to rotate with a perspective that`s more towards the right and not perfectly centered. Does my projection matrix need to change?
Finally got a fix, As mentioned here, by simply wrapping the affected control with a container solves the issue 👍:
So in my Xaml I had:
<Border Width="300"
Height="250"
Background="LightSeaGreen"
x:Name="Persp"
Margin="0,0,0,40">
<TextBlock Text="Composition"
FontSize="28"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontWeight="Bold"
Foreground="White" />
</Border>
which I changed to:
<Border Width="300"
Height="250">
<Border Background="LightSeaGreen"
x:Name="Persp"
Margin="0,0,0,40">
<TextBlock Text="Composition"
FontSize="28"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontWeight="Bold"
Foreground="White" />
</Border>
</Border>