Windows Phone 8 - 创建“淡入和滑入”动画

时间:2014-07-30 00:12:47

标签: c# xaml animation windows-phone-8

我已经在这里看过有关如何创建图像幻灯片效果的帖子,但是我正在尝试将Windows Phone 8项目中的TextBlock设置为幻灯片播放和淡入& #34;在同一时间,只是为了给我的应用程序"时髦"感觉。我目前的代码针对的是不透明的StoryBoard.Target属性,这很有效,我只是对如何设置不透明度的动画以及我猜测"滑入"而感到困惑。效果将是" X" TextBlock的属性,两者同时出现。我目前对Opacity的代码如下:

<phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="StoryBoard1">
        <DoubleAnimation Storyboard.TargetName="Txt2"
                         Storyboard.TargetProperty="Opacity"
                         From="0" To="1" Duration="0:0:1"
                         Completed="DoubleAnimation_Completed_1"/>
    </Storyboard>

简单明了,现在我将如何将其与&#34;幻灯片放入&#34;运动动画,任何人都可以指导我对代码进行哪些更改以达到前面所述的预期效果?任何书面样本都是一个很大的好处。

提前致谢。

1 个答案:

答案 0 :(得分:5)

根据布局设置&#34;滑入&#34;的动画效果可能很棘手 - 问题在于您确实需要从容器的宽度&#34;中设置X的动画,其中可能比听起来更难。但是,通常只需要对一个值进行硬编码就足够了。

所以,如果你有一个Canvas,那么你可以简单地为Canvas.X制作动画。否则,您必须向目标元素添加TranslateTransform,并为其X属性设置动画。

<Grid>
    <TextBlock x:Name="Txt2" Text="foo">
        <TextBlock.RenderTransform>
            <TranslateTransform x:Name="translateTransform" X="500" />
        </TextBlock.RenderTransform>
    </TextBlock>
</Grid>

然后将第二个动画添加到故事板:

<Storyboard x:Name="StoryBoard1">
    <DoubleAnimation Storyboard.TargetName="Txt2"
                     Storyboard.TargetProperty="Opacity"
                     From="0" To="1" Duration="0:0:1"
                     Completed="DoubleAnimation_Completed_1"/>
    <DoubleAnimation Storyboard.TargetName="translateTransform"
                     Storyboard.TargetProperty="X"
                     From="500" To="0" Duration="0:0:1"/>
</Storyboard>