3

2 つのキャンバス間のアニメーションを使用して、Windows ストア アプリでセマンティック ズーム効果をシミュレートしています。TextBlockただし、キャンバスに表示されるものを「ズームアウト」すると、アニメーションが完了するまで非常にぼやけて表示されます。

これは最初のアニメーションでのみ発生し、その後のすべてのアニメーションでテキストがクリアになります。

ビットマップのキャッシュ タイプの問題が疑わCacheModeれますが、ビットマップまたは null に設定しても違いはありません。

これを制御または変更できる設定はありますか?

ズーム中とズーム後のページの比較

アニメーションに使用される XAML は非常に単純で、可視性を切り替えてから、単純な DoubleAnimation を使用してGrid、さまざまな画像を含む の X および Y 値のスケールを変更します。それぞれの内部にGridは があり、ViewBoxその内部にはカスタム コントロールがあります (TemplatedControl単純な古いカスタム コントロールではありません)。

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="VisualStateGroup">
        <VisualStateGroup.Transitions>
            <VisualTransition From="ZoomedIn" GeneratedDuration="0" To="ZoomedOut">
                <Storyboard>
                    <DoubleAnimation Duration="0:0:0.5" To="0.01" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ZoomedInGrid" d:IsOptimized="True"/>
                    <DoubleAnimation Duration="0:0:0.5" To="0.01" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ZoomedInGrid" d:IsOptimized="True"/>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ZoomedInGrid">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ZoomedOutGrid">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0.01"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ZoomedOutGrid">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0.01"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ZoomedOutGrid">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualTransition>
            <VisualTransition From="ZoomedOut" GeneratedDuration="0" To="ZoomedIn">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ZoomedInGrid">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ZoomedInGrid">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0.01"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ZoomedInGrid">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0.01"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimation Duration="0:0:0.5" To="0.01" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ZoomedOutGrid" d:IsOptimized="True"/>
                    <DoubleAnimation Duration="0:0:0.5" To="0.01" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ZoomedOutGrid" d:IsOptimized="True"/>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ZoomedOutGrid">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualTransition>
        </VisualStateGroup.Transitions>
        <VisualState x:Name="ZoomedIn"/>
        <VisualState x:Name="ZoomedOut">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ZoomedOutGrid">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ZoomedInGrid">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Collapsed</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

はるかに単純なシナリオで同様の問題を再現しました。コードはGitHubから入手できます。問題を確認するには、ここにビデオがあります。ズームアウトから通常の状態に戻ると、テキストがぼやけます。

同様の問題:

4

2 に答える 2