Question

我尝试在我的应用中使用动画，而我只使用两个页面来测试动画。

当应用程序第一次启动时，我想用滑动效果为我的应用程序标题设置动画。标题应该来自页面外部。

我使用了以下代码：

 <StackPanel x:Name="TitlePanel"
                Grid.Row="0"
                Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle"
                   Text="{Binding LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"
                   Style="{StaticResource PhoneTextNormalStyle}" RenderTransformOrigin="0.5,0.5" >
            <TextBlock.RenderTransform>
                <CompositeTransform x:Name="ApplicationTitleTransIn" TranslateX="-200"/>
            </TextBlock.RenderTransform>
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="TextBlock.Loaded">
                    <BeginStoryboard>
                        <Storyboard BeginTime="00:00:0.5">
                            <DoubleAnimation Duration="00:00:0.7"
                        Storyboard.TargetName="ApplicationTitleTransIn" 
                        Storyboard.TargetProperty="TranslateX" 
                        From="-200" To="0">
                                <DoubleAnimation.EasingFunction>
                                    <BackEase EasingMode="EaseOut"/>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>
    </StackPanel>

它运作良好。

单击按钮时，我的应用程序标题应移至页面右侧，然后显示第二页。

我创建了以下故事板：

<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="ApplicationTitleTransOut">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ApplicationTitle">
            <EasingDoubleKeyFrame KeyTime="0" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <ExponentialEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="600">
                <EasingDoubleKeyFrame.EasingFunction>
                    <ExponentialEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</phone:PhoneApplicationPage.Resources>

在后面的代码中，故事板按如下方式执行：

 ApplicationTitleTransOut.Completed += delegate
            {
                ApplicationTitleTransOut.Stop();

                var vm = DataContext as MainViewModel;

                if (vm != null)
                {
                    vm.OpenPageCommand.Execute(listBox.SelectedItem as TileItem);
                }
            };

        ApplicationTitleTransOut.Begin();

文本将移至我页面的右侧，然后我将导航到第二页。

到现在为止一切正常。

但是当我按下后退按钮（在手机上）时，我有一个例外。

ExceptionObject = {System.InvalidOperationException: Cannot resolve TargetName ApplicationTitleTransIn.}

我错过了什么吗？这是实现这个动画的正确方法吗？

感谢您的帮助。

Answer 1

在您的情况下，我将以不同方式构建XAML布局。首先，您似乎不需要CompositeTransform，而只需要TranslateTransform。在这种情况下，请将此代码段用于RenderTransform：

<TextBlock.RenderTransform>
        <TranslateTransform x:Name="ApplicationTitleTransIn" X="-200"/>
</TextBlock.RenderTransform>

现在，当您将DoubleAnimation绑定到它时，请使用相对属性约定：

<DoubleAnimation Duration="00:00:0.7"
Storyboard.TargetName="ApplicationTitle"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" 
From="-200" To="0">

同样适用于您的DoubleAnimationUsingKeyFrames：

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"  Storyboard.TargetName="ApplicationTitle">

像魅力一样。

故事板不能执行两次

1 个答案: