WinRT（C＃/ XAML）没有模糊的比例

Question

我已经将基本动画放在一起，控制缩放比例从0.1到1.0（x & y）。我始终看到的问题是，这些控制器在最终静态状态解决之前会“模糊”。

一个例子是我拿的这个屏幕凸轮。

Watch Screen Cam

我不知道是什么导致了这一点。它是您通过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上，并从两个独立的来源表面RT平板电脑（即不是硬件特定的）。
• 我试过BitmapCache，看看它是否有任何改变（会变得更糟）。

Answer 1

设置UseLayoutRounding = “真” 为UIBorder

Answer 2

似乎是一个错误。显然，WinRT会在动画过程中自动将CacheMode转换为BitmapCache，并以低标度缓存对象。虽然我无法复制您现在看到的内容，但在为TextBlocks的投影属性设置动画时，我在Windows 8的预发布版本中遇到了类似的问题。我认为可能发生的情况是，它使用开始动画前使用的控件的最大尺寸来确定用于BitmapCache的RenderAtScale属性值（WinRT中不提供此值，但在Silverlight或WPF中存在，并且它看起来像它的一个版本存在于WinRT中，它只是不暴露给API的用户）。一种解决方法可能会在加载时以某种方式将位图的ScaleX/ScaleY值设置为1，然后在位图第一次显示之前回到0.2。或者，您可以将控件的不透明度设置为0并在动画开始之前将其缩放为1，然后在将缩放比例设置为0.2之后淡入控件。如果你真的需要小动画出现在动画之前 - 你可以有两个控制副本 - 一个小动画在动画开始后立即消失，另一个从大而不明（或者在不透明度=“0.005” ），并且在动画开始时非常快地动画到不透明度1，比例0.2。

这看起来很好对我说：

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