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