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

Question

我在这里看到了有关如何创建图像滑入效果的帖子，但是我目前正在尝试将 Windows Phone 8 项目中的 TextBlock 动画设置为同时“滑入和淡入”时间，只是为了给我的应用程序“时髦”的感觉。我当前的代码针对不透明度的 StoryBoard.Target 属性并且有效，我只是对如何为不透明度设置动画感到困惑，我猜测“滑入”效果将是“X”属性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 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>