c# - XAML Storyboard动画从外部视口(viewport)移动图像-Windows Phone 8

Question

我需要创建一个启动画面，图像需要从屏幕底部向上滑动。最初它应该放在视口(viewport)之外然后带进来。我知道我需要使用 Storyboard动画，将目标属性设置为图像的名称并使用渲染翻译。因为我是 XAML 的新手。我只有基本框架，我不知道如何从这里构建东西。请帮忙。

  <Grid HorizontalAlignment="Left" Height="1047" VerticalAlignment="Top" Width="480" Margin="0,-24,0,-255" Background="White">
    <Grid.Resources>
        <Storyboard x:Name="myanimation">
            <DoubleAnimation></DoubleAnimation>
        </Storyboard>
    </Grid.Resources>
    <Image HorizontalAlignment="Left" Height="252" Margin="0,795,0,0" VerticalAlignment="Top" Width="480" Source="/Assets/splash-bottom.png"/>
</Grid>

Answer 1

执行此操作的最简单方法是将 CompositeTransform 添加到您的图像，首先关闭屏幕，然后为 TranslateY 属性设置动画。

<Grid ...>
    <Grid.Resources>
        <Storyboard x:Name="MainImageSlideIn">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="MainImage">
                <EasingDoubleKeyFrame KeyTime="0" Value="900"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Grid.Resources>
    <Image x:Name="MainImage"HorizontalAlignment="Left" VerticalAlignment="Top" Width="480" Source="/Assets/splash-bottom.png">
        <Image.RenderTransform>
            <CompositeTransform TranslateY="900" />
        </Image.RenderTransform>
    </Image>
</Grid>

您还需要触发 Storyboard才能开始。我不记得将它作为事件触发的 XAML，但您可以在 C# 中页面的 Loaded 事件中添加 MainImageSlideIn.Begin()