WinRT (C#/XAML) 缩放而不模糊 [英] WinRT (C#/XAML) Scale without blurring
问题描述
我已经制作了一个基本动画，它的控制缩放比例从 0.1 到 1.0 (x & y).我一直看到的问题是上述控件在最终静态之前的这种模糊".
I've put together a basic animation which has a Control scaling from 0.1 to 1.0 (x & y). The problem I keep seeing throughout is this "blurring" of the said controls before they settle on the final static state.
一个例子是我拍摄的这个屏幕摄像头.
An Example is this screen cam I took.
我不确定是什么原因造成的.它是您将通过 Blend 生成的默认动画/故事板.
I'm not sure what's causing this. Its a default Animation / Storyboard that you would generate via Blend.
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="UIBorder" >
<EasingDoubleKeyFrame KeyTime="0" Value="0.2">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseInOut" Amplitude="3"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
上述控件:
<Grid x:Name="UIBorder" Width="555" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform ScaleY="0.2" ScaleX="0.2"/>
</Grid.RenderTransform>
<Grid Margin="122,0,0,0" RenderTransformOrigin="0.5,0.5" >
<Border Background="#FF343434" ManipulationMode="None" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" RenderTransformOrigin="0.5,0.5" >
<Border.RenderTransform>
<CompositeTransform/>
</Border.RenderTransform>
</Border>
</Grid>
<Image HorizontalAlignment="Left" VerticalAlignment="Center" Source="ms-appx:///Assets/Chrome/LoginSeal.png" Stretch="None"/>
</Grid>
注意:
- 我已经在 Windows 8 PC 和 Surface RT 平板电脑上从两个独立来源(即非特定于硬件)确认了这种模糊.
- 我已经尝试过 BitmapCache，看看它是否有任何变化(变得更糟).
推荐答案
似乎是一个错误.显然，WinRT 在动画期间自动将 CacheMode 转换为 BitmapCache，并以低比例缓存对象.虽然我无法重现您现在看到的内容，但在为 TextBlocks 的投影属性设置动画时，我在 Windows 8 的预发布版本之一中遇到了类似的问题.我认为可能发生的情况是它使用在开始动画之前使用的控件的最大大小来确定用于 BitmapCache 的 RenderAtScale 属性值(在 WinRT 中不可用，但存在于 Silverlight 或 WPF 中，它似乎是它的一个版本存在于 WinRT 中，只是不向 API 的用户公开).一种解决方法可能是以某种方式将位图的 ScaleX/ScaleY 值在加载时以某种方式不可见地设置为 1，然后在位图首次出现之前返回到 0.2.或者，您可以在动画开始之前将控件的不透明度设置为 0 并缩放到 1，然后在将缩放设置为 0.2 动画后淡入控件.如果您真的需要在动画之前显示小控件 - 您可以拥有两个控件副本 - 一个小控件在动画开始后立即消失，另一个开始大但不可见(或 Opacity="0.005") 并在动画开始时很快将动画设置为不透明度 1，缩放 0.2.
Seems like a bug. Apparently WinRT is turning CacheMode to BitmapCache automatically during animations and it caches the object at the low scale. While I couldn't reproduce what you are seeing now I had a similar problem in one of the prerelease versions of Windows 8 when animating projection properties of TextBlocks. I think what likely happens is it uses the highest size of your control used before starting the animation to determing the RenderAtScale property value used for BitmapCache (which is not available in WinRT, but existed in Silverlight or WPF and it seems like a version of it exists in WinRT, it just isn't exposed to users of the API). One workaround then might be to somehow invisibly set the ScaleX/ScaleY values of your bitmap to 1 when it loads and then back to 0.2 before the bitmap first shows up. Alternatively you could have the control's opacity set to 0 and scale to 1 before the animation starts, then fade-in the control after animating the scale to 0.2. If you really need the small one to show up before the animation - you could have two copies of the control - one small one that disappears right after the start of the animation and another that starts big but invisible (or at Opacity="0.005") and very quickly animates to Opacity 1, Scale 0.2 when the animation starts.
这对我来说很好:
<Page
x:Class="App76.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App76"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Storyboard
x:Name="anim"
SpeedRatio="0.2">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
Storyboard.TargetName="UIBorder">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0.2">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame
KeyTime="0:0:1.4"
Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase
EasingMode="EaseInOut"
Amplitude="3" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
Storyboard.TargetName="UIBorder">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0.2">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase
EasingMode="EaseInOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame
KeyTime="0:0:1.4"
Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase
EasingMode="EaseInOut"
Amplitude="3" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid
Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid
x:Name="UIBorder"
Width="555"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<!--<Grid.CacheMode>
<BitmapCache
/>
</Grid.CacheMode>-->
<Grid.RenderTransform>
<CompositeTransform
x:Name="ct"
ScaleY="0.2"
ScaleX="0.2" />
</Grid.RenderTransform>
<Grid
Margin="122,0,0,0"
RenderTransformOrigin="0.5,0.5">
<Border
Background="#FF343434"
ManipulationMode="None"
IsDoubleTapEnabled="False"
IsHoldingEnabled="False"
IsRightTapEnabled="False"
IsTapEnabled="False"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<CompositeTransform />
</Border.RenderTransform>
</Border>
</Grid>
<Image
HorizontalAlignment="Left"
VerticalAlignment="Center"
Source="ms-appx:///Assets/SplashScreen.png"
Stretch="None" />
</Grid>
<Button
VerticalAlignment="Bottom"
HorizontalAlignment="Left"
Content="TEST"
Click="ButtonBase_OnClick" />
</Grid>
</Page>
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace App76
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
ct.ScaleX = 1;
ct.ScaleY = 1;
this.Loaded += MainPage_Loaded;
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
ct.ScaleX = 0.2;
ct.ScaleY = 0.2;
}
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
anim.Begin();
}
}
}
这篇关于WinRT (C#/XAML) 缩放而不模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
