XAML 故事板动画从外部视口-Windows Phone 8 移动图像 [英] XAML storyboard animation moving images from outside viewport-windows phone 8

问题描述

我需要创建一个启动画面，其中图像需要从屏幕底部向上滑动.最初它应该放在视口之外然后被引入.我知道我需要使用故事板动画，将目标属性指定为图像的名称并使用渲染翻译.由于我是 XAML 的新手.

I need to create a splash screen, where image needs to slide from bottom of the screen up.Initially it should be placed outside the viewport and then brought in.I understand i need to use story board animation,give target property as image's name and use render translate.Since m new to XAML.. I have the bare skeleton, I dunno how to build things up from here.. please help.

  <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>

推荐答案

最简单的方法是将 CompositeTransform 添加到您的图像，最初设置在屏幕上，然后为 TranslateY 属性设置动画.

The easiest way to do this is the add a CompositeTransform to your image, initially set off the screen, and then animate the TranslateY property.

<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>

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

You'll also need to trigger the storyboard to begin. I can't remember the XAML for triggering it as an event, but you can add MainImageSlideIn.Begin() in your page's Loaded event in C#

这篇关于XAML 故事板动画从外部视口-Windows Phone 8 移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！