c# - Windows Phone 8 - 创建 "Fade-in and slide-in"动画

Question

我在这里看到了有关如何创建图像滑入效果的帖子，但是我目前正在尝试在 Windows Phone 8 项目中对 TextBlock 进行动画处理，以同时“滑入和淡入”时间，只是为了给我的应用程序带来“时髦”的感觉。我当前的代码针对不透明度的 StoryBoard.Target 属性，并且有效，我只是对如何为不透明度设置动画感到困惑，我猜测对于“滑入”效果，它将是TextBlock，两者同时进行。我目前的不透明度代码如下:

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

很好又简单，现在我如何将其与“滑入”运动动画结合起来，有人可以指导我需要对代码进行哪些更改才能达到前面所述的所需效果吗？任何写出的样本都会是一个很大的奖励。

提前致谢。

Answer 1

根据布局的不同，为“滑入”设置动画可能会很棘手 - 问题是您确实需要从“容器的宽度”为 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:

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