XAML故事板動畫移動圖像從外部視口-windows手機8

我需要創建一個啓動屏幕，圖像需要從屏幕底部滑動。最初它應該放置在視口外，然後帶入。我明白我需要使用故事板動畫，給目標屬性作爲圖像的名稱，並使用渲染translate.Since新的XAML ..我有裸露的骨架，我不知道如何從這裏建立東西..請幫助。XAML故事板動畫移動圖像從外部視口-windows手機8

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

來源

2013-09-27 Prasanna Aarthi

做到這一點，最簡單的方法是一個CompositeTransform添加到您的圖像，初步確定了屏幕，然後動畫平移Y屬性。

<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作爲事件觸發它，但你可以在你的頁面的Loaded事件添加MainImageSlideIn.Begin（）在C＃

來源

2013-09-27 09:38:33 ZombieSheep

對不起 - 快速回答，我無法驗證它都可以工作... – ZombieSheep

另外，您可能想使用DoubleAnimation而不是DoubleAnimationUsingKeyFrames - 如果我有更復雜的動畫並且無法擺脫這種習慣，我傾向於使用後者。 – ZombieSheep

完美的作品..感謝您的幫助:) –

XAML故事板動畫移動圖像從外部視口-windows手機8

回答

相關問題