3

Windowsストアアプリケーション（Winrt、Metro、Windows 8アプリ）を構築しています。グリッドビューアニメーションで画像を表示してみます。画像がウェブから読み込まれて開かれると、セルに画像が表示されます。

そのためのストーリーボードがあります：

            <Storyboard x:Name="PopupImageStoryboard">
                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="100"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="240"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="100"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="240"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

そして、画像がロードされて開かれたイベントを処理するためのC＃コードがあります。

    private void Image_ImageOpened(object sender, RoutedEventArgs e)
    {
        Storyboard.SetTarget(PopupImageStoryboard, sender as Image);
        PopupImageStoryboard.Begin();
    }

動作しません。実行中にターゲットを変更して同じストーリーボードを再実行することはできません。しかし、複数の画像でこのアニメーションを同時に実行したいと思います。アニメーションを再利用するためのソリューションをお勧めしますか？

4

1 に答える 1

4

子アニメーションのそれぞれからこれを削除する必要があります。

Storyboard.TargetName="image"

また、1つのストーリーボードを2つのターゲット要素で同時に使用することはできない可能性があるため、その解決策は、それをDataTemplateに配置することです。

<Page.Resources>
    <DataTemplate
        x:Name="myStoryboard">
        <Storyboard ... />
    </DataTemplate>
</Page.Resources>

次に、コードであなたは言うでしょう

var sb = (Storyboard)myStoryboard.LoadContent();
Storyboard.SetTarget(sb, sender as Image);
sb.Begin();

ところで-WidthプロパティとHeightプロパティをアニメーション化しないでください。あなたの場合、これはほぼ間違いなく最良のアイデアではありません。代わりに、RenderTransformプロパティをアニメーション化する必要があります。たとえば、ScaleTransformのScaleXプロパティとScaleYプロパティをターゲットにします。アニメーションが依存している場合、各フレームでレイアウトが更新され、非常に非効率になり、アニメーションのフレームレートが低下します。

*編集

その場合、より良い解決策は次のようになります。

<Page.Resources>
    <DataTemplate
        x:Name="myStoryboardTemplate">
        <Storyboard>
            <DoubleAnimation
                Storyboard.TargetProperty="ScaleX"
                From="0.5"
                To="1.0"
                Duration="0:0:0.4">
                <DoubleAnimation.EasingFunction>
                    <BackEase
                        Amplitude="2"
                        EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation
                Storyboard.TargetProperty="ScaleY"
                From="0.5"
                To="1.0"
                Duration="0:0:0.4">
                <DoubleAnimation.EasingFunction>
                    <BackEase
                        Amplitude="2"
                        EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </DataTemplate>
</Page.Resources>

..。

<Image
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Width="620"
    Height="300"
    Source="Assets/SplashScreen.png"
    RenderTransformOrigin="0.5,0.5"
    Stretch="Fill">
    <Image.RenderTransform>
        <ScaleTransform
            x:Name="imageScaleTransform" />
    </Image.RenderTransform>
</Image>

..。

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    var sb = (Storyboard)myStoryboardTemplate.LoadContent();
    Storyboard.SetTarget(sb, imageScaleTransform);
    sb.Begin();
}
于 2012-12-19T17:59:35.583 に答える