Раскадровка не может быть выполнена дважды

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

Работает как очарование.