故事板不能执行两次

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

工程就像一个魅力。