xaml - Cómo animar la escala de TextBlock en UWP

animation scale

Question

Cuando uso Storyboard para acercarme a TextBlock, se pixela mientras hace zoom y rerende solo cuando está completo.

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="TextBlock" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.5"/>

¿Hay alguna forma de restituir TextBlock en cada cuadro?

Answer 1

Encontré una solución, aunque ya no se trata de TextBlock, pero para mí funcionó:

 private void CreateText(string text)
{
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
CreateDevice();
_spriteTextVisual = _compositor.CreateSpriteVisual();
_spriteTextVisual.Size = new Vector2(512, 512);
_drawingTextSurface = _graphicsDevice.CreateDrawingSurface(new Size(512, 512), DirectXPixelFormat.B8G8R8A8UIntNormalized, DirectXAlphaMode.Premultiplied);
using (var ds = CanvasComposition.CreateDrawingSession(_drawingTextSurface))
{
ds.Clear(Colors.Transparent);
ds.DrawText(text, new Rect(0, 0, 512, 512), Colors.Black, new CanvasTextFormat
{
FontSize = 32,
FontWeight = FontWeights.Light,
VerticalAlignment = CanvasVerticalAlignment.Top,
HorizontalAlignment = CanvasHorizontalAlignment.Center,
LineSpacing = 32
});
}
_surfaceTextBrush = _compositor.CreateSurfaceBrush(_drawingTextSurface);
_spriteTextVisual.Brush = _surfaceTextBrush;
ElementCompositionPreview.SetElementChildVisual(this, _spriteTextVisual);
}
private void CreateDevice()
{
_device = CanvasDevice.GetSharedDevice();
_device.DeviceLost += Device_DeviceLost;
if (_graphicsDevice == null)
{
_graphicsDevice = CanvasComposition.CreateCompositionGraphicsDevice(_compositor, _device);
}
else
{
CanvasComposition.SetCanvasDevice(_graphicsDevice, _device);
}
}
private async void Device_DeviceLost(CanvasDevice sender, object args)
{
_device.DeviceLost -= Device_DeviceLost;
await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, CreateDevice);
}

Solo tiene que hacer este texto con el tamaño máximo de escala.

Answer 2

Parece que esto es por diseño. Vea esta respuesta de Jerry Nixon en una pregunta muy similar.

Aparentemente esto es para asegurar que la animación sea fluida, ya que renderizar la fuente completamente en cada cuadro sería costoso.

La única forma en que probablemente puedas superar esto es envolver TextBlock dentro de un elemento Viewbox y escalar la propiedad Height Viewbox . Sin embargo, esto no funcionará automáticamente y también deberá agregar EnableDependentAnimation="True" al elemento DoubleAnimationUsingKeyFrames . Desafortunadamente, verá que este enfoque también causa actualizaciones de diseño en cada fotograma y, por lo tanto, es muy discordante.