WinRT 动画在 XAML 中显示/隐藏答案

【问题标题】：WinRT Animation Show/Hide in XAMLWinRT 动画在 XAML 中显示/隐藏
【发布时间】：2014-01-30 08:16:28
【问题描述】：

我不知道如何在几秒钟内使动画发生和阻尼。我知道 FadeOutThemeAnimation 和 FadeInThemeAnimation，但我需要将它们组合成一个动画。也许有人知道。

UPD：这是通过 DoubleAnimation msdn description 完成的

【问题讨论】：

不确定要合并它们是什么意思？你想让某些东西在它淡出时淡入吗？你可能有一个你所追求的效果的例子吗？
对不起，我的英语不好，我只想要一个简单的效果，当我按下一个显示图片的按钮时，几秒钟后这张图片就会消失。
哦，那么不要理会 ThemeAnimation 的问题，只需使用 Click 的 Button 之类的路由事件触发的 Storyboard 即可对不透明度执行 DoubleAnimation，您可以也设置Durationmore info，别担心你的英语，不管我们的母语是什么，我们都是编码员；）
谢谢，克里斯！它帮助了我。
不用担心，如果您自己还没有完全弄清楚，请在此处回复，我们会给您答案，但通常情况下，您必须首先表现出努力。干杯！

标签： windows-8 windows-store-apps winrt-xaml

【解决方案1】：

很难确切地确定您想要的动画。所以我整理了一些可能会给你想要的东西。只需将其粘贴到页面中并运行即可。

<Page.Resources>
    <Storyboard x:Name="RevealImages">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle">
            <EasingDoubleKeyFrame KeyTime="0" Value="-300"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CubicEase EasingMode="EaseInOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-300"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle1">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CubicEase EasingMode="EaseInOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-250"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle1">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CubicEase EasingMode="EaseInOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="250"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle2">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CubicEase EasingMode="EaseInOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="textBlock">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Filling"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="Waiting"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="Hiding"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:3" Value=""/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.FontFamily)" Storyboard.TargetName="textBlock">
            <DiscreteObjectKeyFrame KeyTime="0:0:2">
                <DiscreteObjectKeyFrame.Value>
                    <FontFamily>Global User Interface</FontFamily>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="0:0:3">
                <DiscreteObjectKeyFrame.Value>
                    <FontFamily>Global User Interface</FontFamily>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Content="Show" HorizontalAlignment="Left" Height="75" Margin="7,7,0,0" VerticalAlignment="Top" Width="92" FontFamily="Global User Interface">
        <Interactivity:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="Click">
                <Media:ControlStoryboardAction Storyboard="{StaticResource RevealImages}"/>
            </Core:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </Button>
    <Rectangle x:Name="rectangle" HorizontalAlignment="Left" Height="250" Margin="10,117,0,0" VerticalAlignment="Top" Width="250" RenderTransformOrigin="0.5,0.5" Fill="White">
        <Rectangle.RenderTransform>
            <CompositeTransform TranslateX="-250"/>
        </Rectangle.RenderTransform>
    </Rectangle>
    <Grid HorizontalAlignment="Left" Height="250" Margin="265,117,0,0" VerticalAlignment="Top" Width="250">
        <Grid.Clip>
            <RectangleGeometry Rect="0,0,250,250" />
        </Grid.Clip>
        <Rectangle x:Name="rectangle1" Fill="White" RenderTransformOrigin="0.5,0.5" >
            <Rectangle.RenderTransform>
                <CompositeTransform TranslateX="-250" TranslateY="250"/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
    <Rectangle x:Name="rectangle2" HorizontalAlignment="Left" Height="250" Margin="520,117,0,0" VerticalAlignment="Top" Width="250" Opacity="0" Fill="White"/>
    <TextBlock HorizontalAlignment="Left" Height="28" Margin="10,84,0,0" TextWrapping="Wrap" Text="Slide In" VerticalAlignment="Top" Width="250" FontSize="20"/>
    <TextBlock HorizontalAlignment="Left" Height="28" Margin="265,84,0,0" TextWrapping="Wrap" Text="Slip In" VerticalAlignment="Top" Width="250" FontSize="20"/>
    <TextBlock HorizontalAlignment="Left" Height="28" Margin="520,84,0,0" TextWrapping="Wrap" Text="Fade In" VerticalAlignment="Top" Width="250" FontSize="20"/>
    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Height="137" Margin="113,10,0,0" TextWrapping="Wrap" Text="0" VerticalAlignment="Top" Width="238" FontSize="66.667"/>
</Grid>

祝你好运！

【讨论】：