0

アプリでアニメーションを使用しようとしましたが、アニメーションをテストするために 2 つのページのみを使用しています。

アプリの初回起動時に、アプリケーションのタイトルをスライド効果でアニメーション化したいと考えています。タイトルはページの外から来る必要があります。

次のコードを使用しました。

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

そして、それはかなりうまく機能します。

ボタンをクリックすると、アプリケーションのタイトルがページの右側に移動し、2 ページ目が表示されます。

次のストーリーボードを作成しました。

<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();

テキストがページの右側に移動し、2 ページ目に移動します。

今まですべてが機能します。

しかし、（電話で）戻るボタンを押すと、例外があります。

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

私は何か見落としてますか？これは、このアニメーションを実現する正しい方法ですか?

ご協力ありがとうございました。

4

1 に答える 1

2

あなたの状況では、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">

魅力のように機能します。

于 2013-02-15T18:53:01.163 に答える